Adjust styles to match the design system

web/src/components/empty/empty.tsx

@@ -2,6 +2,9 @@ import { cn } from '@/lib/utils';
 import { t } from 'i18next';
 import { useIsDarkTheme } from '../theme-provider';
 
+import noDataIcon from './no data bri.svg';
+import noDataIconDark from './no data.svg';
+
 type EmptyProps = {
   className?: string;
   children?: React.ReactNode;
@@ -10,6 +13,14 @@ type EmptyProps = {
 const EmptyIcon = () => {
   const isDarkTheme = useIsDarkTheme();
 
+  return (
+    <img
+      className="h-20"
+      src={isDarkTheme ? noDataIconDark : noDataIcon}
+      alt={t('common.noData')}
+    />
+  );
+
   return (
     <svg
       width="184"
@@ -67,13 +78,14 @@ const Empty = (props: EmptyProps) => {
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center text-center gap-3',
+        'flex flex-col justify-center items-center text-center gap-2',
         className,
       )}
     >
       <EmptyIcon />
+
       {!children && (
-        <div className="empty-text mt-4 text-text-secondary">
+        <div className="empty-text text-text-secondary">
           {t('common.noData')}
         </div>
       )}

web/src/components/spotlight.tsx

@@ -1,4 +1,5 @@
 import { useIsDarkTheme } from '@/components/theme-provider';
+import { cn } from '@/lib/utils';
 import { parseColorToRGB } from '@/utils/common-util';
 import React from 'react';
 
@@ -36,7 +37,7 @@ const Spotlight: React.FC<SpotlightProps> = ({
       : '194, 221, 243';
   return (
     <div
-      className={`absolute inset-0  opacity-80 ${className} rounded-lg`}
+      className={cn('absolute inset-0 opacity-80 rounded-lg', className)}
       style={{
         backdropFilter: 'blur(30px)',
         zIndex: -1,

web/src/components/ui/avatar.tsx

@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'flex h-full w-full items-center justify-center rounded-full bg-bg-member',
       className,
     )}
     {...props}

web/src/components/ui/badge.tsx

@@ -4,16 +4,18 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors outline-none focus:outline-none',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+          'border-transparent bg-bg-primary text-text-primary hover:bg-primary/80',
         secondary:
-          'border-transparent bg-bg-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
+          'border-transparent bg-bg-card text-text-secondary rounded-md',
+        success:
+          'border-transparent bg-state-success/5 text-state-success rounded-md',
         destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+          'border-transparent bg-state-error/5 text-state-error rounded-md',
         outline: 'text-foreground',
       },
     },

web/src/components/ui/button.tsx

@@ -3,28 +3,56 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
-import { Loader2, Plus } from 'lucide-react';
+import { LucideLoader2, Plus } from 'lucide-react';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  cn(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-0',
+    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
+  ),
   {
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'bg-text-primary text-bg-base shadow-xs hover:bg-text-primary/90 focus-visible:bg-text-primary/90',
+
+        destructive: `
+          bg-state-error text-white shadow-xs
+          hover:bg-state-error/90 focus-visible:ring-state-error/20 dark:focus-visible:ring-state-error/40
+        `,
+        outline: `
+          text-text-secondary bg-bg-input border-0.5 border-border-button
+          hover:text-text-primary hover:bg-border-button hover:border-border-default
+          focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
+        `,
         secondary:
           'bg-bg-input text-text-primary shadow-xs hover:bg-bg-input/80 border border-border-button',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+
+        ghost: `
+          text-text-secondary
+          hover:bg-border-button hover:text-text-primary
+          focus-visible:text-text-primary focus-visible:bg-border-button
+        `,
+
         link: 'text-primary underline-offset-4 hover:underline',
         icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
         dashed: 'border border-dashed border-input hover:bg-accent',
-        transparent: 'bg-transparent hover:bg-accent border',
-        danger: 'bg-transparent border border-state-error text-state-error',
+
+        transparent: `
+          text-text-secondary bg-transparent border-0.5 border-border-button
+          hover:text-text-primary hover:bg-border-button
+          focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
+        `,
+
+        danger: `
+          bg-transparent border border-state-error text-state-error
+          hover:bg-state-error/10 focus-visible:bg-state-error/10
+        `,
+
+        highlighted: `
+          bg-text-primary text-bg-base border-b-4 border-b-accent-primary
+          hover:bg-text-primary/90 focus-visible:bg-text-primary/90
+        `,
       },
       size: {
         default: 'h-8 px-2.5 py-1.5 ',
@@ -45,47 +73,49 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
+  block?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      children,
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      disabled = false,
+      block = false,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : 'button';
+
     return (
       <Comp
         className={cn(
           'bg-bg-card',
+          { 'block w-full': block },
           buttonVariants({ variant, size, className }),
         )}
         ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export const ButtonLoading = React.forwardRef<
-  HTMLButtonElement,
-  Omit<ButtonProps, 'asChild'> & { loading?: boolean }
->(
-  (
-    { className, variant, size, children, loading = false, disabled, ...props },
-    ref,
-  ) => {
-    return (
-      <Button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
         disabled={loading || disabled}
+        {...props}
       >
-        {loading && <Loader2 className="animate-spin" />}
+        {loading && <LucideLoader2 className="animate-spin" />}
         {children}
-      </Button>
+      </Comp>
     );
   },
 );
 
+Button.displayName = 'Button';
+
+export const ButtonLoading = Button;
+
 ButtonLoading.displayName = 'ButtonLoading';
 
 export { Button, buttonVariants };

web/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      'rounded-lg border-border-button border-0.5 shadow-sm bg-bg-input transition-shadow',
       className,
     )}
     {...props}
@@ -60,7 +60,11 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div
+    ref={ref}
+    className={cn('p-6 pt-0 transition-shadow', className)}
+    {...props}
+  />
 ));
 CardContent.displayName = 'CardContent';
 

web/src/components/ui/checkbox.tsx

@@ -13,15 +13,19 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-3.5 w-3.5 shrink-0 rounded-sm border border-text-secondary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer size-4 shrink-0 rounded-sm border border-border-button outline-0 transition-colors bg-bg-component',
+      'hover:border-border-default hover:bg-border-button',
+      'focus-visible:border-border-default focus-visible:bg-border-default',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:text-text-primary data-[state=checked]:border-border-default',
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <Check className="h-3.5 w-3.5" />
+      <Check className="size-3" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

web/src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  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/50 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -38,13 +38,20 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-xl  translate-x-[-50%] translate-y-[-50%] gap-4 border bg-bg-base p-6 shadow-lg duration-200 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%] sm:rounded-lg',
+        'outline-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-bg-base p-6 shadow-lg duration-200 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%] sm:rounded-lg',
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close
+        className="
+        absolute right-4 top-4 p-2 rounded-sm opacity-70 outline-none text-text-secondary transition-colors
+        hover:bg-border-button hover:text-text-primary
+        focus-visible:bg-border-button focus-visible:text-text-primary
+        disabled:pointer-events-none data-[state=open]:bg-bg-accent data-[state=open]:text-muted-foreground
+      "
+      >
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +109,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-sm text-text-primary', className)}
     {...props}
   />
 ));