From 9f8d874822e137555ee8c3b1f6d8c58af2860acf Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 17 Jun 2025 00:57:28 +0200
Subject: [PATCH] Fix Header Spacing and Badge Location if Backend can't be
 reached

---
 tranga-website/src/App.tsx    |  2 +-
 tranga-website/src/Header.tsx | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index 8d505c7..a2ff546 100644
--- a/tranga-website/src/App.tsx
+++ b/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} />
diff --git a/tranga-website/src/Header.tsx b/tranga-website/src/Header.tsx
index 0ccd651..5b2649b 100644
--- a/tranga-website/src/Header.tsx
+++ b/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>