Split Styles for modules into separate files

Website/modules/Footer.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import '../styles/footer.css';
 
 export default function Footer(){
     return (

Website/modules/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../styles/header.css'
 
 export default function Header(){
     return (

Website/modules/Search.tsx

@@ -3,6 +3,7 @@ import {MangaConnector} from "./MangaConnector";
 import IMangaConnector from "./interfaces/IMangaConnector";
 import {isValidUri} from "../App";
 import IManga, {HTMLFromIManga} from "./interfaces/IManga";
+import '../styles/search.css';
 
 export default function Search(){
     const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
@@ -104,7 +105,10 @@ export default function Search(){
         <div>
             {searchResults === undefined
                 ? <p>No Results yet</p>
-                : searchResults.map(result => HTMLFromIManga(result))}
+                : searchResults.map(result => <div key={"searchResult."+result.internalId} className="searchResult">
+                    {HTMLFromIManga(result)}
+                    <button onClick={(e) => {Job.CreateJob(result.internalId, "MonitorManga", "03:00:00")}}>Monitor</button>
+                </div>)}
         </div>
     </div>)
 }

Website/styles/footer.css

@@ -0,0 +1,21 @@
+footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    align-content: center;
+    position: fixed;
+    bottom: 0;
+    color: white;
+}
+
+#madeWith {
+    flex-grow: 1;
+    text-align: right;
+    margin-right: 20px;
+    cursor: url("Website/media/blahaj.png"), grab;
+}

Website/styles/header.css

@@ -0,0 +1,32 @@
+header {
+    display: flex;
+    align-items: center;
+    height: var(--topbar-height);
+    background-color: var(--secondary-color);
+    z-index: 100;
+    box-shadow: 0 0 20px black;
+}
+
+header > #titlebox {
+    position: relative;
+    display: flex;
+    margin: 0 0 0 40px;
+    height: 100%;
+    align-items:center;
+    justify-content:center;
+}
+
+header > #titlebox > span{
+    cursor: default;
+    font-size: 24pt;
+    font-weight: bold;
+    background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 20px;
+}
+
+header > #titlebox > img {
+    height: 100%;
+    cursor: grab;
+}

Website/styles/index.css

@@ -21,58 +21,4 @@ body{
     font-family: "Inter", sans-serif;
     overflow-x: hidden;
     color: var(--primary-color);
-}
-
-header {
-    display: flex;
-    align-items: center;
-    height: var(--topbar-height);
-    background-color: var(--secondary-color);
-    z-index: 100;
-    box-shadow: 0 0 20px black;
-}
-
-header > #titlebox {
-    position: relative;
-    display: flex;
-    margin: 0 0 0 40px;
-    height: 100%;
-    align-items:center;
-    justify-content:center;
-}
-
-header > #titlebox > span{
-    cursor: default;
-    font-size: 24pt;
-    font-weight: bold;
-    background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-left: 20px;
-}
-
-header > #titlebox > img {
-    height: 100%;
-    cursor: grab;
-}
-
-footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    width: 100%;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--primary-color);
-    align-content: center;
-    position: fixed;
-    bottom: 0;
-}
-
-#madeWith {
-    flex-grow: 1;
-    text-align: right;
-    margin-right: 20px;
-    cursor: url("Website/media/blahaj.png"), grab;
 }

Website/styles/search.css

@@ -0,0 +1,3 @@
+.searchResult{
+    background-color: var(--second-background-color);
+}