refactor(ui): update components to use rounded-lg for improved aesthe…

…tics
tszhong0411 · Jan 15, 2025 · c50b0aa · c50b0aa
1 parent 5478425
commit c50b0aa
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 36 deletions.
diff --git a/.changeset/perfect-yaks-sin.md b/.changeset/perfect-yaks-sin.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update components to use rounded-lg for improved aesthetics
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
   [
-    'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors',
+    'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors',
     'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
     'disabled:pointer-events-none disabled:opacity-50'
   ],
@@ -21,8 +21,8 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 px-3',
+        lg: 'h-11 px-8',
         icon: 'size-10'
       }
     },

diff --git a/packages/ui/src/context-menu.tsx b/packages/ui/src/context-menu.tsx
@@ -21,7 +21,7 @@ const ContextMenuSubTrigger = (props: ContextMenuSubTriggerProps) => {
   return (
     <ContextMenuPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -43,7 +43,7 @@ const ContextMenuSubContent = (props: ContextMenuSubContentProps) => {
   return (
     <ContextMenuPrimitive.SubContent
       className={cn(
-        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-lg',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=top]:slide-in-from-bottom-2',
@@ -66,7 +66,7 @@ const ContextMenuContent = (props: ContextMenuContentProps) => {
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         className={cn(
-          'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           'data-[side=top]:slide-in-from-bottom-2',
@@ -91,7 +91,7 @@ const ContextMenuItem = (props: ContextMenuItemProps) => {
   return (
     <ContextMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
@@ -110,7 +110,7 @@ const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
   return (
     <ContextMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
@@ -136,7 +136,7 @@ const ContextMenuRadioItem = (props: ContextMenuRadioItemProps) => {
   return (
     <ContextMenuPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className

diff --git a/packages/ui/src/data-table.tsx b/packages/ui/src/data-table.tsx
@@ -55,7 +55,7 @@ const DataTable = <TData,>(props: DataTableProps<TData>) => {
   return (
     <div className='w-full space-y-2.5' {...rest}>
       {children}
-      <div className='rounded-md border'>
+      <div className='rounded-lg border'>
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -527,7 +527,7 @@ const DataTableSkeleton = (props: DataTableSkeletonProps) => {
         <Skeleton className='ml-auto hidden h-8 w-[4.5rem] lg:flex' />
       </div>
       {/* Table skeleton */}
-      <div className='rounded-md border'>
+      <div className='rounded-lg border'>
         <Table>
           <TableHeader>
             {range(1).map((i) => (

diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
@@ -21,7 +21,7 @@ const DropdownMenuSubTrigger = (props: DropdownMenuSubTriggerProps) => {
   return (
     <DropdownMenuPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -43,7 +43,7 @@ const DropdownMenuSubContent = (props: DropdownMenuSubContentProps) => {
   return (
     <DropdownMenuPrimitive.SubContent
       className={cn(
-        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-lg',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=top]:slide-in-from-bottom-2',
@@ -67,7 +67,7 @@ const DropdownMenuContent = (props: DropdownMenuContentProps) => {
       <DropdownMenuPrimitive.Content
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           'data-[side=top]:slide-in-from-bottom-2',
@@ -92,7 +92,7 @@ const DropdownMenuItem = (props: DropdownMenuItemProps) => {
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
@@ -111,7 +111,7 @@ const DropdownMenuCheckboxItem = (props: DropdownMenuCheckboxItemProps) => {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
@@ -137,7 +137,7 @@ const DropdownMenuRadioItem = (props: DropdownMenuRadioItemProps) => {
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className

diff --git a/packages/ui/src/files.tsx b/packages/ui/src/files.tsx
@@ -21,7 +21,7 @@ const Files = (props: FilesProps) => {
   const { children, className, ...rest } = props
 
   return (
-    <div className={cn('not-prose bg-card rounded-md border p-2', className)} {...rest}>
+    <div className={cn('not-prose bg-card rounded-lg border p-2', className)} {...rest}>
       {children}
     </div>
   )

diff --git a/packages/ui/src/menubar.tsx b/packages/ui/src/menubar.tsx
@@ -18,7 +18,7 @@ const Menubar = (props: MenubarProps) => {
   return (
     <MenubarPrimitive.Root
       className={cn(
-        'bg-background flex h-10 items-center space-x-1 rounded-md border p-1',
+        'bg-background flex h-10 items-center space-x-1 rounded-lg border p-1',
         className
       )}
       {...rest}
@@ -34,7 +34,7 @@ const MenubarTrigger = (props: MenubarTriggerProps) => {
   return (
     <MenubarPrimitive.Trigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none',
+        'flex cursor-default select-none items-center rounded-md px-3 py-1.5 text-sm font-medium outline-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         className
@@ -54,7 +54,7 @@ const MenubarSubTrigger = (props: MenubarSubTriggerProps) => {
   return (
     <MenubarPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -76,7 +76,7 @@ const MenubarSubContent = (props: MenubarSubContentProps) => {
   return (
     <MenubarPrimitive.SubContent
       className={cn(
-        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-lg',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=top]:slide-in-from-bottom-2',
@@ -102,7 +102,7 @@ const MenubarContent = (props: MenubarContentProps) => {
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 min-w-48 overflow-hidden rounded-lg border p-1 shadow-md',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           'data-[side=top]:slide-in-from-bottom-2',
@@ -127,7 +127,7 @@ const MenubarItem = (props: MenubarItemProps) => {
   return (
     <MenubarPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
@@ -146,7 +146,7 @@ const MenubarCheckboxItem = (props: MenubarCheckboxItemProps) => {
   return (
     <MenubarPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
@@ -172,7 +172,7 @@ const MenubarRadioItem = (props: MenubarRadioItemProps) => {
   return (
     <MenubarPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className

diff --git a/packages/ui/src/navigation-menu.tsx b/packages/ui/src/navigation-menu.tsx
@@ -93,7 +93,7 @@ const NavigationMenuViewport = (props: NavigationMenuViewportProps) => {
     <div className={cn('absolute left-0 top-full flex justify-center')}>
       <NavigationMenuPrimitive.Viewport
         className={cn(
-          'origin-top-center bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg duration-200 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border shadow-lg duration-200 md:w-[var(--radix-navigation-menu-viewport-width)]',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-90',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           className

diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = (props: SelectTriggerProps) => {
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        'border-input bg-background ring-offset-background flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm',
+        'border-input bg-background ring-offset-background flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm',
         'placeholder:text-muted-foreground',
         'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
@@ -72,7 +72,7 @@ const SelectContent = (props: SelectContentProps) => {
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         className={cn(
-          'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           'data-[side=top]:slide-in-from-bottom-2',
@@ -123,7 +123,7 @@ const SelectItem = (props: SelectItemProps) => {
   return (
     <SelectPrimitive.Item
       className={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className

diff --git a/packages/ui/src/skeleton.tsx b/packages/ui/src/skeleton.tsx
@@ -5,7 +5,7 @@ type SkeletonProps = React.ComponentProps<'div'>
 const Skeleton = (props: SkeletonProps) => {
   const { className, ...rest } = props
 
-  return <div className={cn('bg-muted animate-pulse rounded-md', className)} {...rest} />
+  return <div className={cn('bg-muted animate-pulse rounded-lg', className)} {...rest} />
 }
 
 export { Skeleton }
diff --git a/packages/ui/src/tabs.tsx b/packages/ui/src/tabs.tsx
@@ -13,7 +13,7 @@ const TabsList = (props: TabsListProps) => {
   return (
     <TabsPrimitive.List
       className={cn(
-        'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+        'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-lg p-1',
         className
       )}
       {...rest}
@@ -29,7 +29,7 @@ const TabsTrigger = (props: TabsTriggerProps) => {
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all',
+        'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all',
         'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 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',

diff --git a/packages/ui/src/textarea.tsx b/packages/ui/src/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = (props: TextareaProps) => {
   return (
     <TextareaAutosize
       className={cn(
-        'border-input bg-background ring-offset-background flex min-h-20 w-full rounded-md border px-3 py-2',
+        'border-input bg-background ring-offset-background flex min-h-20 w-full rounded-lg border px-3 py-2',
         'placeholder:text-muted-foreground',
         'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',

diff --git a/packages/ui/src/toggle.tsx b/packages/ui/src/toggle.tsx
@@ -5,7 +5,7 @@ import { cn } from '@tszhong0411/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const toggleVariants = cva(
-  'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

diff --git a/packages/ui/src/tooltip.tsx b/packages/ui/src/tooltip.tsx
@@ -16,7 +16,7 @@ const TooltipContent = (props: TooltipContentProps) => {
     <TooltipPrimitive.Content
       sideOffset={sideOffset}
       className={cn(
-        'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+        'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 z-50 overflow-hidden rounded-lg border px-3 py-1.5 text-sm shadow-md',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=top]:slide-in-from-bottom-2',
         'data-[side=right]:slide-in-from-left-2',