refactor(web): shadcn styles for consistency

This commit is contained in:
Pujit Mehrotra
2024-10-17 09:33:33 -04:00
parent 84fe7f6df6
commit 1c4506cf50
4 changed files with 9 additions and 11 deletions

View File

@@ -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">

View File

@@ -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,
)"
>

View File

@@ -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 />

View File

@@ -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,
)"
>