From 509b978f0d675b4c9b3ccf8c0fc06961b0f03e8f Mon Sep 17 00:00:00 2001
From: Aman <95525722+amanycodes@users.noreply.github.com>
Date: Wed, 12 Feb 2025 22:44:05 +0530
Subject: [PATCH] single-button-theme-toggle-and-responsive-logo (#16021)

Signed-off-by: amanycodes <amanycodes@gmail.com>
---
 web/ui/mantine-ui/src/App.tsx                      |  6 ++++--
 web/ui/mantine-ui/src/components/ThemeSelector.tsx | 10 +++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 3bec30fa31..2599c9f5aa 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/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">
diff --git a/web/ui/mantine-ui/src/components/ThemeSelector.tsx b/web/ui/mantine-ui/src/components/ThemeSelector.tsx
index 964d491a04..131327a1f6 100644
--- a/web/ui/mantine-ui/src/components/ThemeSelector.tsx
+++ b/web/ui/mantine-ui/src/components/ThemeSelector.tsx
@@ -1,8 +1,8 @@
 import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core";
 import {
-  IconBrightnessFilled,
   IconMoonFilled,
   IconSunFilled,
+  IconBrightnessFilled,
 } from "@tabler/icons-react";
 import { FC } from "react";
 
@@ -30,11 +30,11 @@ export const ThemeSelector: FC = () => {
       }
     >
       {colorScheme === "light" ? (
-        <IconMoonFilled {...iconProps} />
-      ) : colorScheme === "dark" ? (
-        <IconBrightnessFilled {...iconProps} />
-      ) : (
         <IconSunFilled {...iconProps} />
+      ) : colorScheme === "dark" ? (
+        <IconMoonFilled {...iconProps} />
+      ) : (
+        <IconBrightnessFilled {...iconProps} />
       )}
     </ActionIcon>
   );