fix: fixes for updated common layout and navbar (#7)

fix: fixes for updated common layout and navbar
pixel-point · Nov 22, 2024 · 23ba227 · 23ba227
1 parent e7b9499
commit 23ba227
Show file tree

Hide file tree

Showing 155 changed files with 2,393 additions and 933 deletions.
diff --git a/packages/canary/configs/tailwind.ts b/packages/canary/configs/tailwind.ts
@@ -118,6 +118,9 @@ export default {
           8: 'hsl(var(--background-08))',
           9: 'hsl(var(--background-09))',
           10: 'hsl(var(--background-10))',
+          11: 'hsl(var(--background-11))',
+          12: 'hsl(var(--background-12))',
+          13: 'hsl(var(--background-13))',
           danger: 'hsla(var(--background-danger))',
           success: 'hsla(var(--background-success))'
         },
@@ -144,12 +147,17 @@ export default {
           6: 'hsl(var(--icon-06))',
           7: 'hsl(var(--icon-07))',
           8: 'hsl(var(--icon-08))',
+          9: 'hsl(var(--icon-09))',
+          10: 'hsl(var(--icon-10))',
           danger: 'hsl(var(--icon-danger))',
           alert: 'hsl(var(--icon-alert))',
           success: 'hsl(var(--icon-success))',
           accent: 'hsl(var(--icon-accent))'
         }
       },
+      letterSpacing: {
+        tight: '-0.02em'
+      },
       boxShadow: {
         1: '0px 8px 16px rgba(0, 0, 0, 0.30)',
         2: '0px 8px 8px rgba(0, 0, 0, 0.60)',

diff --git a/packages/canary/src/components/alert-dialog.tsx b/packages/canary/src/components/alert-dialog.tsx
@@ -10,37 +10,66 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal
 
+interface AlertDialogOverlayProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> {
+  onClick?: () => void
+}
+
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+  AlertDialogOverlayProps
+>(({ className, onClick, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      'bg-background-7/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50',
       className
     )}
     {...props}
     ref={ref}
+    onClick={onClick}
   />
 ))
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
+interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+  onOverlayClick?: () => void
+}
+
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
+  AlertDialogContentProps
+>(({ className = 'max-w-lg', children, onOverlayClick, ...props }, ref) => {
+  const mainContent: React.ReactNode[] = []
+  let footer: React.ReactNode = null
+
+  React.Children.forEach(children, child => {
+    if (React.isValidElement(child) && child.type === AlertDialogFooter) {
+      footer = child
+    } else {
+      mainContent.push(child)
+    }
+  })
+
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay onClick={onOverlayClick} />
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-background-1 shadow-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 flex w-full translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-[0.625rem] border duration-200',
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn('flex flex-col gap-y-4 overflow-y-auto p-5', footer ? 'max-h-[calc(100%-65px)]' : 'max-h-full')}
+        >
+          {mainContent}
+        </div>
+        {footer}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  )
+})
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -49,15 +78,26 @@ const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDiv
 AlertDialogHeader.displayName = 'AlertDialogHeader'
 
 const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+  <div
+    className={cn(
+      'bg-background-2 border-borders-1 relative mt-auto flex h-fit flex-col-reverse gap-x-4 border-t px-5 py-4 sm:flex-row sm:justify-end',
+      'before:from-background-1 before:pointer-events-none before:absolute before:inset-x-0 before:-top-px before:h-3 before:-translate-y-full before:bg-gradient-to-t before:to-transparent',
+      className
+    )}
+    {...props}
+  />
 )
 AlertDialogFooter.displayName = 'AlertDialogFooter'
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-foreground-1 text-xl font-semibold tracking-tight', className)}
+    {...props}
+  />
 ))
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 

diff --git a/packages/canary/src/components/alert.tsx b/packages/canary/src/components/alert.tsx
diff --git a/packages/canary/src/components/button.tsx b/packages/canary/src/components/button.tsx
@@ -12,11 +12,12 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'text-foreground-8 hover:bg-background-4 hover:text-foreground-1',
         link: 'text-primary underline-offset-4 hover:underline',
+        link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
         split: 'flex items-center gap-1.5 border p-0',
         'gradient-border': 'bg-background-2 text-foreground-1 hover:bg-background-8',
         custom: ''
@@ -28,7 +29,8 @@ const buttonVariants = cva(
         lg: 'h-10 px-8',
         icon: 'size-8',
         sm_icon: 'size-7',
-        xs_split: 'h-auto p-0 text-xs font-medium'
+        xs_split: 'h-auto p-0 text-xs font-medium',
+        custom: ''
       },
       borderRadius: {
         default: '',

diff --git a/packages/canary/src/components/calendar.tsx b/packages/canary/src/components/calendar.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { DayPicker } from 'react-day-picker'
-import type { DateRange } from 'react-day-picker'
+import { DayPicker, type DateRange } from 'react-day-picker'
 
 import { buttonVariants } from '@/components/button'
 import { cn } from '@/lib/utils'

diff --git a/packages/canary/src/components/dropdown-menu.tsx b/packages/canary/src/components/dropdown-menu.tsx
@@ -17,7 +17,7 @@ const DropdownMenuTrigger = React.forwardRef<
   <DropdownMenuPrimitive.Trigger
     ref={ref}
     className={cn(
-      'ring-offset-background outline-none focus:ring-2 focus:ring-offset-2 [&>svg.chevron-down]:duration-100 [&>svg.chevron-down]:ease-in-out [&>svg.chevron-down]:data-[state=open]:rotate-180',
+      'ring-offset-background group outline-none focus:ring-2 focus:ring-offset-2 [&>svg.chevron-down]:duration-100 [&>svg.chevron-down]:ease-in-out [&>svg.chevron-down]:data-[state=open]:rotate-180',
       { 'flex cursor-pointer items-center border-l border-inherit px-2.5 py-0.5 outline-none': insideSplitButton },
       className
     )}
@@ -86,6 +86,7 @@ const DropdownMenuContent = React.forwardRef<
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
+      onCloseAutoFocus={e => e.preventDefault()}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
@@ -101,7 +102,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'text-foreground-8 focus:bg-background-4 focus:text-primary relative flex cursor-pointer select-none items-center rounded-sm px-2 py-[7px] text-sm outline-none transition-colors',
+      'text-foreground-8 focus:bg-background-4 focus:text-primary relative flex cursor-pointer select-none items-center rounded px-2 py-[7px] text-sm outline-none transition-colors',
+      'data-[highlighted]:bg-background-4',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
@@ -124,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex h-4 w-4 items-center justify-center rounded-sm border">
-      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex h-full w-full items-center justify-center">
-        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
+    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
+      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
+        <Icon className="h-[7px] text-icons-5" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>