Minor style fixes across pages

src/components/layout.js

@@ -51,7 +51,7 @@ function MessageButton({
         }}
         style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
         title={
-          userSpecificMotd && !userSpecificMotd.seen ? "You've got Mail!" : ''
+          userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : ''
         }
       >
         {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
@@ -130,8 +130,10 @@ export default function Layout({
               <a>
                 <img
                   style={{ maxWidth: '100%' }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  src={`${
-                  alt="Frylabs"
+                    constants.siteUrl
+                  }img/frylabs-logo_small_transparent.png`}
+                  alt="FryLabs"
                 />
               </a>
             </Link>
@@ -164,15 +166,18 @@ export default function Layout({
                 Donate
               </a>
             </div>
-            <div className="userStatus">
+            <div className={'userStatus'}>
               <MessageButton
                 userSpecificMotd={userSpecificMotd}
                 setShowMotdModal={setShowMotdModal}
                 refetchGlobalData={refetchGlobalData}
               />
-              <div title="User ID">UID: {userId || '...'}</div>
+              <div className={'uid'} title="User ID">
+                UID: {userId || '...'}
+              </div>
               <div
-                className="logout"
+                className={'logout'}
+                title="Kijelentkezés"
                 onClick={() => {
                   fetch(constants.apiUrl + 'logout', {
                     method: 'GET',

src/components/newsEntry.js

@@ -18,10 +18,14 @@ export default function NewsEntry({
 
   return (
     <div className={styles.newsRoot}>
-      <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
+      <div
+        className={`${styles.newsContainer} ${admin &&
+          styles.adminPost}  ${!admin && styles.userPost}  ${uid == user &&
+          styles.ownPost} ${uid == user && admin && styles.adminPost}`}
+      >
         <div className={styles.newsHeader}>
           <div className={styles.newsTitle}>{title}</div>
-          <div className={styles.user}>
+          <div className={styles.userinfo}>
             <div>User #{user}</div>
             <div className={styles.newsDate}> @ {date}</div>
           </div>

src/components/newsEntry.module.css

@@ -30,11 +30,18 @@
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
-
 .adminPost {
   border-left: 4px solid var(--text-color);
 }
 
+.userPost {
+  border-left: 4px solid azure;
+}
+
+.ownPost {
+  border-left: 4px dotted azure;
+}
+
 .newsContainer img {
   max-width: 100%;
   min-width: 200px;
@@ -47,7 +54,7 @@
   align-items: center;
 }
 
-.user {
+.userinfo {
   display: flex;
   align-items: center;
   margin-bottom: 12px;

src/defaultStyles.css

@@ -12,6 +12,7 @@ body {
   font-family: 'Kameron', serif;
   font-family: 'Overpass Mono', monospace;
   color: #999999;
+  cursor: default;
 }
 
 li {
@@ -304,7 +305,7 @@ input:focus {
   margin: 5px 0px 0px 0px;
 }
 
-.pageHeader h1 {
+.pageHeader > h1 {
   padding-top: 6px;
   letter-spacing: 7px;
   text-align: center;
@@ -320,29 +321,23 @@ input:focus {
   text-align: justify;
 }
 
-select {
-  cursor: pointer;
-  width: 100%;
-  max-width: 100%;
-  height: 30px;
-}
-
-select:hover {
-  border: 1px solid #f2cb05;
-}
-
 .userStatus {
   display: flex;
   margin-top: auto;
   margin-bottom: 20px;
   background-color: #373737;
   align-items: center;
+  text-align: center;
   justify-content: space-between;
 }
 
 .msgs {
-  display: flex;
+    font-size: 15px;
-  align-items: center;
+}
+
+.uid {
+  font-size: 14px;
+  margin-right: 10px;
 }
 
 .logout {
@@ -388,10 +383,8 @@ select:hover {
   display: flex;
   align-content: center;
   justify-content: center;
-
   margin: 10px 0px;
   height: 50px;
-  display: flex;
 }
 
 .buttonContainer > * {
@@ -399,18 +392,16 @@ select:hover {
   align-items: center;
   justify-content: center;
   flex: 1;
-
+  background-color: var(--hoover-color);
-  background-color: #f2cb05;
   border: none;
-  color: black;
+  color: var(--text-color);
   padding: 5px 10px;
   font-weight: bold;
   font-size: 15px;
-  margin: 8px 2px 2px 2px;
+  margin: 8px 5px 2px 5px;
   cursor: pointer;
   text-shadow: 1px 1px 8px black;
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
-
   user-select: none;
   cursor: pointer;
   text-align: center;
@@ -424,9 +415,47 @@ select:hover {
 .buttonContainer > *:hover {
   text-shadow: 2px 2px 8px black;
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
-  background-color: #a38c1a;
+  background-color: var(--text-color);
+  color: black;
 }
 
 .buttonContainer > .activeButton {
-  color: var(--text-color);
+  background-color: var(--text-color);
+  color: black;
+}
+
+select {
+  cursor: pointer;
+  width: 100%;
+  max-width: 100%;
+  height: 30px;
+}
+
+select:hover {
+  border: 1px solid #f2cb05;
+}
+
+.selectContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.selectContainer > select {
+  width: 21%;
+  border-radius: 5px;
+  border: 1.5px solid white;
+  background-color: #9c9c98;
+  color: azure;
+  font-family: inherit;
+  margin: 6px 0px;
+}
+
+.selectContainer > select:hover, .selectContainer > select:active {
+  border: 2px solid var(--text-color);
+}
+
+.selectContainer > div {
+  padding: 0px 5px;
+  margin-right: 8px;
 }

src/pages/allQuestions.js

@@ -100,8 +100,12 @@ export default function AllQuestions({ router }) {
     if (dbs) {
       return (
         <>
+          <div className={'pageHeader'}>
+            <h1>Kérdések és tárgyak</h1>
+          </div>
+          <br />
+          <div className={`selectContainer ${styles.content}`}>
             <select
-            className={styles.select}
               defaultValue={-1}
               onChange={(event) => {
                 const key = event.target.value
@@ -123,7 +127,7 @@ export default function AllQuestions({ router }) {
               }}
             >
               <option disabled value={-1}>
-              {' -- Válassz egy kérdés adatbázist -- '}
+                {' - Válassz egy adatbázist! - '}
               </option>
               {dbs.map((db, i) => {
                 return (
@@ -136,6 +140,7 @@ export default function AllQuestions({ router }) {
                 {'All'}
               </option>
             </select>
+          </div>
         </>
       )
     } else {
@@ -152,9 +157,6 @@ export default function AllQuestions({ router }) {
 
     return (
       <div>
-        <Head>
-          <title>Tárgyak - Qmining | Frylabs.net</title>
-        </Head>
         {data ? (
           <>
             <div className={styles.searchContainer}>
@@ -200,9 +202,6 @@ export default function AllQuestions({ router }) {
   const renderQuestionBrowser = () => {
     return (
       <div>
-        <Head>
-          <title>Qmining - Kérdés keresés | Frylabs.net</title>
-        </Head>
         {data ? (
           <>
             <div className={styles.searchContainer}>
@@ -242,19 +241,22 @@ export default function AllQuestions({ router }) {
 
   return (
     <div>
+      <Head>
+        <title>Kérdések és tárgyak - Qmining | Frylabs.net</title>
+      </Head>
       {dbs ? <>{renderDbSelector()}</> : <LoadingIndicator />}
       {dbs && data ? (
         <>
           {`${questionCount} kérdés, ${subjectCount} tárgy`}
           <div className={'buttonContainer'}>
             <div
-              className={!subjectsShowing ? styles.activeTypeSelector : ''}
+              className={!subjectsShowing ? 'activeButton' : ''}
               onClick={() => setSubjectsShowing(false)}
             >
               Kérdések
             </div>
             <div
-              className={subjectsShowing ? styles.activeTypeSelector : ''}
+              className={subjectsShowing ? 'activeButton' : ''}
               onClick={() => setSubjectsShowing(true)}
             >
               Tárgyak

src/pages/allQuestions.module.css

@@ -1,3 +1,7 @@
+.content {
+    padding-top: 50px;
+}
+
 .searchContainer {
   width: 100%;
   display: flex;

src/pages/contact.js

@@ -28,6 +28,11 @@ export default function Contact() {
       <Head>
         <title>Kapcsolat - Qmining | Frylabs.net</title>
       </Head>
+      <div className={'pageHeader'}>
+        <h1>Kapcsolat</h1>
+      </div>
+      <br />
+      <br />
       <FeedbackArea from={'contact'} />
       <div className={styles.contactsContainer}>
         <div>Itt vannak hogy hogy lehet kontaktolni</div>

src/pages/faq.js

@@ -251,6 +251,11 @@ export default function FAQ() {
       <Head>
         <title>GYIK - Qmining | Frylabs.net</title>
       </Head>
+      <div className={'pageHeader'}>
+        <h1>GYakran Ismételt Kérdések</h1>
+      </div>
+      <br />
+      <br />
       <div className={'buttonContainer'}>
         {Object.keys(pages).map((key) => {
           const page = pages[key]

src/pages/index.module.css

@@ -55,7 +55,7 @@
 }
 
 .question {
-  font-weight: 'bold';
+  font-weight: bold;
   font-size: 16px;
   color: #fff;
   margin: 0px 5px;

src/pages/pwRequest.js

@@ -112,29 +112,31 @@ export default function PwRequest() {
           <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
           napot kell várniuk, míg jelszó generálási lehetőséget kapnak.
           <br />
-          Egy felhasználó egyszerre
+          Egy felhasználó egyszerre, egymás után
-          <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 />
-          Egy felhasználó összesen
           <span>{' ' + maxPWCount + ' '}</span>
-          jelszót generálhat.
+          jelszót generálhat. Összességében korlátlan mennyiségben kérhetők le
+          jelszavak, de
+          <span>{' ' + maxPWCount + ' '}</span>db után el kell telnie{' '}
+          <span>{' ' + addPwPerDay + ' '}</span> napnak, hogy ismét jelszót
+          generálhass.
           <br />
           Ebből eddig
           <span>{' ' + requestedPWS + ' '}</span>
-          lehetőséget használtál fel, tehát még
+          lehetőséget használtál fel, tehát még{' '}
-          <span>{' ' + remaining}</span> db jelszót kérhetsz le. <br />
+          <span>{remaining - requestedPWS}</span> db jelszót kérhetsz le,
+          mielőtt elérnéd a <span>{' ' + maxPWCount + ' '}</span> darabos
+          kvótát.<br />
           <br /> A jelenleg bejelentkezett felhasználó létrehozva:
           <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>
           -kor.
           <br />
           <br />
         </div>
-        <div className={'buttonContainer'}>
+        <center>
+          <div className={`buttonContainer ${styles.pwButton}`}>
             <div onClick={handleSubmit}>Jelszó kérése</div>
           </div>
+        </center>
         {result ? (
           <div className={styles.pwContainer}>
             {result.map((r, i) => {

src/pages/pwRequest.module.css

@@ -33,3 +33,7 @@
 .text span {
   color: var(--text-color);
 }
+
+.pwButton {
+  width: 20% !important;
+}

src/pages/ranklist.js

@@ -133,7 +133,7 @@ export default function RankList() {
       <div className={styles.container}>
         <div>
           <center>
-            <div id="rankHeader" className={'pageHeader'}>
+            <div className={'pageHeader'}>
               <h1>Ranklista</h1>
             </div>
           </center>
@@ -147,7 +147,7 @@ export default function RankList() {
             </p>
           </div>
           <Sleep />
-          <div className={styles.selectContainer}>
+          <div className={'selectContainer'}>
             <div>Megjelenítés: </div>
             <select
               onChange={(e) => {
@@ -164,7 +164,7 @@ export default function RankList() {
               })}
             </select>
           </div>
-          <div className={styles.selectContainer}>
+          <div className={'selectContainer'}>
             <div>Rendezés: </div>
             <select
               value={key}

src/pages/ranklist.module.css

@@ -105,28 +105,3 @@
 .sumrow {
   color: white;
 }
-
-.selectContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.selectContainer > select {
-  width: 16.5%;
-  border-radius: 5px;
-  border: 1.5px solid white;
-  background-color: #9c9c98;
-  color: azure;
-  font-family: inherit;
-  margin: 6px 0px;
-}
-
-.selectContainer > select:hover, .selectContainer > select:active {
-  border: 2px solid var(--text-color);
-}
-
-.selectContainer > div {
-  padding: 0px 5px;
-  margin-right: 8px;
-}

src/pages/script.js

@@ -9,8 +9,11 @@ export default function Script() {
   return (
     <div>
       <Head>
-        <title>Manual - Qmining | Frylabs.net</title>
+        <title>Script - Qmining | Frylabs.net</title>
       </Head>
+      <div className={'pageHeader'}>
+        <h1>Script</h1>
+      </div>
       <div className={'buttonContainer'}>
         <a href="https://www.tampermonkey.net/">
           Ajánlott userscript kezelő bővítmény