From 1c4506cf507394cd43b727335d49f32a15728189 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Thu, 17 Oct 2024 09:33:33 -0400
Subject: [PATCH] refactor(web): shadcn styles for consistency

---
 web/components/Notifications/Sidebar.vue       | 14 ++++++--------
 web/components/shadcn/select/SelectTrigger.vue |  2 +-
 web/components/shadcn/sheet/SheetTitle.vue     |  2 +-
 web/components/shadcn/tabs/TabsTrigger.vue     |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 7e69dd1bd..89f804a2a 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -56,7 +56,7 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
 
     <SheetContent
       :to="teleportTarget"
-      class="w-full overflow-y-scroll sm:max-w-[540px]"
+      class="w-full overflow-y-scroll sm:max-w-[540px] space-y-3"
     >
       <SheetHeader>
         <SheetTitle>Notifications</SheetTitle>
@@ -66,14 +66,14 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
         <div class="flex flex-row justify-between items-center flex-wrap gap-2">
           <TabsList class="ml-[1px]">
             <TabsTrigger
-              class="text-[1rem] leading-[1.3rem]"
+              class=""
               value="unread"
               @click="setFetchType(NotificationType.Unread)"
             >
               Unread
             </TabsTrigger>
             <TabsTrigger
-              class="text-[1rem] leading-[1.3rem]"
+              class=""
               value="archived"
               @="setFetchType(NotificationType.Archive)"
             >
@@ -84,7 +84,7 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
           <Button
             variant="link"
             size="sm"
-            class="text-muted-foreground text-sm p-0"
+            class="text-muted-foreground text-base p-0"
           >
             {{ `Archive All` }}
           </Button>
@@ -104,9 +104,8 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
           </Select>
         </div>
 
-        <TabsContent value="unread">
-          <ScrollArea>
-            <div
+        <TabsContent class="mt-3" value="unread">
+          <div
               v-if="notifications?.length > 0"
               class="divide-y divide-gray-200"
             >
@@ -116,7 +115,6 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
                 v-bind="notification"
               />
             </div>
-          </ScrollArea>
         </TabsContent>
 
         <TabsContent value="archived">
diff --git a/web/components/shadcn/select/SelectTrigger.vue b/web/components/shadcn/select/SelectTrigger.vue
index cce38a950..725509309 100644
--- a/web/components/shadcn/select/SelectTrigger.vue
+++ b/web/components/shadcn/select/SelectTrigger.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <SelectTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
       props.class,
     )"
   >
diff --git a/web/components/shadcn/sheet/SheetTitle.vue b/web/components/shadcn/sheet/SheetTitle.vue
index 315de682a..3cae23cba 100644
--- a/web/components/shadcn/sheet/SheetTitle.vue
+++ b/web/components/shadcn/sheet/SheetTitle.vue
@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <DialogTitle
-    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    :class="cn('text-lg font-medium text-foreground', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/web/components/shadcn/tabs/TabsTrigger.vue b/web/components/shadcn/tabs/TabsTrigger.vue
index a42dae61f..598268f76 100644
--- a/web/components/shadcn/tabs/TabsTrigger.vue
+++ b/web/components/shadcn/tabs/TabsTrigger.vue
@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-base font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       props.class,
     )"
   >