From da002df3f29cc5175c4d83c9e2e9f42181c05b00 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sat, 19 Oct 2024 20:57:03 +0200
Subject: [PATCH] Add "Close Search" Button

---
 Website/App.tsx            |  2 +-
 Website/modules/Search.tsx |  5 +++--
 Website/styles/search.css  | 18 ++++++++++++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/Website/App.tsx b/Website/App.tsx
index f67ac77..ce55ef0 100644
--- a/Website/App.tsx
+++ b/Website/App.tsx
@@ -40,7 +40,7 @@ export default function App(){
             ? <>
                 {showSearch
                     ? <>
-                        <Search onJobsChanged={JobsChanged}/>
+                        <Search onJobsChanged={JobsChanged} closeSearch={() => setShowSearch(false)} />
                         <hr/>
                     </>
                     : <></>}
diff --git a/Website/modules/Search.tsx b/Website/modules/Search.tsx
index 5ade055..f66b9b4 100644
--- a/Website/modules/Search.tsx
+++ b/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>
diff --git a/Website/styles/search.css b/Website/styles/search.css
index f70aa90..270a58f 100644
--- a/Website/styles/search.css
+++ b/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%);
 }
\ No newline at end of file