feat: update UI

Author: hoangdevnull

apps/web/src/app/page.tsx

@@ -1,10 +1,8 @@
 'use client';
 
 import {
-  AlertCircleIcon,
   Autocomplete,
   Button,
-  FeaturedIcon,
   HStack,
   Modal,
   ModalAction,
@@ -88,11 +86,6 @@ export default function Page() {
         <div className="flex gap-4">
           <Modal trigger={<Button>Show Modal</Button>}>
             <ModalHeader
-              icon={
-                <FeaturedIcon variant="outline" color="brand" size="md">
-                  <AlertCircleIcon />
-                </FeaturedIcon>
-              }
               title="Blog post published"
               description="This blog post has been published. Team members will be able to edit this post and republish changes."
             />

apps/web/src/stories/floating-tooltip.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta = {
       control: { type: 'text' },
     },
     theme: {
-      options: ['light', 'dark'],
+      options: ['default', 'light', 'dark'],
       control: { type: 'select' },
     },
     arrow: {
@@ -52,7 +52,7 @@ const meta: Meta = {
     title: 'This is a tooltip',
     content:
       'FloatingTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.',
-    theme: 'light',
+    theme: 'default',
     arrow: true,
     position: 'top',
   },
@@ -70,13 +70,7 @@ const DefaultTemplate: StoryFn<FloatingTooltipProps> = (args) => {
   return (
     <EnhancedView prop="Default">
       <FloatingTooltip {...args}>
-        <div
-          style={{
-            width: 300,
-            height: 300,
-            background: '#f5f5f5',
-          }}
-        />
+        <div className="bg-background-light h-[300px] w-[300px]" />
       </FloatingTooltip>
     </EnhancedView>
   );

apps/web/src/stories/modal.stories.tsx

@@ -127,11 +127,6 @@ const DefaultTemplate: StoryFn<ModalProps> = ({ align, ...args }: any) => {
         <Modal trigger={<Button>Show Modal</Button>} {...args}>
           <ModalHeader
             align={align}
-            icon={
-              <FeaturedIcon variant="outline" color="brand" size="md">
-                <AlertCircleIcon />
-              </FeaturedIcon>
-            }
             title="Blog post published"
             description="This blog post has been published. Team members will be able to edit this post and republish changes."
           />

apps/web/src/stories/pagination.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta = {
     total: 10,
     siblings: 1,
     boundaries: 1,
+    withEdges: false,
     withControls: true,
     shape: 'square',
   },

apps/web/src/stories/tooltip.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta = {
       control: { type: 'select' },
     },
     theme: {
-      options: ['light', 'dark'],
+      options: ['default', 'light', 'dark'],
       control: { type: 'select' },
     },
     arrow: {
@@ -50,8 +50,8 @@ const meta: Meta = {
     title: 'This is a tooltip',
     content:
       'Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.',
-    delayDuration: 300,
-    theme: 'light',
+    delayDuration: 200,
+    theme: 'default',
     arrow: true,
     align: 'center',
     side: 'top',

packages/ui/src/components/alert/__tests__/alert.test.tsx

@@ -49,7 +49,7 @@ const CircleProgress = React.forwardRef<SVGCircleElement, CircleProps>(
         strokeWidth={thickness}
         strokeDasharray={strokeDasharray}
         strokeDashoffset={strokeDashoffset}
-        className={cn('stroke-brand-600 transition-all duration-700 ease-in-out', className)}
+        className={cn('stroke-button transition-all duration-700 ease-in-out', className)}
         {...props}
       />
     );
@@ -102,7 +102,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
       <div className={cn('relative w-fit', className)} ref={ref} {...props}>
         <svg width={size} height={size} fill="none">
           <g className="origin-center -rotate-90">
-            <CircleTrack r={r} thickness={`${thickness}px`} className="text-background-quaternary" />
+            <CircleTrack r={r} thickness={`${thickness}px`} className="text-background-light" />
             <CircleProgress r={r} value={value} thickness={`${thickness}px`} />
           </g>
         </svg>

packages/ui/src/components/alert/alert.tsx

@@ -94,7 +94,7 @@ const HalfCircularProgress = forwardRef<ElementRef<'div'>, HalfCircularProgressP
             d={backgroundArc}
             fill="none"
             stroke="currentColor"
-            className="text-background-quaternary"
+            className="text-background-light"
             strokeWidth={thickness}
             strokeLinecap="round"
           />
@@ -106,7 +106,7 @@ const HalfCircularProgress = forwardRef<ElementRef<'div'>, HalfCircularProgressP
             strokeLinecap="round"
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
-            className={cn('stroke-brand-600 transition-all duration-700 ease-in-out')}
+            className={cn('stroke-button transition-all duration-700 ease-in-out')}
           />
         </svg>