PEAR-2290: Fix for Download icon on button off center (#1420)

Co-authored-by: Paribartan Dhakal <paribartandhakal@Paribartans-CTDS-MacBook-Pro.local>
NCI-GDC · Jan 15, 2025 · 32271ca · 32271ca
1 parent d72480e
commit 32271ca
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git a/packages/portal-proto/src/components/tailwindComponents.ts b/packages/portal-proto/src/components/tailwindComponents.ts
@@ -41,19 +41,6 @@ h-full
 bg-accent-cool-lighter
 rounded-sm`;
 
-export const DownloadButton = tw.button`
-    px-1.5
-    min-h-[28px]
-    min-w-10
-    border-primary
-    text-primary
-    border
-    rounded-[4px]
-    transition-colors
-    hover:bg-primary
-    hover:text-base-max
-`;
-
 export const CountSpan = tw.span`font-bold p-0 m-0`;
 
 interface CountsIconProps {

diff --git a/packages/portal-proto/src/features/charts/DownloadOptions.tsx b/packages/portal-proto/src/features/charts/DownloadOptions.tsx
@@ -1,6 +1,5 @@
-import { Menu, Tooltip } from "@mantine/core";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
 import Plotly from "plotly.js";
-import { DownloadButton } from "@/components/tailwindComponents";
 import { JSONArray } from "@/features/types";
 import { DownloadIcon } from "@/utils/icons";
 
@@ -28,9 +27,12 @@ const DownloadOptions: React.FC<ChartDownloadProps> = ({
     <Menu width="auto">
       <Menu.Target>
         <Tooltip label="Download image or data">
-          <DownloadButton data-testid="button-download-image-or-data">
-            <DownloadIcon size="1.25em" aria-label="Download" />
-          </DownloadButton>
+          <ActionIcon
+            data-testid="button-download-image-or-data"
+            variant="outline"
+          >
+            <DownloadIcon size="1rem" aria-hidden="true" />
+          </ActionIcon>
         </Tooltip>
       </Menu.Target>
       <Menu.Dropdown data-testid="list-download-image-or-data-dropdown">