Redesign interface across member dashboard and events pages

The changes involve a comprehensive interface redesign across multiple
pages, including:

- Updated peer support badge with shield design
- Switched privacy toggle to use USwitch component
- Added light/dark mode support throughout
- Enhanced layout and spacing in default template
- Added series details page with timeline view
- Improved event cards and status indicators
- Refreshed member profile styles for better readability
- Introduced global cursor styling for interactive elements

app/components/PrivacyToggle.vue

@@ -1,26 +1,36 @@
 <template>
   <div class="flex items-center gap-3 text-sm">
-    <span class="text-ghost-300 font-medium">{{ label }}:</span>
-    <UButtonGroup size="sm" class="privacy-toggle-group">
-      <UButton
-        :variant="modelValue === 'members' ? 'solid' : 'outline'"
-        :color="modelValue === 'members' ? 'blue' : 'neutral'"
-        @click="updateValue('members')"
-        class="privacy-toggle-btn"
-        :class="{ 'is-selected': modelValue === 'members' }"
+    <span class="text-gray-700 dark:text-ghost-400 text-xs font-medium"
+      >{{ label }}:</span
+    >
+    <div class="flex items-center gap-2">
+      <span
+        class="text-xs transition-colors"
+        :class="
+          isPrivate
+            ? 'text-gray-500 dark:text-ghost-500'
+            : 'text-blue-600 dark:text-blue-400 font-semibold'
+        "
       >
         Members
-      </UButton>
-      <UButton
-        :variant="modelValue === 'private' ? 'solid' : 'outline'"
-        :color="modelValue === 'private' ? 'blue' : 'neutral'"
-        @click="updateValue('private')"
-        class="privacy-toggle-btn"
-        :class="{ 'is-selected': modelValue === 'private' }"
+      </span>
+      <USwitch
+        :model-value="isPrivate"
+        @update:model-value="togglePrivacy"
+        color="primary"
+        size="md"
+      />
+      <span
+        class="text-xs transition-colors"
+        :class="
+          isPrivate
+            ? 'text-blue-600 dark:text-blue-400 font-semibold'
+            : 'text-gray-500 dark:text-ghost-500'
+        "
       >
         Private
-      </UButton>
-    </UButtonGroup>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -38,33 +48,9 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const updateValue = (value) => {
-  emit("update:modelValue", value);
+const isPrivate = computed(() => props.modelValue === "private");
+
+const togglePrivacy = (value) => {
+  emit("update:modelValue", value ? "private" : "members");
 };
 </script>
-
-<style scoped>
-/* Unselected buttons - lighter background for visibility */
-:deep(.privacy-toggle-btn:not(.is-selected)) {
-  background-color: rgb(68 64 60) !important; /* ghost-700 equivalent */
-  border-color: rgb(87 83 78) !important; /* ghost-600 equivalent */
-  color: rgb(214 211 209) !important; /* ghost-300 equivalent */
-}
-
-:deep(.privacy-toggle-btn:not(.is-selected):hover) {
-  background-color: rgb(87 83 78) !important; /* ghost-600 equivalent */
-  border-color: rgb(120 113 108) !important; /* ghost-500 equivalent */
-}
-
-/* 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>