fix(webapp): address light theme review round 2

- keep dark-theme switch/radio thumb colors, white only in light
- pick avatar letter color by background luminance
- seed required preference fields when jsonb column is null

Author: kathiekiwi

apps/webapp/app/components/primitives/Avatar.tsx

@@ -117,6 +117,16 @@ function styleFromSize(size: number) {
   };
 }
 
+// Bright tiles (Yellow, Orange) need dark letters for contrast; the rest read
+// best with white.
+function letterColorForBackground(hex: string): string {
+  const match = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!match) return "#fff";
+  const n = parseInt(match[1], 16);
+  const luminance = 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);
+  return luminance > 140 ? "#272A2E" : "#fff";
+}
+
 function AvatarLetters({
   avatar,
   size,
@@ -132,15 +142,13 @@ function AvatarLetters({
 
   const style = {
     backgroundColor: avatar.hex,
+    color: letterColorForBackground(avatar.hex),
   };
 
   const scaleFactor = includePadding ? 0.8 : 1;
 
   return (
-    <span
-      className="grid shrink-0 place-items-center overflow-hidden text-white"
-      style={styleFromSize(size)}
-    >
+    <span className="grid shrink-0 place-items-center overflow-hidden" style={styleFromSize(size)}>
       {/* This is the square container */}
       <span
         className={cn(

apps/webapp/app/components/primitives/RadioButton.tsx

@@ -81,7 +81,12 @@ export function RadioButtonCircle({
             outerCircleClassName
           )}
         >
-          <Circle className={cn("size-2 fill-white text-white", innerCircleClassName)} />
+          <Circle
+            className={cn(
+              "size-2 fill-white text-white dark:fill-text-bright dark:text-text-bright",
+              innerCircleClassName
+            )}
+          />
         </div>
       )}
     </div>
@@ -134,7 +139,7 @@ export const RadioGroupItem = React.forwardRef<
           )}
         >
           <RadioGroupPrimitive.Indicator className="flex h-full w-full items-center justify-center rounded-full bg-indigo-600">
-            <Circle className="size-2 fill-white text-white" />
+            <Circle className="size-2 fill-white text-white dark:fill-text-bright dark:text-text-bright" />
           </RadioGroupPrimitive.Indicator>
         </div>
         <div className={cn(icon ? "flex h-full flex-col justify-end" : "")}>

apps/webapp/app/components/primitives/Switch.tsx

@@ -96,7 +96,10 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
         )}
       >
         <SwitchPrimitives.Thumb
-          className={cn(thumb, "pointer-events-none block rounded-full bg-white transition")}
+          className={cn(
+            thumb,
+            "pointer-events-none block rounded-full bg-white transition dark:bg-charcoal-200 dark:group-data-[state=checked]:bg-text-bright"
+          )}
         />
       </div>
     );

apps/webapp/app/services/dashboardPreferences.server.ts

@@ -122,7 +122,10 @@ export async function updateThemePreference({
   return prisma.$executeRaw`
     UPDATE "User"
     SET "dashboardPreferences" = jsonb_set(
-      COALESCE("dashboardPreferences", '{}'::jsonb),
+      COALESCE(
+        "dashboardPreferences",
+        '{"version":"1","projects":{}}'::jsonb
+      ),
       '{theme}',
       to_jsonb(${theme}::text)
     )