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

Signed-off-by: amanycodes <amanycodes@gmail.com>
This commit is contained in:
Aman 2025-02-12 22:44:05 +05:30 committed by GitHub
parent 8fe24ced82
commit 509b978f0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 7 deletions

View file

@ -332,14 +332,16 @@ function App() {
justify="space-between" justify="space-between"
wrap="nowrap" wrap="nowrap"
> >
<Group gap={65} wrap="nowrap"> <Group gap={40} wrap="nowrap">
<Link <Link
to="/" to="/"
style={{ textDecoration: "none", color: "white" }} style={{ textDecoration: "none", color: "white" }}
> >
<Group gap={10} wrap="nowrap"> <Group gap={10} wrap="nowrap">
<img src={PrometheusLogo} height={30} /> <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> </Group>
</Link> </Link>
<Group gap={12} visibleFrom="sm" wrap="nowrap"> <Group gap={12} visibleFrom="sm" wrap="nowrap">

View file

@ -1,8 +1,8 @@
import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core"; import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core";
import { import {
IconBrightnessFilled,
IconMoonFilled, IconMoonFilled,
IconSunFilled, IconSunFilled,
IconBrightnessFilled,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { FC } from "react"; import { FC } from "react";
@ -30,11 +30,11 @@ export const ThemeSelector: FC = () => {
} }
> >
{colorScheme === "light" ? ( {colorScheme === "light" ? (
<IconMoonFilled {...iconProps} />
) : colorScheme === "dark" ? (
<IconBrightnessFilled {...iconProps} />
) : (
<IconSunFilled {...iconProps} /> <IconSunFilled {...iconProps} />
) : colorScheme === "dark" ? (
<IconMoonFilled {...iconProps} />
) : (
<IconBrightnessFilled {...iconProps} />
)} )}
</ActionIcon> </ActionIcon>
); );