From b88a4d9c9e8ab4ffca245e61d9a132051dace602 Mon Sep 17 00:00:00 2001
From: ndaniel1102 <ndani2276@gmail.com>
Date: Mon, 19 Apr 2021 22:33:24 +0200
Subject: [PATCH] Finishing up style fixes across pages

---
 src/components/feedbackArea.js         |  49 +++++-----
 src/components/feedbackArea.module.css |  15 ++-
 src/components/layout.js               |  42 ++++++--
 src/components/layout.module.css       |  10 ++
 src/defaultStyles.css                  |  20 ++++
 src/pages/contact.js                   |  18 ++--
 src/pages/contact.module.css           |  14 ++-
 src/pages/faq.js                       |  16 +++-
 src/pages/pwRequest.js                 | 128 ++++++++++++-------------
 src/pages/ranklist.js                  |  11 ++-
 10 files changed, 200 insertions(+), 123 deletions(-)

diff --git a/src/components/feedbackArea.js b/src/components/feedbackArea.js
index 69e0a0c..32cc696 100644
--- a/src/components/feedbackArea.js
+++ b/src/components/feedbackArea.js
@@ -24,11 +24,11 @@ function submitFeedback(msg, from) {
         if (resp.success) {
           resolve()
         } else {
-          alert('Hiba küldés közben')
+          alert('Hiba küldés közben!')
         }
       })
       .catch((err) => {
-        alert('Hiba küldés közben')
+        alert('Hiba küldés közben!')
         console.error(err)
       })
   })
@@ -39,27 +39,32 @@ export default function FeedbackArea({ from }) {
 
   return (
     <div className={styles.inputArea}>
-      <textarea
-        onChange={(event) => setFeedback(event.target.value)}
-        value={feedback}
-        className={styles.feedback}
-      />
-      <div className={'buttonContainer'}>
-        <div
-          onClick={() => {
-            if (feedback) {
-              submitFeedback(feedback, from).then(() => {
-                alert('Elküldve')
-                setFeedback('')
-              })
-            } else {
-              alert('Adj meg valami üzenetet ...')
-            }
-          }}
-        >
-          Küldés
+      <center>
+        <textarea
+          placeholder={'Ide kezdhetsz el írni...'}
+          onChange={(event) => setFeedback(event.target.value)}
+          value={feedback}
+          className={styles.feedback}
+        />
+      </center>
+      <center>
+        <div className={`${styles.send} buttonContainer`}>
+          <div
+            onClick={() => {
+              if (feedback) {
+                submitFeedback(feedback, from).then(() => {
+                  alert('Üzenet elküldve!')
+                  setFeedback('')
+                })
+              } else {
+                alert('Üresen hagytad az üzenet szövegének helyét!')
+              }
+            }}
+          >
+            Küldés
+          </div>
         </div>
-      </div>
+      </center>
     </div>
   )
 }
diff --git a/src/components/feedbackArea.module.css b/src/components/feedbackArea.module.css
index 84589bc..16f2645 100644
--- a/src/components/feedbackArea.module.css
+++ b/src/components/feedbackArea.module.css
@@ -2,12 +2,19 @@
   color: var(--text-color);
   background-color: var(--background-color);
   font-size: 14px;
-  width: 100%;
+  width: 60% !important;
   box-sizing: border-box;
-  height: 60px;
+  height: 100px;
+  resize: none;
+  margin-top: 15px;
+  padding: 5px;
+}
+
+.send {
+  width: 20%;
+  margin-bottom: 60px;
 }
 
 .inputArea {
-  display: flex;
-  align-items: center;
+  display: block;
 }
diff --git a/src/components/layout.js b/src/components/layout.js
index 4cf0ea5..641f033 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -20,10 +20,11 @@ const renderSnow = () => {
 function Donate() {
   return (
     <div>
-      <div>
-        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+      <div className={styles.modalHead}>Donate</div>
+      <div style={{ textAlign: 'justify', margin: '8px' }}>
+        Paypalen és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
         változtatni. Ha név nélkül szeretnél adakozni, akkor írd át egy
-        nickname-ra. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
+        nickname-re. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
         látja 3. személy.
       </div>
       <div className={styles.donateLogoContainer}>
@@ -32,10 +33,22 @@ function Donate() {
           target="_blank"
           rel="noreferrer"
         >
-          <img src={`${constants.siteUrl}img/patreon-logo.png`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            src={`${constants.siteUrl}img/patreon-logo.png`}
+          />
         </a>
         <a href={`${constants.siteUrl}donate`} target="_blank" rel="noreferrer">
-          <img src={`${constants.siteUrl}img/paypal-logo.png`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            src={`${constants.siteUrl}img/paypal-logo.png`}
+          />
         </a>
       </div>
     </div>
@@ -102,9 +115,12 @@ export default function Layout({
   const userId = globalData.userId
   const userSpecificMotd = globalData.userSpecificMotd
 
-  useEffect(() => {
-    setDonateShowing(!!router.query.donate)
-  }, [router.query.donate])
+  useEffect(
+    () => {
+      setDonateShowing(!!router.query.donate)
+    },
+    [router.query.donate]
+  )
 
   let href = router.route
   if (href === '/' || href === '') {
@@ -160,8 +176,14 @@ export default function Layout({
             <Link href="/">
               <a>
                 <img
-                  style={{ maxWidth: '100%' }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  style={{
+                    maxWidth: '100%',
+                    border: 'none',
+                    margin: '1px',
+                  }}
+                  src={`${
+                    constants.siteUrl
+                  }img/frylabs-logo_small_transparent.png`}
                   alt="FryLabs"
                 />
               </a>
diff --git a/src/components/layout.module.css b/src/components/layout.module.css
index c87400b..9df817b 100644
--- a/src/components/layout.module.css
+++ b/src/components/layout.module.css
@@ -1,3 +1,13 @@
+.modalHead {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 700;
+  padding-top: 0px;
+  margin-top: 0px;
+  padding-bottom: 20px;
+  letter-spacing: 3px;
+}
+
 .donateLogoContainer {
   display: flex;
   justify-content: center;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 159de34..9e702d5 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -16,6 +16,11 @@ body {
   cursor: default;
 }
 
+img {
+  margin: 10px;
+  border: 2px solid white;
+}
+
 li {
   padding: 2px 0px;
 }
@@ -412,6 +417,21 @@ select:hover {
   border: 1px solid #f2cb05;
 }
 
+.checkbContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 0px 0px 0px;
+}
+
+.checkbContainer > input {
+  width: 5%;
+  background-color: #9c9c98;
+  color: azure;
+  font-family: inherit;
+  margin-bottom: 5px;
+}
+
 .selectContainer {
   display: flex;
   justify-content: center;
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 8ef24ff..bfaae40 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -40,17 +40,23 @@ export default function Contact() {
       <br />
       <Sleep />
       <br />
-      <div className={styles.text}>
-        <div>Üzenet küldése</div>
-        <div>Weboldalon keresztül üzenet küldése adminnak</div>
+      <div>
+        <div className={'subtitle'}>Üzenet küldése</div>
+        <div className={styles.text}>
+          Weboldalon keresztüli üzenetküldés az adminnak (feedback)
+        </div>
       </div>
       <FeedbackArea from={'contact'} />
       <div className={styles.container}>
         {contacts ? (
           <>
-            <div className={styles.text}>
-              <div>Alternatív módok</div>
-              <div>Valami duma, hogy nem adom ki az adatokat</div>
+            <div>
+              <div className={'subtitle'}>Alternatív módok</div>
+              <div className={styles.text}>
+                Az alábbi módokat is nyugodtan használhatod, a nevedet, e-mail
+                címedet, illetve semmilyen egyéb adatot nem adok ki harmadik fél
+                számára. (egyedül én fogom látni)
+              </div>
             </div>
             <div className={styles.contactsContainer}>
               {Object.keys(contacts).map((key) => {
diff --git a/src/pages/contact.module.css b/src/pages/contact.module.css
index adb867d..3a23637 100644
--- a/src/pages/contact.module.css
+++ b/src/pages/contact.module.css
@@ -11,6 +11,8 @@
 
 .contactsContainer > * {
   text-decoration: none;
+  color: gainsboro;
+  padding-top: 10px;
   display: flex;
 }
 
@@ -18,10 +20,6 @@
   padding: 5px;
 }
 
-.contactsContainer > *:hover {
-  background-color: var(--hoover-color);
-}
-
 .contactsContainer > * > *:nth-child(1) {
   flex: 1;
 }
@@ -34,9 +32,17 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+  text-align: center;
+  padding-top: 8px;
+  padding-right: 100px;
+  padding-left: 100px;
 }
 
 .text > div:nth-child(1) {
   font-size: 20px;
   color: var(--text-color);
 }
+
+.contactTable {
+  border-spacing: 15px;
+}
diff --git a/src/pages/faq.js b/src/pages/faq.js
index a206826..eb33285 100644
--- a/src/pages/faq.js
+++ b/src/pages/faq.js
@@ -103,6 +103,7 @@ function FAQSection() {
           </li>
         </ul>
       </div>
+      <hr />
     </>
   )
 }
@@ -178,6 +179,7 @@ function WebsiteSaveSection() {
         hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
         azt az oldalt amin hibával találkozol.
       </p>
+      <hr />
     </>
   )
 }
@@ -220,6 +222,7 @@ function ScriptReinstallSection() {
       </ul>
       Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
       felejtsd azt el)
+      <hr />
     </>
   )
 }
@@ -246,11 +249,14 @@ export default function FAQ({ router }) {
     }
   }
 
-  useEffect(() => {
-    if (router.query.tab) {
-      setCurrPage(pages[router.query.tab])
-    }
-  }, [router.query.tab])
+  useEffect(
+    () => {
+      if (router.query.tab) {
+        setCurrPage(pages[router.query.tab])
+      }
+    },
+    [router.query.tab]
+  )
 
   return (
     <div>
diff --git a/src/pages/pwRequest.js b/src/pages/pwRequest.js
index 5c83107..46d98bc 100644
--- a/src/pages/pwRequest.js
+++ b/src/pages/pwRequest.js
@@ -75,9 +75,6 @@ export default function PwRequest({ globalData }) {
   }, [])
 
   return (
-    // TODO: a generált jelszó modal-on való megjelenítésének kivitelezése.
-    /* TODO: <span>{' ' + createDate}</span>-kor. rész után az oldal összes jelenlegi 
-       felhasználójának darabszámának megjelenítése.*/
     <div>
       <Head>
         <title>Jelszó generálás - Qmining | Frylabs.net</title>
@@ -85,58 +82,52 @@ export default function PwRequest({ globalData }) {
       <div className={'pageHeader'}>
         <h1>Jelszó generálás</h1>
       </div>
-      <Sleep />
-      <div id="form">
-        <div className={styles.text}>
-          <p className={styles.descrip}>
-            Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
-            jelszót, mert egy idő után kidob a rendszer. A jelszavakról bővebben
-            a jelszavakról bővebben a{' '}
-            <Link href="/faq">
-              <a>GYIK</a>
-            </Link>
-            -ben olvashatsz.
-          </p>
-        </div>
-        <div className={styles.text}>
-          Jelszó kérési lehetőségeit minden
-          <span>{' ' + addPWPerDay + '. '}</span>
-          nap a következő logika alapján növekednek:
-          <ul>
-            <li>
-              Ha a felhasználói fiókod fiatalabb mint
-              <span>{' ' + daysAfterUserGetsPWs + '. '}</span>
-              nap, akkor nem kapsz új lehetőséget.
-            </li>
-            <li>
-              Ha több mint
-              <span>{' ' + maxPWCount + ' '}</span>
-              jelszó kérési lehetőséged van, akkor nem nő ezek száma.
-            </li>
-            <li>
-              Ha az előző kettő nem zárja ki, akkor jelszó kérési lehetőségeid
-              <span>{' ' + addPWCount + ' '}</span>
-              darabbal növekednek.
-            </li>
-          </ul>
-          Eddig
-          <span>{' ' + requestedPWS + ' '}</span>
-          jelszót kértél. Jelenleg
-          <span>{' ' + (availablePWS - requestedPWS) + ' '}</span>
-          db jelszót kérhetsz.
-          <br />A jelenleg bejelentkezett felhasználó (
-          <span>{' #' + userId + ' '}</span>)<span>{' ' + dayDiff + ' '}</span>
-          napos,{' '}
-          <span>
-            {userCreated ? new Date(userCreated).toLocaleString() : '...'}
-          </span>
-          -kor lett létrehozva.
-          <br />
-          Az oldalnak eddig
-          <span>{' ' + userCount + ' '}</span>
-          felhasználója van
-        </div>
-        <center>
+      <center>
+        <Sleep />
+        <div id="form">
+          <div className={styles.text}>
+            <p className={styles.descrip}>
+              Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
+              jelszót, mert egy idő után -biztonsági okokból- kidob a rendszer,
+              ha ugyan az a felhasználó több helyen is belépve marad. A
+              jelszavakról bővebben a{' '}
+              <Link href="/faq?tab=pw">
+                <a>GYIK</a>
+              </Link>{' '}
+              vonatkozó részében olvashatsz.
+            </p>
+          </div>
+          <div className={styles.text}>
+            Minden <span>{' ' + daysAfterUserGetsPWs + ' '}</span> napnál
+            régebbi felhasználó generálhat magának{' '}
+            <span>{' ' + maxPWCount + 'db '}</span> jelszót. Miután lekértél{' '}
+            <span>{' ' + maxPWCount + 'db'}</span>-ot, a lehetőségeid nem
+            fogytak el, ismét lesz módod további{' '}
+            <span>{' ' + maxPWCount + 'db'}</span>-ot kérni, összességében
+            korlátlan mennyiségben. Az egyszerre rendelkezésre álló lehetőségeid
+            számát lentebb látod, ez maximum egyszerre{' '}
+            <span>{' ' + maxPWCount + 'db '}</span> lehet. Ezt követően{' '}
+            <span>{' ' + addPWPerDay + ' '}</span>
+            naponta kapsz további <span>{' ' + addPWCount + ' '}</span> új
+            lehetőséget generálásra, amíg a lehetőségeid száma ismét el nem éri
+            a <span>{' ' + maxPWCount + 'db'}</span>-ot. Eddig
+            <span>{' ' + requestedPWS + ' '}</span>
+            jelszót kértél le, vagyis jelen pillanatban
+            <span>{' ' + (availablePWS - requestedPWS) + 'db '}</span>
+            jelszót generálhatsz még.
+            <br />
+            <br />A jelenleg bejelentkezett felhasználó{' '}
+            <span>{' ' + dayDiff + ' '}</span>
+            napos,{' '}
+            <span>
+              {userCreated ? new Date(userCreated).toLocaleString() : '...'}
+            </span>
+            -kor lett létrehozva.
+            <br />
+            Az oldalnak jelenleg
+            <span>{' ' + userCount + ' '}</span>
+            felhasználója van.
+          </div>
           <div className={`buttonContainer ${styles.pwButton}`}>
             <div
               onClick={() => {
@@ -156,19 +147,20 @@ export default function PwRequest({ globalData }) {
               Jelszó kérése
             </div>
           </div>
-        </center>
-        {result ? (
-          <div className={styles.pwContainer}>
-            {result.map((res, i) => {
-              return (
-                <div key={i} className={styles.pw}>
-                  {i + 1}.: {res}
-                </div>
-              )
-            })}
-          </div>
-        ) : null}
-      </div>
+
+          {result ? (
+            <div className={styles.pwContainer}>
+              {result.map((res, i) => {
+                return (
+                  <div key={i} className={styles.pw}>
+                    {i + 1}.: {res}
+                  </div>
+                )
+              })}
+            </div>
+          ) : null}
+        </div>
+      </center>
     </div>
   )
 }
diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index b78fca1..4c4e454 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -114,9 +114,12 @@ export default function RankList({ globalData }) {
     getList()
   }, [])
 
-  useEffect(() => {
-    getList()
-  }, [since])
+  useEffect(
+    () => {
+      getList()
+    },
+    [since]
+  )
 
   const list =
     ranklist &&
@@ -189,7 +192,7 @@ export default function RankList({ globalData }) {
               })}
             </select>
           </div>
-          <div className={'selectContainer'}>
+          <div className={'checkbContainer'}>
             <div>Saját hely mutatása felül:</div>
             <input
               type="checkbox"