From d06f76f6b103ee0f1449b4243e6aa049d649b978 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Sun, 14 Mar 2021 10:40:47 +0100
Subject: [PATCH] Prettying stuff

---
 src/components/comments.js            |  19 +-
 src/components/comments.module.css    |  38 +--
 src/components/composer.js            |  36 +-
 src/components/composer.module.css    | 116 +++----
 src/components/dbSelector.module.css  |  48 +--
 src/components/modal.module.css       |  74 ++--
 src/components/newsEntry.module.css   |   6 +-
 src/components/reactButton.module.css |   6 +-
 src/defaultStyles.css                 | 472 +++++++++++++-------------
 src/pages/manual.js                   |   4 +-
 src/pages/pwRequest.js                |  43 ++-
 src/pages/pwRequest.module.css        |   2 +-
 12 files changed, 445 insertions(+), 419 deletions(-)

diff --git a/src/components/comments.js b/src/components/comments.js
index fedb46c..fbea50b 100644
--- a/src/components/comments.js
+++ b/src/components/comments.js
@@ -63,12 +63,13 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
             </div>
             <div>User #{user}</div>
           </div>
-        <div className={styles.commentDate}>{date}</div>
+          <div className={styles.commentDate}>{date}</div>
         </div>
         <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])
                 }}
@@ -153,8 +155,8 @@ export default function Comments({
   const [commentsShowing, setCommentsShowing] = useState(false)
   const commentCount = comments ? countComments(comments) : 0
 
-    return (
-      <div>
+  return (
+    <div>
       {commentsShowing ? (
         <Modal
           closeClick={() => {
@@ -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>
diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index 48055e2..d8b54e2 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -1,38 +1,38 @@
 .comment_bttn {
-    font-size: 15px;
-    padding-top: 4px !important;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  font-size: 15px;
+  padding-top: 4px !important;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .comment_bttn:hover {
-    transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    color: gainsboro;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  color: gainsboro;
 }
 
 .reply_bttn {
-    font-size: 15px;
-    margin-top: 14.5px !important;
-    margin-left: 6px !important;
-    padding-top: 4px !important;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  font-size: 15px;
+  margin-top: 14.5px !important;
+  margin-left: 6px !important;
+  padding-top: 4px !important;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .reply_bttn:hover {
-    transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    color: gainsboro;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  color: gainsboro;
 }
 
 .delete_bttn {
-    font-size: 15px;
-    margin-top: 14.5px !important;
-    margin-left: 6px !important;
-    padding-top: 4px !important;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  font-size: 15px;
+  margin-top: 14.5px !important;
+  margin-left: 6px !important;
+  padding-top: 4px !important;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .delete_bttn:hover {
-    transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    color: gainsboro;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  color: gainsboro;
 }
 
 .comment {
diff --git a/src/components/composer.js b/src/components/composer.js
index 9cd14d5..909a5fc 100644
--- a/src/components/composer.js
+++ b/src/components/composer.js
@@ -66,21 +66,25 @@ export default function Composer({ onSubmit }) {
                   setFile(e.target.files[0])
                 }}
               />
-            )}            
-            <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
-                      onChange={(e) => {
-                        setType(e.target.value)
-                      }}
-                      type="radio"
-                      name="type"
-                      value="public"
-                      defaultChecked
-                    />
-                    Publikus
-                </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
+                  onChange={(e) => {
+                    setType(e.target.value)
+                  }}
+                  type="radio"
+                  name="type"
+                  value="public"
+                  defaultChecked
+                />
+                Publikus
+              </div>
               <div title="Csak admin bácsi látja">
                 <input
                   onChange={(e) => {
@@ -105,7 +109,7 @@ export default function Composer({ onSubmit }) {
               >
                 Posztolás
               </span>
-            </div>            
+            </div>
           </div>
         </Modal>
       )}
diff --git a/src/components/composer.module.css b/src/components/composer.module.css
index 62e6a5c..48bb694 100644
--- a/src/components/composer.module.css
+++ b/src/components/composer.module.css
@@ -1,77 +1,77 @@
 .container {
-    display: flex;
-    flex-flow: column;
-    max-width: 400px;
+  display: flex;
+  flex-flow: column;
+  max-width: 400px;
 }
 
-    .container > input,
-    .container > textarea {
-        margin: 5px 0px;
-        padding: 4px;
-        width: 97%;
-        border-color: #5d5f61;
-        background-color: #1f2021;
-        border-radius: 5px;
-        font-size: 15px;
-    }
+.container > input,
+.container > textarea {
+  margin: 5px 0px;
+  padding: 4px;
+  width: 97%;
+  border-color: #5d5f61;
+  background-color: #1f2021;
+  border-radius: 5px;
+  font-size: 15px;
+}
 
-    .container > textarea {
-        margin-left: 1px;
-        width: 99%;
-        resize: none;
-    }
+.container > textarea {
+  margin-left: 1px;
+  width: 99%;
+  resize: none;
+}
 
 .typeSelector {
-    display:inline-flex;
-    text-align: center;
-    margin-left: 6px;
+  display: inline-flex;
+  text-align: center;
+  margin-left: 6px;
 }
 
 .tip {
-    font-size: 11px;
-    font-style: italic;
-    text-align: center;
-    margin: 15px 0px 2px 2px;
+  font-size: 11px;
+  font-style: italic;
+  text-align: center;
+  margin: 15px 0px 2px 2px;
 }
 
 .new {
-    text-align: center;
-    background-color: #191919;
-    border-radius: 3px;
-    cursor: pointer;
-    margin: 8px;
-    padding: 8px;
+  text-align: center;
+  background-color: #191919;
+  border-radius: 3px;
+  cursor: pointer;
+  margin: 8px;
+  padding: 8px;
 }
 
-    .new:hover {
-        background-color: var(--hoover-color);
-    }
+.new:hover {
+  background-color: var(--hoover-color);
+}
 
 .composerAction {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36%;
-    height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36%;
+  height: 100%;
 }
 
-    .composerAction > span {
-        margin: 2px 2px;
-        padding: 0px 10px;
-        border: 1px solid #444;
-        border-radius: 5px;
-        cursor: pointer;
-        user-select: none;
-        font-size: 15px;
-        margin-top: 14.5px !important;
-        padding-top: 4px !important;
-        transform: translate(109%, 10%);
-        transition: width 0.5s, height 0.5s, ease-in 0.5s;
-    }
+.composerAction > span {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 15px;
+  margin-top: 14.5px !important;
+  padding-top: 4px !important;
+  transform: translate(109%, 10%);
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+}
 
-        .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;
-        }
+.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;
+}
diff --git a/src/components/dbSelector.module.css b/src/components/dbSelector.module.css
index bbdd1e3..16952f7 100644
--- a/src/components/dbSelector.module.css
+++ b/src/components/dbSelector.module.css
@@ -1,33 +1,33 @@
 .container {
-    display: flex;
-    flex-flow: column;
-    margin-top: 8px;
-    margin-bottom: 0px;
-    margin-right: 22%;
-    margin-left: 22%;
-    padding: 5px;
+  display: flex;
+  flex-flow: column;
+  margin-top: 8px;
+  margin-bottom: 0px;
+  margin-right: 22%;
+  margin-left: 22%;
+  padding: 5px;
 }
 
 .listItem {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin: 3px;
-    cursor: pointer;
-    color: #a1a1a1;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin: 3px;
+  cursor: pointer;
+  color: #a1a1a1;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
-    .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);
-    }
+.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;
-    color: gainsboro;
+  text-align: center;
+  color: gainsboro;
 }
diff --git a/src/components/modal.module.css b/src/components/modal.module.css
index bee089d..99f68fc 100644
--- a/src/components/modal.module.css
+++ b/src/components/modal.module.css
@@ -1,48 +1,48 @@
 .modal {
-    z-index: 99;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .modalContent {
-    display: flex;
-    align-items: stretch;
-    max-height: 80%;
-    width: 50%;
-    max-width: 52%;
-    width: auto;
-    position: fixed;
-    background: var(--background-color);
-    height: auto;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 8px;
-    padding-top: 38px;
-    padding-bottom: 25px;
-    padding-right: 14px;
-    padding-left: 16px;
-    cursor: default;
+  display: flex;
+  align-items: stretch;
+  max-height: 80%;
+  width: 50%;
+  max-width: 52%;
+  width: auto;
+  position: fixed;
+  background: var(--background-color);
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+  padding-top: 38px;
+  padding-bottom: 25px;
+  padding-right: 14px;
+  padding-left: 16px;
+  cursor: default;
 }
 
 .close {
-    cursor: pointer;
-    font-size: 16.5px;
-    position: fixed;
-    top: 5px;
-    right: 10px;
-    margin-bottom: 10px;
-    text-align: right;
-    display: inline;
+  cursor: pointer;
+  font-size: 16.5px;
+  position: fixed;
+  top: 5px;
+  right: 10px;
+  margin-bottom: 10px;
+  text-align: right;
+  display: inline;
 }
 
 .children {
-    max-height: 100%;
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: auto;
+  max-height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
 }
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index e0108e8..18055a3 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -38,9 +38,9 @@
 }
 
 .user {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
 }
 
 .newsRoot {
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
index 1d29034..15407fc 100644
--- a/src/components/reactButton.module.css
+++ b/src/components/reactButton.module.css
@@ -42,8 +42,8 @@
 }
 
 .reacted:hover {
-   background-color: #96810b !important;
-   color: #42423e !important;
+  background-color: #96810b !important;
+  color: #42423e !important;
 }
 
 .reactContainer {
@@ -53,4 +53,4 @@
 .react_bttn {
   font-size: 15px;
   padding-top: 3px !important;
-}
\ No newline at end of file
+}
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 7b4e480..5eb2e86 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -1,379 +1,379 @@
 :root {
-    --text-color: #f2cb05;
-    --primary-color: #f2cb05;
-    --bright-color: #f2f2f2;
-    --background-color: #222426;
-    --hoover-color: #393939;
+  --text-color: #f2cb05;
+  --primary-color: #f2cb05;
+  --bright-color: #f2f2f2;
+  --background-color: #222426;
+  --hoover-color: #393939;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
 
 body {
-    font-family: 'Kameron', serif;
-    font-family: 'Overpass Mono', monospace;
-    color: #999999;
+  font-family: 'Kameron', serif;
+  font-family: 'Overpass Mono', monospace;
+  color: #999999;
 }
 
 li {
-    padding: 2px 0px;
+  padding: 2px 0px;
 }
 
 a {
-    color: white;
+  color: white;
 }
 
-    a:hover {
-        color: #c1c1c1;
-    }
+a:hover {
+  color: #c1c1c1;
+}
 
 textarea {
-    color: var(--text-color);
-    background-color: var(--background-color);
-    box-sizing: border-box;
-    height: 120px;
-    width: 100%;
-    border: 1px solid #666;
-    border-radius: 3px;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  box-sizing: border-box;
+  height: 120px;
+  width: 100%;
+  border: 1px solid #666;
+  border-radius: 3px;
 }
 
 input {
-    color: var(--text-color);
-    background-color: var(--background-color);
-    border: 1px solid #444;
-    width: 100%;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px solid #444;
+  width: 100%;
 }
 
 .link {
-    margin: 20px;
-    font-size: 20px;
+  margin: 20px;
+  font-size: 20px;
 }
 
 .sidebarLink {
-    color: var(--text-color);
-    text-decoration: none;
+  color: var(--text-color);
+  text-decoration: none;
 }
 
 .sidebar {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    width: 200px;
-    background-color: #222426;
-    position: fixed;
-    height: 100%;
-    overflow: auto;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  width: 200px;
+  background-color: #222426;
+  position: fixed;
+  height: 100%;
+  overflow: auto;
 }
 
 .content {
-    margin-left: 200px;
-    padding: 1px 15px;
+  margin-left: 200px;
+  padding: 1px 15px;
 }
 
 .sidebarLinks a {
-    display: block;
-    text-align: center;
-    color: black;
-    font-size: 108%;
-    padding: 14px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    text-decoration: none;
-    color: var(--bright-color);
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  display: block;
+  text-align: center;
+  color: black;
+  font-size: 108%;
+  padding: 14px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: var(--bright-color);
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
-    .sidebarLinks a:hover {
-        transition: width 0.5s, height 0.5s, ease-out 0.5s;
-    }
+.sidebarLinks a:hover {
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+}
 
-    .sidebarLinks a.active {
-        border: 0.5px solid var(--text-color);
-        color: white;
-        text-shadow: 2px 2px 8px black;
-        font-weight: bold;
-    }
+.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) {
-        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;
-    }
+.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;
-    background-color: var(--bright-color);
-    margin: 0px 0;
-    display: none;
-    width: 30px;
+  height: 5px;
+  background-color: var(--bright-color);
+  margin: 0px 0;
+  display: none;
+  width: 30px;
 }
 
 .sidebarheader {
-    font-size: 40px;
-    color: var(--bright-color);
-    display: flex;
-    text-align: center;
+  font-size: 40px;
+  color: var(--bright-color);
+  display: flex;
+  text-align: center;
 }
 
 .headercontainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 17px;
+  padding-right: 2px;
+  padding-left: 2px;
+}
+
+@media screen and (max-width: 700px) {
+  .sidebar {
+    width: 100%;
+    height: auto;
     position: relative;
-    overflow: hidden;
-    padding-top: 15px;
-    padding-bottom: 17px;
-    padding-right: 2px;
-    padding-left: 2px;
+  }
+
+  .sidebar a {
+    float: left;
+  }
+
+  div.content {
+    margin-left: 0;
+  }
 }
 
 @media screen and (max-width: 700px) {
-    .sidebar {
-        width: 100%;
-        height: auto;
-        position: relative;
-    }
+  .menuicon div {
+    display: block;
+    margin: 6px 0;
+  }
 
-        .sidebar a {
-            float: left;
-        }
+  .sidebar a {
+    text-align: center;
+    float: none;
+  }
 
-    div.content {
-        margin-left: 0;
-    }
-}
+  .menuicon {
+    display: inline;
+  }
 
-@media screen and (max-width: 700px) {
-    .menuicon div {
-        display: block;
-        margin: 6px 0;
-    }
+  .sidebaritemsconainer {
+    display: inline;
+  }
 
-    .sidebar a {
-        text-align: center;
-        float: none;
-    }
+  .sidebarheader {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    padding-top: 20px;
+    transform: translateX(-50%) translateY(-50%);
+  }
 
-    .menuicon {
-        display: inline;
-    }
+  .codecontainer {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
 
-    .sidebaritemsconainer {
-        display: inline;
-    }
+  .sitedescription {
+    width: 100%;
+    margin: 0 auto;
+  }
 
-    .sidebarheader {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        padding-top: 20px;
-        transform: translateX(-50%) translateY(-50%);
-    }
+  .rtfmImage {
+    display: flex;
+    justify-content: center;
+    border: 2px solid white;
+    width: 100%;
+  }
 
-    .codecontainer {
-        margin-left: 0px;
-        margin-right: 0px;
-    }
-
-    .sitedescription {
-        width: 100%;
-        margin: 0 auto;
-    }
-
-    .rtfmImage {
-        display: flex;
-        justify-content: center;
-        border: 2px solid white;
-        width: 100%;
-    }
-
-    .manualUsage {
-        display: flex;
-        flex-direction: column;
-    }
+  .manualUsage {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .endofpage {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
 }
 
 .questionContainer {
-    margin: 10px;
+  margin: 10px;
 }
 
-    .questionContainer:hover {
-        background-color: var(--hoover-color);
-    }
+.questionContainer:hover {
+  background-color: var(--hoover-color);
+}
 
 .question {
-    word-wrap: break-word;
-    font-weight: bold;
-    font-size: 17px;
-    color: #ffffff;
+  word-wrap: break-word;
+  font-weight: bold;
+  font-size: 17px;
+  color: #ffffff;
 }
 
 .answer {
-    word-wrap: break-word;
-    font-size: 15px;
+  word-wrap: break-word;
+  font-size: 15px;
 }
 
 .data {
-    word-wrap: break-word;
-    font-size: 13px;
-    color: #a1a1a1;
+  word-wrap: break-word;
+  font-size: 13px;
+  color: #a1a1a1;
 }
 
 .loadingindicator {
-    text-align: center;
-    vertical-align: middle;
-    color: #fff;
-    font-size: 30px;
+  text-align: center;
+  vertical-align: middle;
+  color: #fff;
+  font-size: 30px;
 }
 
 .link {
-    margin: 10px;
+  margin: 10px;
 }
 
 .subjectSelector {
-    overflow: scroll;
-    height: 350px;
-    margin: 10px;
+  overflow: scroll;
+  height: 350px;
+  margin: 10px;
 }
 
 .subjItem {
-    font-size: 18px;
-    padding: 3px;
-    cursor: pointer;
-    float: 1;
-    display: flex;
-    justify-content: space-between;
+  font-size: 18px;
+  padding: 3px;
+  cursor: pointer;
+  float: 1;
+  display: flex;
+  justify-content: space-between;
 }
 
 .activeSubjItem {
-    background-color: var(--text-color);
-    color: black;
+  background-color: var(--text-color);
+  color: black;
 }
 
 .subjItem:hover:not(.activeSubjItem) {
-    background-color: #555;
-    color: white;
+  background-color: #555;
+  color: white;
 }
 
 .rtfmImage {
-    justify-content: center;
-    margin: 0px 10px;
+  justify-content: center;
+  margin: 0px 10px;
 }
 
 .warning {
-    color: red;
-    font-weight: 100;
-    font-size: 17.5px;
+  color: red;
+  font-weight: 100;
+  font-size: 17.5px;
 }
 
 #manualWarn {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .manual_img {
-    padding: 20px 2px;
+  padding: 20px 2px;
 }
 
 .subtitle {
-    color: var(--text-color);
-    font-size: 23px;
-    text-align: center;
-    font-weight: 100;
-    margin: 0px;
-    padding-top: 8px;
+  color: var(--text-color);
+  font-size: 23px;
+  text-align: center;
+  font-weight: 100;
+  margin: 0px;
+  padding-top: 8px;
 }
 
 .pageHeader {
-    background-color: var(--text-color);
-    height: 45px;
-    max-width: 100%;
-    color: black;
-    margin: 5px 0px 0px 0px;
+  background-color: var(--text-color);
+  height: 45px;
+  max-width: 100%;
+  color: black;
+  margin: 5px 0px 0px 0px;
 }
 
-    .pageHeader h1 {
-        padding-top: 6px;
-        letter-spacing: 7px;
-        text-align: center;
-        margin: 0px;
-    }
+.pageHeader h1 {
+  padding-top: 6px;
+  letter-spacing: 7px;
+  text-align: center;
+  margin: 0px;
+}
 
 .manualUsage {
-    margin-top: 5px;
-    display: flex;
+  margin-top: 5px;
+  display: flex;
 }
 
 .manualBody {
-    text-align: justify;
+  text-align: justify;
 }
 
 select {
-    cursor: pointer;
-    width: 100%;
-    max-width: 100%;
-    height: 30px;
+  cursor: pointer;
+  width: 100%;
+  max-width: 100%;
+  height: 30px;
 }
 
-    select:hover {
-        border: 1px solid #F2CB05;
-    }
+select:hover {
+  border: 1px solid #f2cb05;
+}
 
 .userStatus {
-    display: flex;
-    margin-top: auto;
-    margin-bottom: 20px;
-    background-color: #373737;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  margin-top: auto;
+  margin-bottom: 20px;
+  background-color: #373737;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .msgs {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .logout {
-    padding: 6px;
-    margin-right: 7px;
-    cursor: pointer;
-    font-size: 15.5px;
+  padding: 6px;
+  margin-right: 7px;
+  cursor: pointer;
+  font-size: 15.5px;
 }
 
-    .logout:hover {
-        color: #fff;
-    }
+.logout:hover {
+  color: #fff;
+}
 
 .msgs :first-child {
-    font-size: 27px;
-    margin-left: 4px;
+  font-size: 27px;
+  margin-left: 4px;
 }
 
 .msgs > div {
-    padding: 2px 6px;
-    font-size: 13.5px;
+  padding: 2px 6px;
+  font-size: 13.5px;
 }
 
 .actions {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
-    .actions > span {
-        margin: 2px 2px;
-        padding: 0px 10px;
-        border: 1px solid #444;
-        border-radius: 6px;
-        cursor: pointer;
-        user-select: none;
-    }
+.actions > span {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
 
-        .actions > span:hover {
-            background-color: var(--hoover-color);
-        }
+.actions > span:hover {
+  background-color: var(--hoover-color);
+}
diff --git a/src/pages/manual.js b/src/pages/manual.js
index 8607f05..a8ca062 100644
--- a/src/pages/manual.js
+++ b/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>
diff --git a/src/pages/pwRequest.js b/src/pages/pwRequest.js
index da24f5a..82b4744 100644
--- a/src/pages/pwRequest.js
+++ b/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, 
-          hogy új felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat pótold, 
-          amennyiben még be vagy jelentkezve a régivel. (Konkrét elfelejtett jelszó funkció még nincsen)<br />
-          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>
+          <p className={styles.descrip}>
+            Ezen az oldalon lehetőséged van lekérni jelszavakat, hogy új
+            felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat
+            pótold, amennyiben még be vagy jelentkezve a régivel. (Konkrét
+            elfelejtett jelszó funkció még nincsen)
+            <br />
+            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 />
-          Egy felhasználó egyszerre 
+          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 
-          felhasználó létrehozva:
-          <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>-kor.<br /><br />
+          <span>{' ' + remaining}</span> db jelszót kérhetsz le. <br />
+          <br /> A jelenleg bejelentkezett felhasználó létrehozva:
+          <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>
+          -kor.
+          <br />
+          <br />
         </div>
         <div className={styles.buttonContainer}>
           <div onClick={handleSubmit} className={styles.button}>
diff --git a/src/pages/pwRequest.module.css b/src/pages/pwRequest.module.css
index d380d73..fd2a10a 100644
--- a/src/pages/pwRequest.module.css
+++ b/src/pages/pwRequest.module.css
@@ -6,7 +6,7 @@
 }
 
 .button {
-  background-color: #F2CB05;
+  background-color: #f2cb05;
   border: none;
   color: black;
   padding: 15px 30px;