fix: update downlaod button color (#1126)

graasp · Nov 28, 2024 · 31dfb78 · 31dfb78
1 parent ee588d1
commit 31dfb78
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/buttons/DownloadButton/DownloadButton.tsx b/src/buttons/DownloadButton/DownloadButton.tsx
@@ -11,17 +11,17 @@ import {
 
 import { MouseEventHandler } from 'react';
 
-import { DEFAULT_LOADER_SIZE } from '@/constants.js';
 import {
   ActionButton,
   ActionButtonVariant,
-  ColorVariants,
   ColorVariantsType,
   TooltipPlacement,
 } from '@/types.js';
 
 import { useButtonColor } from '../hooks.js';
 
+export const DEFAULT_LOADER_SIZE = 24;
+
 export type DownloadButtonProps = {
   ariaLabel: string;
   /**
@@ -36,7 +36,7 @@ export type DownloadButtonProps = {
   /**
    * CircularProgress's size
    */
-  loaderSize: number;
+  loaderSize?: number;
   /**
    * Tooltip's title
    */
@@ -52,7 +52,7 @@ const DownloadButton = ({
   ariaLabel = 'download',
   handleDownload,
   isLoading = false,
-  color = ColorVariants.Primary,
+  color,
   loaderSize = DEFAULT_LOADER_SIZE,
   title = 'Download',
   placement = 'bottom',
@@ -74,18 +74,20 @@ const DownloadButton = ({
       );
     case ActionButton.ICON_BUTTON:
     default:
-      if (isLoading) {
-        return <CircularProgress color={color} size={loaderSize} />;
-      }
       return (
         <Tooltip title={title} placement={placement}>
           <span>
             <IconButton
+              disabled={isLoading}
               color={color}
               onClick={handleDownload}
               aria-label={ariaLabel}
             >
-              {icon}
+              {isLoading ? (
+                <CircularProgress color={color} size={loaderSize} />
+              ) : (
+                icon
+              )}
             </IconButton>
           </span>
         </Tooltip>

diff --git a/src/constants.ts b/src/constants.ts
@@ -6,7 +6,6 @@ export const DRAWER_HEADER_HEIGHT = 55;
 
 export const DEFAULT_THUMBNAIL_SIZE = ThumbnailSize.Small;
 export const DEFAULT_LINK_SHOW_BUTTON = true;
-export const DEFAULT_LOADER_SIZE = 20;
 
 export const UNEXPECTED_ERROR_MESSAGE = 'An unexpected error occurred';
 export const SMALL_AVATAR_SIZE = 40;