refactor(ui): adjust global navigation bar style (#13419)

### What problem does this PR solve? Renovate global navigation bar, align styles to the design. (May causes minor layout issues in sub-pages, will check and fix soon) ### Type of change - [x] Refactoring
2026-07-14 00:48:26 +08:00 · 2026-03-05 20:47:29 +08:00
parent 9e0e128ce5
commit ef4cbe72a3
45 changed files with 1334 additions and 1250 deletions
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -4,40 +4,57 @@ import * as React from 'react';

 import { cn } from '@/lib/utils';
 import { LucideLoader2, Plus } from 'lucide-react';
+import { Link, LinkProps } from 'react-router';

 const buttonVariants = cva(
  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',
+    'disabled:pointer-events-none disabled:opacity-50 rounded border-0.5 border-transparent',
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
  ),
  {
    variants: {
      variant: {
+        // Solid variant series:
+        // Button has its own background color, may have borders
        default:
          'bg-text-primary text-bg-base shadow-xs hover:bg-text-primary/90 focus-visible:bg-text-primary/90',

+        secondary: `
+          bg-bg-card
+          hover:text-text-primary hover:bg-border-button
+          focus-visible:text-text-primary focus-visible:bg-border-button
+        `,
+
+        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
+        `,
+
+        accent: `
+          bg-accent-primary text-white
+          hover:bg-accent-primary/90 focus-visible:bg-accent-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 variant series
+        // Button has transparent or greyish background, may have borders
        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',
+        `, // light: bg=transparent, dark: bg-input

-        ghost: `
-          text-text-secondary
-          hover:bg-border-button hover:text-text-primary
-          focus-visible:text-text-primary focus-visible:bg-border-button
+        dashed: `
+          text-text-secondary border-border-button border-dashed
+          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
        `,

-        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-border-button hover:bg-accent',
-
        transparent: `
          text-text-secondary bg-transparent border-0.5 border-border-button
          hover:text-text-primary hover:bg-border-button
@@ -49,14 +66,12 @@ const buttonVariants = cva(
          hover:bg-state-error/10 focus-visible:bg-state-error/10
        `,

-        accent: `
-          bg-accent-primary text-white
-          hover:bg-accent-primary/90 focus-visible:bg-accent-primary/90
-        `,
-
-        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
+        // Ghost variant series
+        // Button has transparent background, without borders
+        ghost: `
+          text-text-secondary
+          hover:bg-border-button focus-visible:bg-border-button
+          hover:text-text-primary focus-visible:text-text-primary
        `,

        delete: `
@@ -64,15 +79,23 @@ const buttonVariants = cva(
          hover:bg-state-error-5 hover:text-state-error
          focus-visible:text-state-error focus-visible:bg-state-error-5
        `,
+
+        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
-        default: 'h-8 px-2.5 py-1.5 ',
-        sm: 'h-6 rounded-sm px-2',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
        auto: 'h-full px-1',
-        'icon-sm': 'size-8',
-        'icon-xs': 'size-7',
+
+        xl: 'h-12 rounded-xl px-5',
+        lg: 'h-10 rounded-lg px-4',
+        default: 'h-8 rounded px-3',
+        sm: 'h-7 rounded-sm px-2',
+        xs: 'h-6 rounded-xs px-1',
+
+        'icon-xl': 'size-12 rounded-xl',
+        'icon-lg': 'size-10 rounded-lg',
+        icon: 'size-8 rounded',
+        'icon-sm': 'size-7 rounded-sm',
+        'icon-xs': 'size-6 rounded-xs',
      },
    },
    defaultVariants: {
@@ -82,45 +105,58 @@ const buttonVariants = cva(
  },
 );

-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export type ButtonProps<IsAnchor extends boolean = false> = {
  asChild?: boolean;
+  asLink?: boolean;
  loading?: boolean;
  block?: boolean;
-}
+  disabled?: boolean;
+  dot?: boolean;
+} & VariantProps<typeof buttonVariants> &
+  (IsAnchor extends true
+    ? LinkProps
+    : React.ButtonHTMLAttributes<HTMLButtonElement>);

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
+const Button = React.forwardRef(
+  <IsAnchor extends boolean = false>(
    {
      children,
      className,
      variant,
      size,
+      dot = false,
      asChild = false,
+      asLink = false,
      loading = false,
      disabled = false,
      block = false,
      ...props
-    },
-    ref,
+    }: ButtonProps<IsAnchor>,
+    ref: React.ForwardedRef<
+      IsAnchor extends true ? HTMLAnchorElement : HTMLButtonElement
+    >,
  ) => {
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot : asLink ? Link : 'button';

    return (
      <Comp
        className={cn(
-          'bg-bg-card',
-          { 'block w-full': block },
          buttonVariants({ variant, size, className }),
+          { 'block w-full': block },
+          { relative: dot },
        )}
-        ref={ref}
+        // @ts-ignore
+        ref={ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>}
        disabled={loading || disabled}
        {...props}
      >
-        {loading && <LucideLoader2 className="animate-spin" />}
-        {children}
+        <>
+          {dot && (
+            <span className="absolute size-[6px] rounded-full -right-[3px] -top-[3px] bg-state-error animate" />
+          )}
+          {loading && <LucideLoader2 className="animate-spin" />}
+          {children}
+        </>
      </Comp>
    );
  },
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -30,15 +30,12 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = 'CardHeader';

 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { as?: React.ElementType }
+>(({ className, as: As = 'div', ...props }, ref) => (
+  <As
    ref={ref}
-    className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
-      className,
-    )}
+    className={cn('text-2xl leading-normal font-medium', className)}
    {...props}
  />
 ));
@@ -50,7 +47,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-sm text-text-secondary', className)}
    {...props}
  />
 ));
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      'peer size-4 shrink-0 rounded-sm border border-text-secondary outline-0 transition-colors bg-bg-component',
+      'peer size-4 shrink-0 rounded-2xs border border-text-disabled outline-0 transition-colors bg-transparent',
      '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',
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -84,8 +84,12 @@ const DropdownMenuItem = React.forwardRef<
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'ps-8',
+      'relative flex cursor-default select-none items-center gap-2',
+      'rounded-sm px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors',
+      'focus:bg-bg-card focus:text-text-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
      justifyBetween && 'flex justify-between',
      className,
    )}
--- a/web/src/components/ui/skeleton.tsx
+++ b/web/src/components/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      className={cn('animate-pulse rounded-md bg-bg-card', className)}
      {...props}
    />
  );
@@ -26,12 +26,10 @@ function ParagraphSkeleton() {

 function CardSkeleton() {
  return (
-    <div className="flex flex-col space-y-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
+    <div className="w-64">
+      <Skeleton className="mb-3 h-28 rounded-xl" />
+      <Skeleton className="mb-2 h-4" />
+      <Skeleton className="h-4 w-4/5" />
    </div>
  );
 }