subtle gradient border on export-button, aligmnent, and hover over items

Author: devhelpr

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

@@ -18,41 +18,61 @@ export const ExportButton = ({
     reactToPrintFn,
     data,
     handleExport,
+    buttonAlign,
 }: {
+    buttonAlign: 'left' | 'right' | 'center';
     clusterInfo: SyntheticDataInfo | undefined;
     reactToPrintFn: UseReactToPrintFn;
     data: SyntheticData;
     handleExport: (syntheticData: object[]) => void;
 }) => {
     const { t } = useTranslation();
+    const buttonAlignClass =
+        buttonAlign === 'left'
+            ? 'mr-auto'
+            : buttonAlign === 'right'
+              ? 'ml-auto'
+              : 'mx-auto';
     return (
         <div className="flex flex-row gap-2 hideonprint">
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <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"
+                        className={`${buttonAlignClass} py-6 px-4 text-sm 
+                            bg-aaRegularLight hover:bg-aaRegularLight 
+                            text-black hover:text-black 
+                            transform transition-colors duration-200 group
+                            relative
+                            before:absolute before:inset-0
+                            before:p-[3px] before:rounded-md
+                            before:bg-gradient-to-br before:from-[#60a5fa] before:to-[#c5d8eb]
+                            before:-z-10
+                            after:absolute after:inset-[2px]
+                            after:rounded-[4px]
+                            after:bg-aaRegularLight
+                            after:-z-10`}
                     >
                         {t('downloadButton')}
                         <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
                     align="end"
-                    className="bg-white p-4 rounded-md flex flex-col gap-2 shadow-md"
+                    className="bg-white  rounded-md flex flex-col gap-0 shadow-md"
                 >
                     <DropdownMenuItem
                         onClick={() => reactToPrintFn()}
-                        className="flex flex-row items-center cursor-pointer"
+                        className="px-4 py-2 flex flex-row items-center cursor-pointer hover:bg-slate-100 rounded-md transition-colors duration-200"
                     >
                         <Share className="size-3.5 mr-2" />
                         {t('syntheticData.exportToPDF')}
                     </DropdownMenuItem>
                     {clusterInfo && (
                         <>
                             <DropdownMenuItem
-                                className="flex flex-row items-center cursor-pointer"
+                                className="px-4 py-2 flex flex-row items-center cursor-pointer hover:bg-slate-100 rounded-md transition-colors duration-200"
                                 onClick={() => {
                                     downloadFile(
                                         JSON.stringify(
@@ -72,7 +92,7 @@ export const ExportButton = ({
                                 {t('syntheticData.exportToJSON')}
                             </DropdownMenuItem>
                             <DropdownMenuItem
-                                className="flex flex-row items-center cursor-pointer"
+                                className="px-4 py-2 flex flex-row items-center cursor-pointer hover:bg-slate-100 rounded-md transition-colors duration-200"
                                 onClick={() => {
                                     handleExport(
                                         clusterInfo.syntheticData as object[]

src/routes/SyntheticData.tsx

@@ -156,6 +156,7 @@ export default function SyntheticDataGeneration() {
             >
                 {initialised && data.data.length > 0 && result.length > 0 && (
                     <ExportButton
+                        buttonAlign="right"
                         clusterInfo={clusterInfo}
                         data={data}
                         handleExport={handleExport}
@@ -177,6 +178,7 @@ export default function SyntheticDataGeneration() {
 
                 {initialised && data.data.length > 0 && result.length > 0 && (
                     <ExportButton
+                        buttonAlign="center"
                         clusterInfo={clusterInfo}
                         data={data}
                         handleExport={handleExport}

tailwind.config.js

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