feat: show red spinner on danger buttons when isLoading

frontend/components/common/Button.tsx

@@ -67,14 +67,16 @@ export function Button(buttonProps: ButtonProps) {
     />
   )
 
+  const spinnerColor = variant === 'danger' ? 'red' : 'emerald'
+
   return (
     <button
       {...buttonProps}
       className={computedClassName}
       disabled={buttonProps.disabled || isLoading}
     >
       {!isLoading && arrow === 'left' && arrowIcon}
-      {isLoading && <Spinner size={'sm'} />}
+      {isLoading && <Spinner size={'sm'} color={spinnerColor} />}
       {children}
       {!isLoading && arrow === 'right' && arrowIcon}
     </button>

frontend/components/common/Spinner.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { color } from 'framer-motion'
 
 const SIZES = {
   sm: 'border-2 h-4 w-4',
@@ -7,16 +8,26 @@ const SIZES = {
   xl: 'border-6 h-12 w-12',
 }
 
+const COLORS = {
+  emerald: 'border-emerald-500',
+  red: 'border-red-500',
+}
+
 interface SpinnerProps {
   size: 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'emerald' | 'red'
 }
 
-export default function Spinner(props: SpinnerProps = { size: 'lg' }) {
-  const { size } = props
+export default function Spinner(props: SpinnerProps = { size: 'lg', color: 'emerald' }) {
+  const { size, color } = props
+
+  const spinnerColor = color || 'emerald'
+
   const BASE_STYLE =
-    'inline-block animate-spin rounded-full border-4 border-solid border-emerald-500 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]'
+    'inline-block animate-spin rounded-full border-4 border-solid border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]'
+
   return (
-    <div className={clsx(BASE_STYLE, SIZES[size])} role="status">
+    <div className={clsx(BASE_STYLE, SIZES[size], COLORS[spinnerColor])} role="status">
       <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
         Loading...
       </span>