From 7f328bfe6202ed2a14c6c65f8c248cdf49aa3631 Mon Sep 17 00:00:00 2001
From: rohan-chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Thu, 16 Nov 2023 12:51:10 +0530
Subject: [PATCH] feat: show red spinner on danger buttons when isLoading

---
 frontend/components/common/Button.tsx  |  4 +++-
 frontend/components/common/Spinner.tsx | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/components/common/Button.tsx b/frontend/components/common/Button.tsx
index fb84f1fc5..a943ebe8d 100644
--- a/frontend/components/common/Button.tsx
+++ b/frontend/components/common/Button.tsx
@@ -67,6 +67,8 @@ export function Button(buttonProps: ButtonProps) {
     />
   )
 
+  const spinnerColor = variant === 'danger' ? 'red' : 'emerald'
+
   return (
     <button
       {...buttonProps}
@@ -74,7 +76,7 @@ export function Button(buttonProps: ButtonProps) {
       disabled={buttonProps.disabled || isLoading}
     >
       {!isLoading && arrow === 'left' && arrowIcon}
-      {isLoading && <Spinner size={'sm'} />}
+      {isLoading && <Spinner size={'sm'} color={spinnerColor} />}
       {children}
       {!isLoading && arrow === 'right' && arrowIcon}
     </button>
diff --git a/frontend/components/common/Spinner.tsx b/frontend/components/common/Spinner.tsx
index 684f896f6..d93cf0558 100644
--- a/frontend/components/common/Spinner.tsx
+++ b/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>