Finishing up style fixes across pages

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}>
+      <center>
         <textarea
+          placeholder={'Ide kezdhetsz el írni...'}
           onChange={(event) => setFeedback(event.target.value)}
           value={feedback}
           className={styles.feedback}
         />
-      <div className={'buttonContainer'}>
+      </center>
+      <center>
+        <div className={`${styles.send} buttonContainer`}>
           <div
             onClick={() => {
               if (feedback) {
                 submitFeedback(feedback, from).then(() => {
-                alert('Elküldve')
+                  alert('Üzenet elküldve!')
                   setFeedback('')
                 })
               } else {
-              alert('Adj meg valami üzenetet ...')
+                alert('Üresen hagytad az üzenet szövegének helyét!')
               }
             }}
           >
             Küldés
           </div>
         </div>
+      </center>
     </div>
   )
 }

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;
+  display: block;
-  align-items: center;
 }

src/components/layout.js

@@ -20,10 +20,11 @@ const renderSnow = () => {
 function Donate() {
   return (
     <div>
-      <div>
+      <div className={styles.modalHead}>Donate</div>
-        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+      <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(() => {
+  useEffect(
+    () => {
       setDonateShowing(!!router.query.donate)
-  }, [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%' }}
+                  style={{
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                    maxWidth: '100%',
+                    border: 'none',
+                    margin: '1px',
+                  }}
+                  src={`${
+                    constants.siteUrl
+                  }img/frylabs-logo_small_transparent.png`}
                   alt="FryLabs"
                 />
               </a>

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;

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;

src/pages/contact.js

@@ -40,17 +40,23 @@ export default function Contact() {
       <br />
       <Sleep />
       <br />
+      <div>
+        <div className={'subtitle'}>Üzenet küldése</div>
         <div className={styles.text}>
-        <div>Üzenet küldése</div>
+          Weboldalon keresztüli üzenetküldés az adminnak (feedback)
-        <div>Weboldalon keresztül üzenet küldése adminnak</div>
+        </div>
       </div>
       <FeedbackArea from={'contact'} />
       <div className={styles.container}>
         {contacts ? (
           <>
+            <div>
+              <div className={'subtitle'}>Alternatív módok</div>
               <div className={styles.text}>
-              <div>Alternatív módok</div>
+                Az alábbi módokat is nyugodtan használhatod, a nevedet, e-mail
-              <div>Valami duma, hogy nem adom ki az adatokat</div>
+                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) => {

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;
+}

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(() => {
+  useEffect(
+    () => {
       if (router.query.tab) {
         setCurrPage(pages[router.query.tab])
       }
-  }, [router.query.tab])
+    },
+    [router.query.tab]
+  )
 
   return (
     <div>

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>
+      <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 kidob a rendszer. A jelszavakról bővebben
+              jelszót, mert egy idő után -biztonsági okokból- kidob a rendszer,
-            a jelszavakról bővebben a{' '}
+              ha ugyan az a felhasználó több helyen is belépve marad. A
-            <Link href="/faq">
+              jelszavakról bővebben a{' '}
+              <Link href="/faq?tab=pw">
                 <a>GYIK</a>
-            </Link>
+              </Link>{' '}
-            -ben olvashatsz.
+              vonatkozó részében olvashatsz.
             </p>
           </div>
           <div className={styles.text}>
-          Jelszó kérési lehetőségeit minden
+            Minden <span>{' ' + daysAfterUserGetsPWs + ' '}</span> napnál
-          <span>{' ' + addPWPerDay + '. '}</span>
+            régebbi felhasználó generálhat magának{' '}
-          nap a következő logika alapján növekednek:
+            <span>{' ' + maxPWCount + 'db '}</span> jelszót. Miután lekértél{' '}
-          <ul>
+            <span>{' ' + maxPWCount + 'db'}</span>-ot, a lehetőségeid nem
-            <li>
+            fogytak el, ismét lesz módod további{' '}
-              Ha a felhasználói fiókod fiatalabb mint
+            <span>{' ' + maxPWCount + 'db'}</span>-ot kérni, összességében
-              <span>{' ' + daysAfterUserGetsPWs + '. '}</span>
+            korlátlan mennyiségben. Az egyszerre rendelkezésre álló lehetőségeid
-              nap, akkor nem kapsz új lehetőséget.
+            számát lentebb látod, ez maximum egyszerre{' '}
-            </li>
+            <span>{' ' + maxPWCount + 'db '}</span> lehet. Ezt követően{' '}
-            <li>
+            <span>{' ' + addPWPerDay + ' '}</span>
-              Ha több mint
+            naponta kapsz további <span>{' ' + addPWCount + ' '}</span> új
-              <span>{' ' + maxPWCount + ' '}</span>
+            lehetőséget generálásra, amíg a lehetőségeid száma ismét el nem éri
-              jelszó kérési lehetőséged van, akkor nem nő ezek száma.
+            a <span>{' ' + maxPWCount + 'db'}</span>-ot. Eddig
-            </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
+            jelszót kértél le, vagyis jelen pillanatban
-          <span>{' ' + (availablePWS - requestedPWS) + ' '}</span>
+            <span>{' ' + (availablePWS - requestedPWS) + 'db '}</span>
-          db jelszót kérhetsz.
+            jelszót generálhatsz még.
-          <br />A jelenleg bejelentkezett felhasználó (
+            <br />
-          <span>{' #' + userId + ' '}</span>)<span>{' ' + dayDiff + ' '}</span>
+            <br />A jelenleg bejelentkezett felhasználó{' '}
+            <span>{' ' + dayDiff + ' '}</span>
             napos,{' '}
             <span>
               {userCreated ? new Date(userCreated).toLocaleString() : '...'}
             </span>
             -kor lett létrehozva.
             <br />
-          Az oldalnak eddig
+            Az oldalnak jelenleg
             <span>{' ' + userCount + ' '}</span>
-          felhasználója van
+            felhasználója van.
           </div>
-        <center>
           <div className={`buttonContainer ${styles.pwButton}`}>
             <div
               onClick={() => {
@@ -156,7 +147,7 @@ export default function PwRequest({ globalData }) {
               Jelszó kérése
             </div>
           </div>
-        </center>
+
           {result ? (
             <div className={styles.pwContainer}>
               {result.map((res, i) => {
@@ -169,6 +160,7 @@ export default function PwRequest({ globalData }) {
             </div>
           ) : null}
         </div>
+      </center>
     </div>
   )
 }

src/pages/ranklist.js

@@ -114,9 +114,12 @@ export default function RankList({ globalData }) {
     getList()
   }, [])
 
-  useEffect(() => {
+  useEffect(
+    () => {
       getList()
-  }, [since])
+    },
+    [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"