Rework of page "allQuestions", minor style and layout fixes and modifications for other pages

src/pages/allQuestions.js

@@ -103,8 +103,16 @@ export default function AllQuestions({ router }) {
           <div className={'pageHeader'}>
             <h1>Kérdések és tárgyak</h1>
           </div>
-          <br />
-          <div className={`selectContainer ${styles.content}`}>
+          <Sleep />
+          <div className={'description'}>
+            <p>
+              Ezen az oldalon tudsz manuálisan keresni a kérdések és a tárgyak
+              között, vagy ellenőrizni, hogy egy adott tárgy szerepel-e a
+              kérdés- és tárgyadatbázisban. Ezen kívül a kérdéseket le is
+              töltheted offline használatra. (txt formátumban)
+            </p>
+          </div>
+          <div className={'selectContainer'}>
             <select
               defaultValue={-1}
               onChange={(event) => {
@@ -127,7 +135,7 @@ export default function AllQuestions({ router }) {
               }}
             >
               <option disabled value={-1}>
-                {' - Válassz egy adatbázist! - '}
+                {' Válassz egy adatbázist!'}
               </option>
               {dbs.map((db, i) => {
                 return (
@@ -137,7 +145,7 @@ export default function AllQuestions({ router }) {
                 )
               })}
               <option value={'all'} key={'all'}>
-                {'All'}
+                {'Összes kérdés'}
               </option>
             </select>
           </div>
@@ -159,25 +167,26 @@ export default function AllQuestions({ router }) {
       <div>
         {data ? (
           <>
-            <div className={styles.searchContainer}>
-              <input
-                autoFocus
-                placeholder="Keresés..."
-                type="text"
-                value={searchTerm}
-                onChange={(event) => {
-                  setSearchTerm(event.target.value)
-                }}
-              />
-              <button
-                onClick={() => {
-                  setSearchTerm('')
-                }}
-                className={styles.clearButton}
-              >
-                X
-              </button>
-            </div>
+            <center>
+              <div className={styles.searchContainer}>
+                <input
+                  placeholder="Kezdj el írni a kereséshez..."
+                  type="text"
+                  value={searchTerm}
+                  onChange={(event) => {
+                    setSearchTerm(event.target.value)
+                  }}
+                />
+                <button
+                  onClick={() => {
+                    setSearchTerm('')
+                  }}
+                  className={styles.clearButton}
+                >
+                  X
+                </button>
+              </div>
+            </center>
             <hr />
             <SubjectSelector
               data={data}
@@ -187,10 +196,9 @@ export default function AllQuestions({ router }) {
                 setActiveSubjName(subjName)
               }}
             />
-            <hr />
-            <div>{/*{qCount} kérdés, {sCount} tárgy */}</div>
-            <Sleep />
+
             <div>
+              <hr />
               <Subject subj={currSubj} />
             </div>
           </>
@@ -206,8 +214,7 @@ export default function AllQuestions({ router }) {
           <>
             <div className={styles.searchContainer}>
               <input
-                autoFocus
-                placeholder="Keresés..."
+                placeholder="Kezdj el írni a kereséshez..."
                 type="text"
                 value={searchTerm}
                 onChange={(event) => {
@@ -229,7 +236,6 @@ export default function AllQuestions({ router }) {
                 X
               </button>
             </div>
-            <hr />
             <div>
               <QuestionSearchResult data={data} searchTerm={searchTerm} />
             </div>
@@ -247,7 +253,9 @@ export default function AllQuestions({ router }) {
       {dbs ? <>{renderDbSelector()}</> : <LoadingIndicator />}
       {dbs && data ? (
         <>
-          {`${questionCount} kérdés, ${subjectCount} tárgy`}
+          <div className={styles.info}>
+            {`Összesen ${questionCount} kérdés, ${subjectCount} tárgyból`}
+          </div>
           <div className={'buttonContainer'}>
             <div
               className={!subjectsShowing ? 'activeButton' : ''}