All questions / Subject browser page improve #4

src/defaultStyles.css

@@ -215,15 +215,6 @@ a {
   color: black;
 }
 
-.searchBar {
-  margin: 10px;
-  width: 100%;
-  color: white;
-  background-color: #212127;
-  border: none;
-  font-size: 18px;
-}
-
 .subjItem:hover:not(.activeSubjItem) {
   background-color: #555;
   color: white;

src/pages/allQuestions.js

@@ -4,6 +4,7 @@ import fetch from 'unfetch'
 import LoadingIndicator from '../components/LoadingIndicator.js'
 import QuestionSearchResult from '../components/QuestionSearchResult.js'
 
+import styles from './allQuestions.module.css'
 import constants from '../constants.json'
 
 export default function AllQuestions (props) {
@@ -23,14 +24,22 @@ export default function AllQuestions (props) {
   if (data) {
     return (
       <div>
-        <div>
+        <div className={styles.searchContainer}>
           <input
             placeholder='Keresés...'
-            className='searchBar'
+            className={styles.searchBar}
             type='text'
             value={searchTerm}
             onChange={(e) => { setSearchTerm(e.target.value) }}
           />
+          <button
+            onClick={() => {
+              setSearchTerm('')
+            }}
+            className={styles.clearButton}
+          >
+             X
+          </button>
         </div>
         <hr />
         <div>

src/pages/allQuestions.module.css

@@ -0,0 +1,22 @@
+.searchBar {
+  margin: 10px;
+  color: white;
+  background-color: #212127;
+  border: none;
+  font-size: 18px;
+  flex-grow: 1;
+}
+
+.searchContainer {
+  width: 100%;
+  display: flex;
+}
+
+.clearButton {
+  width: 80px;
+  background-color: var(--background-color);
+  color: white;
+  font-size: 23px;
+  cursor: pointer;
+  border: none;
+}

src/pages/index.module.css

@@ -7,6 +7,7 @@
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
+  margin: 5px;
 }
 
 .motdHeader {

src/pages/subjectBrowser.js

@@ -5,9 +5,10 @@ import LoadingIndicator from '../components/LoadingIndicator.js'
 import Subject from '../components/Subject.js'
 import SubjectSelector from '../components/SubjectSelector.js'
 
+import styles from './subjectBrowser.module.css'
 import constants from '../constants.json'
 
-export default function AllQuestions (props) {
+export default function SubjectBrowser (props) {
   const [data, setData] = useState(null)
   const [activeSubjName, setActiveSubjName] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
@@ -30,14 +31,22 @@ export default function AllQuestions (props) {
 
     return (
       <div>
-        <div>
+        <div className={styles.searchContainer}>
           <input
             placeholder='Keresés...'
-            className='searchBar'
+            className={styles.searchBar}
             type='text'
             value={searchTerm}
             onChange={(e) => { setSearchTerm(e.target.value) }}
           />
+          <button
+            onClick={() => {
+              setSearchTerm('')
+            }}
+            className={styles.clearButton}
+          >
+             X
+          </button>
         </div>
         <SubjectSelector
           data={data}

src/pages/subjectBrowser.module.css

@@ -0,0 +1,23 @@
+.searchBar {
+  margin: 10px;
+  color: white;
+  background-color: #212127;
+  border: none;
+  font-size: 18px;
+  flex-grow: 1;
+}
+
+
+.searchContainer {
+  width: 100%;
+  display: flex;
+}
+
+.clearButton {
+  width: 80px;
+  background-color: var(--background-color);
+  color: white;
+  font-size: 23px;
+  cursor: pointer;
+  border: none;
+}