Add "Close Search" Button

Website/App.tsx

@@ -40,7 +40,7 @@ export default function App(){
             ? <>
                 {showSearch
                     ? <>
-                        <Search onJobsChanged={JobsChanged}/>
+                        <Search onJobsChanged={JobsChanged} closeSearch={() => setShowSearch(false)} />
                         <hr/>
                     </>
                     : <></>}

Website/modules/Search.tsx

@@ -7,7 +7,7 @@ import IManga, {SearchResult} from "./interfaces/IManga";
 import '../styles/search.css';
 import '../styles/MangaSearchResult.css'
 
-export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<any>}) {
+export default function Search({onJobsChanged, closeSearch} : {onJobsChanged: EventHandler<any>, closeSearch(): void}) {
     const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
     const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
     const [selectedLanguage, setSelectedLanguage] = useState<string>();
@@ -88,7 +88,7 @@ export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<an
 
     const changeSelectedLanguage : ChangeEventHandler<HTMLSelectElement> = (event) => setSelectedLanguage(event.target.value);
 
-    return (<div>
+    return (<div id="Search">
         <div id="SearchBox">
             <input type="text" placeholder="Manganame" id="Searchbox-Manganame" onChange={searchBoxValueChanged}></input>
             <select id="Searchbox-Connector" value={selectedConnector === undefined ? "" : selectedConnector.name} onChange={selectedConnectorChanged}>
@@ -105,6 +105,7 @@ export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<an
             </select>
             <button id="Searchbox-button" type="submit" onClick={ExecuteSearch}>Search</button>
         </div>
+        <img id="closeSearch" src="../media/close-x.svg" onClick={closeSearch} />
         <div id="SearchResults">
             {searchResults === undefined
                 ? <p></p>

Website/styles/search.css

@@ -1,3 +1,9 @@
+#Search{
+    position: relative;
+    width: 98vw;
+    margin: auto;
+}
+
 #SearchBox{
     display: flex;
     align-content: center;
@@ -6,8 +12,7 @@
 }
 
 #SearchResults {
-    max-width: 98vw;
-    margin: 0 auto;
+    width: 100%;
 }
 
 #SearchBox select, #SearchBox button, #SearchBox input {
@@ -41,4 +46,13 @@
     border-top-right-radius: 2px;
     border-right-width: 2px !important;
     width: 90px;
+}
+
+#closeSearch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(20deg) brightness(103%) contrast(101%);
 }