diff --git a/web/src/features/settings/RestartBanner.tsx b/web/src/features/settings/RestartBanner.tsx index 6194d31..34aa83c 100644 --- a/web/src/features/settings/RestartBanner.tsx +++ b/web/src/features/settings/RestartBanner.tsx @@ -1,20 +1,47 @@ +import * as stylex from "@stylexjs/stylex"; +import { styles as shared } from "@/ui/styles"; +import { colors } from "@/ui/tokens.stylex"; import { dismissRestartBanner, useRestartBanner } from "./restartBanner"; -import { focusRing } from "@/ui/classes"; + +const styles = stylex.create({ + banner: { + display: "flex", + alignItems: "center", + gap: "0.75rem", + borderBottomWidth: 1, + borderBottomStyle: "solid", + borderBottomColor: colors.warnBorder, + backgroundColor: colors.warnSurface, + color: colors.warnText, + paddingInline: "1rem", + paddingBlock: "0.5rem", + fontSize: "0.875rem", + lineHeight: "1.25rem", + }, + message: { + flex: 1, + }, + dismiss: { + borderRadius: "0.25rem", + borderWidth: 1, + borderStyle: "solid", + borderColor: colors.warnBorderStrong, + backgroundColor: "transparent", + color: "inherit", + paddingInline: "0.5rem", + paddingBlock: "0.25rem", + fontSize: "0.75rem", + lineHeight: "1rem", + }, +}); export default function RestartBanner() { const raised = useRestartBanner(); if (!raised) return null; return ( -
- Changes saved. Restart nxdns to apply. -