single-button-theme-toggle-and-responsive-logo

Signed-off-by: amanycodes <amanycodes@gmail.com>

Author: amanycodes

web/ui/mantine-ui/src/App.tsx

@@ -332,14 +332,16 @@ function App() {
                       justify="space-between"
                       wrap="nowrap"
                     >
-                      <Group gap={65} wrap="nowrap">
+                      <Group gap={40} wrap="nowrap">
                         <Link
                           to="/"
                           style={{ textDecoration: "none", color: "white" }}
                         >
                           <Group gap={10} wrap="nowrap">
                             <img src={PrometheusLogo} height={30} />
-                            <Text fz={20}>Prometheus{agentMode && " Agent"}</Text>
+                            <Text hiddenFrom="sm" fz={20}>Prometheus</Text>
+                            <Text visibleFrom="md" fz={20}>Prometheus</Text>
+                            <Text fz={20}>{agentMode && "Agent"}</Text>
                           </Group>
                         </Link>
                         <Group gap={12} visibleFrom="sm" wrap="nowrap">

web/ui/mantine-ui/src/components/ThemeSelector.tsx

@@ -1,14 +1,8 @@
-import {
-  useMantineColorScheme,
-  SegmentedControl,
-  rem,
-  MantineColorScheme,
-  Tooltip,
-} from "@mantine/core";
+import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core";
 import {
   IconMoonFilled,
   IconSunFilled,
-  IconUserFilled,
+  IconBrightnessFilled,
 } from "@tabler/icons-react";
 import { FC } from "react";
 
@@ -20,45 +14,28 @@ export const ThemeSelector: FC = () => {
   };
 
   return (
-    <SegmentedControl
-      color="gray.7"
-      size="xs"
-      // styles={{ root: { backgroundColor: "var(--mantine-color-gray-7)" } }}
-      styles={{
-        root: {
-          padding: 3,
-          backgroundColor: "var(--mantine-color-gray-6)",
-        },
-      }}
-      withItemsBorders={false}
-      value={colorScheme}
-      onChange={(v) => setColorScheme(v as MantineColorScheme)}
-      data={[
-        {
-          value: "light",
-          label: (
-            <Tooltip label="Use light theme" offset={15}>
-              <IconSunFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-        {
-          value: "dark",
-          label: (
-            <Tooltip label="Use dark theme" offset={15}>
-              <IconMoonFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-        {
-          value: "auto",
-          label: (
-            <Tooltip label="Use browser-preferred theme" offset={15}>
-              <IconUserFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-      ]}
-    />
+    <ActionIcon
+      color="gray"
+      title={`Switch to ${colorScheme === "light" ? "dark" : colorScheme === "dark" ? "browser-preferred" : "light"} theme`}
+      aria-label={`Switch to ${colorScheme === "light" ? "dark" : colorScheme === "dark" ? "browser-preferred" : "light"} theme`}
+      size={32}
+      onClick={() =>
+        setColorScheme(
+          colorScheme === "light"
+            ? "dark"
+            : colorScheme === "dark"
+              ? "auto"
+              : "light"
+        )
+      }
+    >
+      {colorScheme === "light" ? (
+        <IconSunFilled {...iconProps} />
+      ) : colorScheme === "dark" ? (
+        <IconMoonFilled {...iconProps} />
+      ) : (
+        <IconBrightnessFilled {...iconProps} />
+      )}
+    </ActionIcon>
   );
 };