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

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>
     );
   },