single-button-theme-toggle-and-responsive-logo (prometheus#16021)

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,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} />
+        <IconSunFilled {...iconProps} />
       ) : colorScheme === "dark" ? (
-        <IconBrightnessFilled {...iconProps} />
+        <IconMoonFilled {...iconProps} />
       ) : (
-        <IconSunFilled {...iconProps} />
+        <IconBrightnessFilled {...iconProps} />
       )}
     </ActionIcon>
   );