improve the displaying when the button is disabled

Author: medyo

src/components/Elements/Button/Button.css

@@ -17,6 +17,10 @@
     color: var(--button-hover-text-color);
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
   &.small {
     padding: 0.3rem 0.75rem;
     font-size: 0.875rem;
@@ -51,6 +55,12 @@
   padding: 0;
   padding: 0;
   font-size: 1.1em;
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
+
   &.small {
     min-width: 30px;
     height: 30px;

src/components/Elements/Button/Button.tsx

@@ -27,7 +27,13 @@ export const Button = ({
 }: ButtonProps) => {
   return (
     <button
-      className={clsx('button', isLoading && 'loading', sizes[size], className)}
+      className={clsx(
+        'button',
+        isLoading && 'loading',
+        sizes[size],
+        className,
+        isLoading && 'disabled'
+      )}
       onClick={onClick}
       disabled={isLoading}>
       {isLoading ? <Spinner size="small" /> : startIcon}

src/components/Elements/Button/CircleButton.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { Spinner } from '../Spinner'
 
 const sizes = {
   small: 'small',
@@ -13,6 +14,7 @@ const variants = {
 
 type CircleButtonProps = {
   className?: string
+  isLoading?: boolean
   onClick: () => void
   size?: keyof typeof sizes
   variant?: keyof typeof variants
@@ -23,14 +25,22 @@ export const CircleButton = ({
   size = 'medium',
   variant = 'primary',
   onClick,
+  isLoading,
   className,
   children,
 }: CircleButtonProps) => {
   return (
     <button
-      className={clsx('circle-button', sizes[size], variants[variant], className)}
+      disabled={isLoading}
+      className={clsx(
+        'circle-button',
+        sizes[size],
+        variants[variant],
+        className,
+        isLoading && 'disabled'
+      )}
       onClick={onClick}>
-      {children}
+      {isLoading ? <Spinner size="small" /> : children}
     </button>
   )
 }