Changed button layout, IRC button removed but not been placed back yet

Redesign of passwordgen page

src/components/layout.js

@@ -104,17 +104,6 @@ export default function Layout({
                   </Link>
                 )
               })}
-              <a
-                href={`/dataeditor`}
-                onClick={closeSideBar}
-                target="_blank"
-                rel="noreferrer"
-                title={
-                  'Kérdések szerkesztése, törlése, beküldése, és kitöltetlen tesztek'
-                }
-              >
-                Kérdés szerkesztő
-              </a>
               <a
                 href={`/donate`}
                 className="donate"

src/data/tabs.json

@@ -3,10 +3,6 @@
     "href": "/",
     "text": "Főoldal"
   },
-  "manual": {
-    "href": "/manual",
-    "text": "A script használata"
-  },
   "allQuestions": {
     "href": "/allQuestions",
     "text": "Kérdések és tárgyak"

src/defaultStyles.css

@@ -167,6 +167,7 @@ a:hover {
   .rtfmImage {
     display: flex;
     justify-content: center;
+    border: 2px solid white;
     width: 100%;
   }
 
@@ -249,40 +250,41 @@ a:hover {
 }
 
 .warning {
-    color: red;
+  color: red;
-    font-weight: 100;
+  font-weight: 100;
-    font-size: 17.5px;
+  font-size: 17.5px;
 }
 
 #manualWarn {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .manual_img {
-    padding: 20px 2px;
+  padding: 20px 2px;
 }
 
 .subtitle {
-    color: var(--text-color);
+  color: var(--text-color);
-    font-size: 23px;
+  font-size: 23px;
-    text-align: center;
+  text-align: center;
-    font-weight: 100;
+  font-weight: 100;
-    margin: 0px;
+  margin: 0px;
-    padding-top: 8px;
+  padding-top: 8px;
 }
 
 .pageHeader {
-    background-color: var(--text-color);
+  background-color: var(--text-color);
-    height: 45px;
+  height: 45px;
-    max-width: 100%;
+  max-width: 100%;
-    color: black;
+  color: black;
-    margin: 5px 0px 0px 0px;
+  margin: 5px 0px 0px 0px;
 }
 
 .pageHeader h1 {
-    padding-top: 6px;
+  padding-top: 6px;
-    letter-spacing: 7px;
+  letter-spacing: 7px;
-    margin: 0px;
+  text-align: center;
+  margin: 0px;
 }
 
 .manualUsage {
@@ -291,7 +293,7 @@ a:hover {
 }
 
 .manualBody {
-    text-align: justify;
+  text-align: justify;
 }
 
 select {
@@ -302,7 +304,7 @@ select {
 }
 
 select:hover {
-  border: 1px solid #99f;
+  border: 1px solid #F2CB05;
 }
 
 .userStatus {

src/pages/index.js

@@ -15,9 +15,13 @@ const links = {
     href: '/install',
     text: 'Install',
   },
-  irc: {
+  manual: {
-    href: '/irc',
+    href: '/manual',
-    text: 'IRC chat',
+    text: 'A script használata',
+    },
+  dataeditor: {
+    href: '/dataeditor',
+    text: 'Kérdés szerkesztő',
   },
 }
 
@@ -192,13 +196,14 @@ export default function Index(props) {
         >
           {'Összes kérdés TXT'}
         </a>
+        
         <a
-          onClick={() => {
+          /*onClick={() => {
             setAllQrSelector('json')
           }}
-          className={styles.button}
+          className={styles.button}*/
         >
-          {'Összes kérdés JSON'}
+          {/*'Összes kérdés JSON'*/}
         </a>
       </div>
       {renderMotd()}

src/pages/manual.js

@@ -109,7 +109,7 @@ function renderMaual() {
       </div>
       <hr />
       <center>
-        <h2 className={'subtitle'}>Jelszavak</h2>
+        <h2 id="pw" className={'subtitle'}>Jelszavak</h2>
       </center>
       <div className={'manualBody'}>
       <p>Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy

src/pages/pwRequest.js

@@ -67,48 +67,54 @@ export default function PwRequest(props) {
           }
         })
         .catch((e) => {
-          setResult([...result, 'Szerver oldali hiba!'])
+          setResult([...result, 'Szerver oldali hiba! :('])
           console.error(e)
         })
     } catch (e) {
-      setResult([...result, 'Szerver oldali hiba!'])
+      setResult([...result, 'Szerver oldali hiba! :('])
       console.error(e)
     }
   }
+    /*removed: Az új felhasználóknak
+               <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
+               napot kell várniuk, míg jelszó generálási lehetőséget kapnak.< br />*/
 
   return (
-    // TODO: újrafogalmazás, remove hány nap után kapnak új jelszót először
+    // 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ó kérés - Qmining | Frylabs.net</title>
+        <title>Jelszó generálás - Qmining | Frylabs.net</title>
       </Head>
+      <div className={'pageHeader'}>
+        <h1 className={'pageHeader h1'}>Jelszó generálás</h1>
+      </div>
       <div id="form">
         <div className={styles.text}>
-          Itt új jelszavakat tudsz kérni új felhasználóknak. Közös
+          <p className={styles.descrip}>Ezen az oldalon lehetőséged van lekérni jelszavakat, 
-          jelszóhasználat nem ajánlott, mert ha valaki belép azzal a jelszóval
+          hogy új felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat pótold, 
-          amit te használsz akkor téged kiléptet mindenhonnan. Szerintem van
+          amennyiben még be vagy jelentkezve a régivel. (Konkrét elfelejtett jelszó funkció még nincsen)<br />
-          elég jelszó hogy ne kelljen közös
+          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}>
-          Új felhasználóknak
+          Egy felhasználó egyszerre 
-          <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
-          napot kell várni, míg kapnak lehetőséget jelszó generálásra.
-        </div>
-        <div className={styles.text}>
-          <span>{' ' + addPwPerDay + ' '}</span>
-          naponta
           <span>{' ' + addPWCount + ' '}</span>
-          új lehetőség van jelszót generálni, maximum
+          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>
-          lehetőség gyűlhet össze
+          jelszót generálhat.<br />          
-        </div>
+          Ebből eddig
-        <div className={styles.text}>
-          Még kérhető jelszavak:
-          <span>{' ' + remaining}</span>. Felhasználó létrehozva:
-          <span>{' ' + createDate}</span>,<span>{' ' + dayDiff + ' '}</span>
-          napja. Eddig
           <span>{' ' + requestedPWS + ' '}</span>
-          jelszót kértél.
+          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 />
         </div>
         <div className={styles.buttonContainer}>
           <div onClick={handleSubmit} className={styles.button}>

src/pages/pwRequest.module.css

@@ -6,13 +6,26 @@
 }
 
 .button {
-  cursor: pointer;
+  background-color: #F2CB05;
-  text-align: center;
-  background-color: var(--text-color);
   border: none;
-  padding: 10px 30px;
+  color: black;
-  color: white;
+  padding: 15px 30px;
-  width: 200px;
+  font-weight: bold;
+  font-size: 15px;
+  margin: 8px 2px 2px 2px;
+  cursor: pointer;
+  text-shadow: 1px 1px 8px black;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+}
+
+.button:active {
+  transform: translateY(2.5px);
+}
+
+.button:hover {
+  text-shadow: 2px 2px 8px black;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  background-color: #a38c1a;
 }
 
 .text {
@@ -22,6 +35,14 @@
   padding: 10px;
 }
 
+.descrip {
+  color: #acabab;
+  font-weight: bold;
+  padding-top: 4%;
+  padding-bottom: 4%;
+  font-size: 20px;
+}
+
 .pw {
   margin: 10px;
 }