Add question page design changes

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'id-length': [
       'warn',
-      { exceptions: ['i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b'] },
+      { exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b'] },
     ],
   },
   root: true,

src/components/layout.js

@@ -54,7 +54,7 @@ export default function Layout(props) {
       setSidebarOpen(window.innerWidth >= 700)
     })
   }, [])
-  const snowflakeCount = (windowSize[0] + windowSize[1]) / 8
+  const snowflakeCount = (windowSize[0] + windowSize[1]) / 26
 
   return (
     <div>

src/pages/addQuestion.js

@@ -86,7 +86,7 @@ export default function AddQuestion() {
         <div className={styles.inputContainer}>
           <input
             type="text"
-            onChange={(e) => {
+            onChange={(event) => {
               // TODO: handle JSON
               // try {
               //   let newData = JSON.parse(e.target.value)
@@ -181,7 +181,7 @@ export default function AddQuestion() {
       })
   }
 
-  const renderStuff = (props) => {
+  const renderStuff = () => {
     return (
       <div>
         {form.quiz.map((q, i) => {
@@ -194,9 +194,8 @@ export default function AddQuestion() {
             </div>
           )
         })}
-        <div className={styles.buttonContainer}>
+        <div className={styles.newQuestionButton}>
-          <button
+          <div
-            className={styles.button}
             onClick={() => {
               let quiz = form.quiz
               quiz.push(getDefaultQuestion())
@@ -206,8 +205,8 @@ export default function AddQuestion() {
               })
             }}
           >
-            Új kérdés hozzáadása
+            Új kérdés
-          </button>
+          </div>
         </div>
         {isSubmitting ? (
           <div className={styles.issubmitting}>
@@ -235,20 +234,20 @@ export default function AddQuestion() {
             placeholder="Új tárgy neve..."
             type="text"
             className={styles.questionInput}
-            onChange={(e) => {
+            onChange={(event) => {
               setForm({
                 ...form,
-                subj: e.target.value,
+                subj: event.target.value,
               })
             }}
           />
         ) : (
           <select
             className={styles.subjSelector}
-            onChange={(e) => {
+            onChange={(event) => {
               setForm({
                 ...form,
-                subj: subjects[e.target.value],
+                subj: subjects[event.target.value],
               })
             }}
           >
@@ -282,8 +281,9 @@ export default function AddQuestion() {
         <li>Ezen az oldalon kérdéseket tudsz beküldeni manuálisan.</li>
         <li>Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már</li>
         <li>
-          Ha több válasz van, akkor ', '-vel válaszd el őket ( "válasz1,
+          {
-          válasz2, válasz3" )
+            "Ha több válasz van, akkor ', '-vel válaszd el őket ( 'válasz1, válasz2, válasz3' )"
+          }
         </li>
         <li>
           Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem

src/pages/addQuestion.module.css

@@ -1,10 +1,11 @@
 .questionInput {
   flex-grow: 1;
-  font-size: 22px;
+  font-size: 16px;
   background-color: var(--background-color);
   color: white;
   border: none;
   padding: 8px;
+  margin: 4px;
   border: 1px solid;
   border-color: var(--background-color);
 }
@@ -29,20 +30,22 @@
 }
 
 .deleteButton {
+  display: flex;
+  align-items: center;
+  background-color: #333;
   padding: 6px;
-  font-size: 22px;
+  font-size: 16px;
-  background-color: var(--background-color);
   color: white;
   cursor: pointer;
   border: 1px solid;
   border-color: var(--background-color);
 }
 
-.questionInput:hover {
+.deleteButton:hover {
-  border: 1px solid;
+  background-color: #666;
 }
 
-.deleteButton:hover {
+.questionInput:hover {
   border: 1px solid;
 }
 
@@ -66,19 +69,28 @@
 }
 
 .newSubj {
+  display: flex;
+  justify-content: center;
+
+  background-color: #333;
   width: 150px;
+  margin: 0px 4px;
   padding: 10px;
   cursor: pointer;
-  font-size: 20px;
+  font-size: 14px;
   color: white;
 }
 
+.newSubj:hover {
+  background-color: #666;
+}
+
 .usage li {
   margin: 5px;
 }
 
 .usage {
-  font-size: 18px;
+  font-size: 15px;
   color: white;
 }
 
@@ -86,3 +98,19 @@
   text-align: center;
   color: white;
 }
+
+.newQuestionButton {
+  display: flex;
+  justify-content: center;
+}
+
+.newQuestionButton div {
+  background-color: #333;
+  color: white;
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.newQuestionButton div:hover {
+  background-color: #666;
+}