Updates to profile

app/components/PrivacyToggle.vue

@@ -1,25 +1,22 @@
 <template>
-  <div class="flex items-center gap-2 text-sm">
-    <span class="text-gray-600 dark:text-gray-400">{{ label }}:</span>
-    <UButtonGroup size="xs">
+  <div class="flex items-center gap-3 text-sm">
+    <span class="text-stone-300 font-medium">{{ label }}:</span>
+    <UButtonGroup size="sm" class="privacy-toggle-group">
       <UButton
-        :variant="modelValue === 'public' ? 'solid' : 'ghost'"
-        :color="modelValue === 'public' ? 'blue' : 'gray'"
-        @click="updateValue('public')"
-      >
-        Public
-      </UButton>
-      <UButton
-        :variant="modelValue === 'members' ? 'solid' : 'ghost'"
-        :color="modelValue === 'members' ? 'blue' : 'gray'"
+        :variant="modelValue === 'members' ? 'solid' : 'outline'"
+        :color="modelValue === 'members' ? 'blue' : 'neutral'"
         @click="updateValue('members')"
+        class="privacy-toggle-btn"
+        :class="{ 'is-selected': modelValue === 'members' }"
       >
         Members
       </UButton>
       <UButton
-        :variant="modelValue === 'private' ? 'solid' : 'ghost'"
-        :color="modelValue === 'private' ? 'blue' : 'gray'"
+        :variant="modelValue === 'private' ? 'solid' : 'outline'"
+        :color="modelValue === 'private' ? 'blue' : 'neutral'"
         @click="updateValue('private')"
+        class="privacy-toggle-btn"
+        :class="{ 'is-selected': modelValue === 'private' }"
       >
         Private
       </UButton>
@@ -31,17 +28,43 @@
 const props = defineProps({
   modelValue: {
     type: String,
-    default: 'members'
+    default: "members",
   },
   label: {
     type: String,
-    default: 'Privacy'
-  }
-})
+    default: "Privacy",
+  },
+});
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(["update:modelValue"]);
 
 const updateValue = (value) => {
-  emit('update:modelValue', value)
-}
+  emit("update:modelValue", value);
+};
 </script>
+
+<style scoped>
+/* Unselected buttons - lighter background for visibility */
+:deep(.privacy-toggle-btn:not(.is-selected)) {
+  background-color: rgb(68 64 60) !important; /* stone-700 */
+  border-color: rgb(87 83 78) !important; /* stone-600 */
+  color: rgb(214 211 209) !important; /* stone-300 */
+}
+
+:deep(.privacy-toggle-btn:not(.is-selected):hover) {
+  background-color: rgb(87 83 78) !important; /* stone-600 */
+  border-color: rgb(120 113 108) !important; /* stone-500 */
+}
+
+/* Selected buttons - bright blue to stand out */
+:deep(.privacy-toggle-btn.is-selected) {
+  background-color: rgb(59 130 246) !important; /* blue-500 */
+  border-color: rgb(59 130 246) !important; /* blue-500 */
+  color: white !important;
+}
+
+:deep(.privacy-toggle-btn.is-selected:hover) {
+  background-color: rgb(37 99 235) !important; /* blue-600 */
+  border-color: rgb(37 99 235) !important; /* blue-600 */
+}
+</style>