Prettying stuff

src/components/comments.js

@@ -68,7 +68,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
         <div className={`${!displayed && styles.hidden}`}>
           <div className={styles.commentText}> {content}</div>
           <div className={'actions'}>
-            <span className={styles.reply_bttn}
+            <span
+              className={styles.reply_bttn}
               onClick={() => {
                 setCommenting(true)
               }}
@@ -76,7 +77,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
               Válasz...
             </span>
             {own && (
-              <span className={styles.delete_bttn}
+              <span
+                className={styles.delete_bttn}
                 onClick={() => {
                   onDelete([index])
                 }}
@@ -178,7 +180,8 @@ export default function Comments({
             : null}
           {commentCount !== 0 ? (
             <div className={'actions'}>
-              <span className={styles.comment_bttn}
+              <span
+                className={styles.comment_bttn}
                 onClick={() => {
                   setAddingNewComment(true)
                 }}
@@ -219,7 +222,9 @@ export default function Comments({
         <span className={styles.comment_bttn}>
           {commentCount === 0
             ? 'Új komment'
-            : `További ${commentCount} komment${commentCount > 1 ? ' mutatása' : ''}`}
+            : `További ${commentCount} komment${
+                commentCount > 1 ? ' mutatása' : ''
+              }`}
         </span>
       </div>
     </div>

src/components/composer.js

@@ -67,7 +67,11 @@ export default function Composer({ onSubmit }) {
                 }}
               />
             )}
-            <div id="radiolabel"><p><b>A poszt típusa:</b></p></div>
+            <div id="radiolabel">
+              <p>
+                <b>A poszt típusa:</b>
+              </p>
+            </div>
             <div className={styles.typeSelector}>
               <div title="A főoldalon mindenki láthatja, reagálhat rá és kommentelhet alá">
                 <input

src/components/composer.module.css

@@ -4,8 +4,8 @@
   max-width: 400px;
 }
 
-    .container > input,
+.container > input,
-    .container > textarea {
+.container > textarea {
   margin: 5px 0px;
   padding: 4px;
   width: 97%;
@@ -13,16 +13,16 @@
   background-color: #1f2021;
   border-radius: 5px;
   font-size: 15px;
-    }
+}
 
-    .container > textarea {
+.container > textarea {
   margin-left: 1px;
   width: 99%;
   resize: none;
-    }
+}
 
 .typeSelector {
-    display:inline-flex;
+  display: inline-flex;
   text-align: center;
   margin-left: 6px;
 }
@@ -43,9 +43,9 @@
   padding: 8px;
 }
 
-    .new:hover {
+.new:hover {
   background-color: var(--hoover-color);
-    }
+}
 
 .composerAction {
   display: flex;
@@ -55,7 +55,7 @@
   height: 100%;
 }
 
-    .composerAction > span {
+.composerAction > span {
   margin: 2px 2px;
   padding: 0px 10px;
   border: 1px solid #444;
@@ -67,11 +67,11 @@
   padding-top: 4px !important;
   transform: translate(109%, 10%);
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
-    }
+}
 
-        .composerAction > span:hover {
+.composerAction > span:hover {
   background-color: var(--hoover-color);
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
   color: var(--text-color);
   text-shadow: 2px 1.5px 10px black;
-        }
+}

src/components/dbSelector.module.css

@@ -20,12 +20,12 @@
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
-    .listItem:hover {
+.listItem:hover {
   background-color: var(--hoover-color);
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
   text-shadow: 2px 1.5px 10px black;
   color: var(--text-color);
-    }
+}
 
 .text {
   text-align: center;

src/defaultStyles.css

@@ -22,9 +22,9 @@ a {
   color: white;
 }
 
-    a:hover {
+a:hover {
   color: #c1c1c1;
-    }
+}
 
 textarea {
   color: var(--text-color);
@@ -83,24 +83,24 @@ input {
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
-    .sidebarLinks a:hover {
+.sidebarLinks a:hover {
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    }
+}
 
-    .sidebarLinks a.active {
+.sidebarLinks a.active {
   border: 0.5px solid var(--text-color);
   color: white;
   text-shadow: 2px 2px 8px black;
   font-weight: bold;
-    }
+}
 
-    .sidebarLinks a:hover:not(.active) {
+.sidebarLinks a:hover:not(.active) {
   background-color: var(--text-color);
   color: black;
   font-weight: bold;
   text-shadow: 2px 2px 8px black;
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    }
+}
 
 .menuicon div {
   height: 5px;
@@ -204,9 +204,9 @@ input {
   margin: 10px;
 }
 
-    .questionContainer:hover {
+.questionContainer:hover {
   background-color: var(--hoover-color);
-    }
+}
 
 .question {
   word-wrap: break-word;
@@ -298,12 +298,12 @@ input {
   margin: 5px 0px 0px 0px;
 }
 
-    .pageHeader h1 {
+.pageHeader h1 {
   padding-top: 6px;
   letter-spacing: 7px;
   text-align: center;
   margin: 0px;
-    }
+}
 
 .manualUsage {
   margin-top: 5px;
@@ -321,9 +321,9 @@ select {
   height: 30px;
 }
 
-    select:hover {
+select:hover {
-        border: 1px solid #F2CB05;
+  border: 1px solid #f2cb05;
-    }
+}
 
 .userStatus {
   display: flex;
@@ -346,9 +346,9 @@ select {
   font-size: 15.5px;
 }
 
-    .logout:hover {
+.logout:hover {
   color: #fff;
-    }
+}
 
 .msgs :first-child {
   font-size: 27px;
@@ -365,15 +365,15 @@ select {
   align-items: center;
 }
 
-    .actions > span {
+.actions > span {
   margin: 2px 2px;
   padding: 0px 10px;
   border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;
   user-select: none;
-    }
+}
 
-        .actions > span:hover {
+.actions > span:hover {
   background-color: var(--hoover-color);
-        }
+}

src/pages/manual.js

@@ -107,7 +107,9 @@ function renderMaual() {
       </div>
       <hr />
       <center>
-        <h2 id="pw" className={'subtitle'}>Jelszavak</h2>
+        <h2 id="pw" className={'subtitle'}>
+          Jelszavak
+        </h2>
       </center>
       <div className={'manualBody'}>
         <p>

src/pages/pwRequest.js

@@ -89,32 +89,47 @@ export default function PwRequest(props) {
       </div>
       <div id="form">
         <div className={styles.text}>
-          <p className={styles.descrip}>Ezen az oldalon lehetőséged van lekérni jelszavakat, 
+          <p className={styles.descrip}>
-          hogy új felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat pótold, 
+            Ezen az oldalon lehetőséged van lekérni jelszavakat, hogy új
-          amennyiben még be vagy jelentkezve a régivel. (Konkrét elfelejtett jelszó funkció még nincsen)<br />
+            felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat
-          Minden felhasználó saját és különböző jelszót kap. Inkább generálj egyet és add oda másnak,
+            pótold, amennyiben még be vagy jelentkezve a régivel. (Konkrét
-          mint hogy közösen használjatok egyet, mert egyszerre, egy felhasználó csak egy helyen, egy 
+            elfelejtett jelszó funkció még nincsen)
-          eszközön lehet belépve, mindenhol máshol automatikusan kijelentkeztetésre kerül. A jelszavakról
+            <br />
-          bővebben a Script használata oldal <a href="/manual#pw" target="_blank">vonatkozó részén</a> olvashatsz.</p>
+            Minden felhasználó saját és különböző jelszót kap. Inkább generálj
+            egyet és add oda másnak, mint hogy közösen használjatok egyet, mert
+            egyszerre, egy felhasználó csak egy helyen, egy eszközön lehet
+            belépve, mindenhol máshol automatikusan kijelentkeztetésre kerül. A
+            jelszavakról bővebben a Script használata oldal{' '}
+            <a href="/manual#pw" target="_blank">
+              vonatkozó részén
+            </a>{' '}
+            olvashatsz.
+          </p>
         </div>
         <div className={styles.text}>
           Az új felhasználóknak
           <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
-          napot kell várniuk, míg jelszó generálási lehetőséget kapnak.< br />
+          napot kell várniuk, míg jelszó generálási lehetőséget kapnak.
+          <br />
           Egy felhasználó egyszerre
           <span>{' ' + addPWCount + ' '}</span>
           jelszót generálhat, a jelszókérések közt
           <span>{' ' + addPwPerDay + ' '}</span>
-          napnak kell eltelnie, hogy újabb jelszót kérhess le.<br />
+          napnak kell eltelnie, hogy újabb jelszót kérhess le.
+          <br />
           Egy felhasználó összesen
           <span>{' ' + maxPWCount + ' '}</span>
-          jelszót generálhat.<br />          
+          jelszót generálhat.
+          <br />
           Ebből eddig
           <span>{' ' + requestedPWS + ' '}</span>
           lehetőséget használtál fel, tehát még
-          <span>{' ' + remaining}</span> db jelszót kérhetsz le. <br /><br /> A jelenleg bejelentkezett 
+          <span>{' ' + remaining}</span> db jelszót kérhetsz le. <br />
-          felhasználó létrehozva:
+          <br /> A jelenleg bejelentkezett felhasználó létrehozva:
-          <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>-kor.<br /><br />
+          <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>
+          -kor.
+          <br />
+          <br />
         </div>
         <div className={styles.buttonContainer}>
           <div onClick={handleSubmit} className={styles.button}>

src/pages/pwRequest.module.css

@@ -6,7 +6,7 @@
 }
 
 .button {
-  background-color: #F2CB05;
+  background-color: #f2cb05;
   border: none;
   color: black;
   padding: 15px 30px;