Fix Header Spacing and Badge Location if Backend can't be reached

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/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>