Revert blue top bar

Author: 3alpha

packages/ui/src/components/TopBar/ToolBar.tsx

@@ -31,12 +31,20 @@ export default function ToolBar({
           <Typography variant="h6" sx={{ fontSize: { xs: 16, sm: 20 } }}>
             Staking Brain
           </Typography>
-          {network && <Chip size="small" variant="outlined" label={capitalize(network)} />}
+          {network && (
+            <Chip
+              size="small"
+              variant="outlined"
+              label={capitalize(network)}
+              sx={{ color: "inherit", borderColor: "currentColor" }}
+            />
+          )}
         </Stack>
       </Stack>
       <Stack direction="row" spacing={0.5}>
         <Tooltip title={mode === "dark" ? "Use light mode" : "Use dark mode"}>
           <IconButton
+            color="inherit"
             aria-label={mode === "dark" ? "Use light mode" : "Use dark mode"}
             onClick={() => setMode(mode === "dark" ? "light" : "dark")}
           >
@@ -47,7 +55,8 @@ export default function ToolBar({
           <IconButton
             aria-label="Advanced information"
             aria-pressed={userMode === "advanced"}
-            color={userMode === "advanced" ? "primary" : "default"}
+            color="inherit"
+            sx={{ bgcolor: userMode === "advanced" ? "action.selected" : undefined }}
             onClick={() => setUserMode(userMode === "basic" ? "advanced" : "basic")}
           >
             {userMode === "basic" ? <UnfoldMoreIcon /> : <UnfoldLessIcon />}

packages/ui/src/components/TopBar/TopBar.tsx

@@ -17,12 +17,7 @@ export default function TopBar({
   network?: Network;
 }): JSX.Element {
   return (
-    <AppBar
-      position="sticky"
-      color="default"
-      elevation={0}
-      sx={{ bgcolor: "background.paper", borderBottom: 1, borderColor: "divider" }}
-    >
+    <AppBar position="sticky" color="primary" elevation={0} sx={{ borderBottom: 1, borderColor: "divider" }}>
       <ToolBar network={network} mode={mode} setMode={setMode} userMode={userMode} setUserMode={setUserMode} />
     </AppBar>
   );