Fix Size of SearchCard

README.md

@@ -33,6 +33,9 @@
 <!-- ABOUT THE PROJECT -->
 ## Screenshots
 
+|![Main Page](Screenshots/Screenshot%202025-06-17%20at%2001-15-08%20Tranga.png)|![Settings](Screenshots/Screenshot%202025-06-17%20at%2001-15-23%20Tranga.png)|![Search Empty](Screenshots/Screenshot%202025-06-17%20at%2001-15-36%20Tranga.png)
+|---|---|---|
+|![Search Results](Screenshots/Screenshot%202025-06-17%20at%2001-16-32%20Tranga.png)|![Manga Popup](Screenshots/Screenshot%202025-06-17%20at%2001-16-43%20Tranga.png)|![Jobs Drawer](Screenshots/Screenshot%202025-06-17%20at%2001-17-37%20Tranga.png)
 
 ## About The Project
 

tranga-website/src/App.tsx

@@ -89,8 +89,8 @@ export default function App () {
                             <Header>
                                 <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
                                     <Button onClick={() => setShowSettings(true)}>Settings</Button>
-                                    <Button onClick={() => setShowJobs(true)}>Jobs</Button>
                                 </Badge>
+                                <Button onClick={() => setShowJobs(true)}>Jobs</Button>
                             </Header>
                             <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                             <Search open={showSearch} setOpen={setShowSearch} />

tranga-website/src/Components/MangaList.tsx

@@ -57,7 +57,7 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
             <Badge invisible sx={{margin: "8px !important"}}>
                 <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
                     <CardCover sx={{margin:"var(--Card-padding)"}}>
-                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
+                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + "px"}} />
                     </CardCover>
                     <CardCover sx={{
                         background: 'rgba(234, 119, 246, 0.14)',
@@ -65,7 +65,7 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
                         webkitBackdropFilter: 'blur(6.9px)',
                     }}/>
                     <CardContent>
-                        <Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
+                        <Box style={{height: CardHeight + "px", width: CardWidth + "px"}} >
                             <Typography level={"h1"}>Search</Typography>
                         </Box>
                     </CardContent>

tranga-website/src/Header.tsx

@@ -1,18 +1,22 @@
 import Sheet from "@mui/joy/Sheet";
-import {Stack, Typography} from "@mui/joy";
+import {Box, Stack, Typography} from "@mui/joy";
 import {ReactElement} from "react";
 import './Header.css';
 
 export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+    
     return (
         <Sheet className={"header"}>
-            <Stack direction={"row"}
-                   spacing={4}
-                   sx={{
-                       justifyContent: "flex-start",
-                       alignItems: "center",
-                   }}>
-                <Typography level={"h2"}>Tranga</Typography>
+            <Stack direction={"row"} spacing={2} sx={{width: "100%"}}>
+                <img src={"/blahaj.png"} style={{cursor: "grab"}}/>
+                <Typography level={"h2"} sx={{
+                    background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))", 
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    fontWeight: "bold",
+                    cursor: "default"
+                }}>Tranga</Typography>
+                <Box sx={{flexGrow: 1}} />
                 {children}
             </Stack>
         </Sheet>