download button tweak

Author: devhelpr

src/components/synthetic-data/export-button.tsx

@@ -26,10 +26,14 @@ export const ExportButton = ({
 }) => {
     const { t } = useTranslation();
     return (
-        <div className="ml-auto flex flex-row gap-2 hideonprint">
+        <div className="flex flex-row gap-2 hideonprint">
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="p-4 text-sm">
+                    <Button
+                        variant="default"
+                        size="sm"
+                        className="mx-auto py-6 px-4 text-sm bg-aaRegularLight hover:bg-aaRegularLight text-black hover:text-black transform transition-colors duration-200 group"
+                    >
                         {t('downloadButton')}
                         <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" />
                     </Button>
@@ -40,15 +44,15 @@ export const ExportButton = ({
                 >
                     <DropdownMenuItem
                         onClick={() => reactToPrintFn()}
-                        className="flex flex-row items-center"
+                        className="flex flex-row items-center cursor-pointer"
                     >
                         <Share className="size-3.5 mr-2" />
                         {t('syntheticData.exportToPDF')}
                     </DropdownMenuItem>
                     {clusterInfo && (
                         <>
                             <DropdownMenuItem
-                                className="flex flex-row items-center"
+                                className="flex flex-row items-center cursor-pointer"
                                 onClick={() => {
                                     downloadFile(
                                         JSON.stringify(
@@ -68,7 +72,7 @@ export const ExportButton = ({
                                 {t('syntheticData.exportToJSON')}
                             </DropdownMenuItem>
                             <DropdownMenuItem
-                                className="flex flex-row items-center"
+                                className="flex flex-row items-center cursor-pointer"
                                 onClick={() => {
                                     handleExport(
                                         clusterInfo.syntheticData as object[]

src/index.css

@@ -18,3 +18,7 @@
     @apply min-w-[800px];
     width: 800px !important;
 }
+
+button:has(+ [data-radix-popper-content-wrapper]) {
+    @apply bg-aaRegularLight text-black;
+}

tailwind.config.js

@@ -22,6 +22,7 @@ export default {
             },
             colors: {
                 aaLight: '#deecf7',
+                aaRegularLight: '#c5d8eb',
                 aaRegular: '#005aa7',
                 aaDark: '#0a3f70',
             },