Merge pull request #93 from Synthetixio/fix/improve-spinner

fix: improve Spinner coloring and Button alignments
Synthetixio · Jun 13, 2022 · 56051d6 · 56051d6
2 parents 9b2aa13 + ae8af2a
commit 56051d6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -52,14 +52,21 @@ export const Button: React.FC<ButtonProps> = ({
       disabled={disabled || loading}
       {...props}
     >
-      <div className='ui-block ui-gradient-primary ui-bg-clip-text ui-my-auto'>
+      <div className='ui-flex ui-items-center'>
         {loading && (
           <Spinner
             className={clsx('ui-mr-2', { 'ui-opacity-75': disabled }, spinnerClassName)}
+            disabled={disabled}
             variant={variant}
           />
         )}
-        {children}
+        <div
+          className={clsx('ui-block ui-my-auto', {
+            'ui-gradient-primary ui-bg-clip-text': !disabled
+          })}
+        >
+          {children}
+        </div>
       </div>
     </button>
   );

diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
@@ -4,18 +4,20 @@ import { ButtonVariant } from 'components/Button/Button';
 export interface SpinnerProps {
   variant?: ButtonVariant;
   className?: string;
+  disabled?: boolean;
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({ variant = 'default', className }) => {
+export const Spinner: React.FC<SpinnerProps> = ({ variant = 'default', disabled, className }) => {
   return (
     <i
       className={clsx(
         'ui-flex ui-w-5 ui-h-5 ui-rounded-full ui-bg-transparent ui-border-2 ui-border-solid ui-border-black-100 dark:ui-border-gray-400 ui-animate-spin',
         {
           'ui-border-t-green dark:ui-border-t-green':
             variant === 'default' || variant === 'outline',
-          'ui-border-t-navy dark:ui-border-t-navy': variant === 'secondary',
-          'ui-border-t-purple dark:ui-border-t-purple': variant === 'purple'
+          'ui-border-t-navy-light-2 dark:ui-border-t-navy-light-2': variant === 'secondary',
+          'ui-border-t-pink-dark-2 dark:ui-border-t-pink-dark-2': variant === 'purple',
+          'ui-border-t-disabled dark:ui-border-t-disabled': disabled
         },
         className
       )}

diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
@@ -50,6 +50,10 @@ const TransactionDialogContextProvider: React.FC<{
     }
   }, [txHash, provider]);
 
+  useEffect(() => {
+    if (!visible) setTxHash(undefined);
+  }, [visible]);
+
   const stateText: Record<TxState, Record<string, string>> = {
     confirmed: {
       tile: 'Transaction Confirmed',