From 9f815dee34355eb449d5443efbb8554f791fbaad Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sat, 23 Nov 2024 20:30:28 -0600
Subject: [PATCH] wiring up background color prop for switches

---
 components/Login/helpers/server-address.tsx |  5 ++++-
 components/helpers/switch-with-label.tsx    | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

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"
+                 />
+                    
                 
                 <Spacer />
 
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 (
       <XStack alignItems="center" gap="$3">
@@ -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}
         >
           <Switch.Thumb animation="quicker" />
         </Switch>