diff --git a/components/Login/helpers/server-address.tsx b/components/Login/helpers/server-address.tsx index ba86a665..2916224b 100644 --- a/components/Login/helpers/server-address.tsx +++ b/components/Login/helpers/server-address.tsx @@ -67,7 +67,10 @@ export default function ServerAddress(): React.JSX.Element { onCheckedChange={(checked) => setUseHttps(checked)} label="Use HTTPS" size="$2" - width={100} /> + width={100} + backgroundColor="$accentColor" + /> + diff --git a/components/helpers/switch-with-label.tsx b/components/helpers/switch-with-label.tsx index 775faa7d..c0e348d1 100644 --- a/components/helpers/switch-with-label.tsx +++ b/components/helpers/switch-with-label.tsx @@ -1,7 +1,16 @@ -import { SizeTokens, XStack, Separator, Switch } from "tamagui"; +import { SizeTokens, XStack, Separator, Switch, ColorTokens } from "tamagui"; import { Label } from "./text"; -export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void, width?: number }) { +interface SwitchWithLabelProps { + onCheckedChange: (value: boolean) => void, + size: SizeTokens + checked: boolean; + label: string; + width?: number | undefined; + backgroundColor?: ColorTokens; +} + +export function SwitchWithLabel(props: SwitchWithLabelProps) { const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}` return ( @@ -17,7 +26,7 @@ export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, lab size={props.size} checked={props.checked} onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)} - backgroundColor="$color" + backgroundColor={props.backgroundColor} >