fix: CustomButton hover colors

cardano-foundation · May 23, 2024 · 51b7e1d · 51b7e1d
1 parent a702b54
commit 51b7e1d
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/ui/summit-2024/src/components/common/CustomButton/CustomButton.tsx b/ui/summit-2024/src/components/common/CustomButton/CustomButton.tsx
@@ -10,6 +10,26 @@ interface CustomButtonProps extends ButtonProps {
 const CustomButton: React.FC<CustomButtonProps> = ({ colorVariant, startIcon, sx, children, ...props }) => {
     const theme = useTheme();
 
+    const getPrimaryStyles = (): SxProps<Theme> => ({
+        background: "linear-gradient(258deg, #EE9766 0%, #40407D 187.58%, #0C7BC5 249.97%)",
+        color: theme.palette.background.default,
+        "&:hover": {
+            color: theme.palette.text.neutralLightest,
+            background: "linear-gradient(258deg, #EE9766 0%, #40407D 87.58%, #0C7BC5 249.97%)",
+            borderColor: theme.palette.text.neutralLightest,
+        }
+    });
+
+    const getSecondaryStyles = (): SxProps<Theme> => ({
+        background: "transparent",
+        border: `1px solid ${theme.palette.secondary.main}`,
+        color: theme.palette.secondary.main,
+        "&:hover": {
+            color: theme.palette.text.neutralLightest,
+            borderColor: theme.palette.text.neutralLightest,
+        },
+    });
+
     const defaultStyles: SxProps<Theme> = {
         textTransform: "none",
         height: '56px',
@@ -18,23 +38,11 @@ const CustomButton: React.FC<CustomButtonProps> = ({ colorVariant, startIcon, sx
         lineHeight: '24px',
         borderRadius: '12px',
         padding: { xs: "8px 16px", sm: "16px 24px" },
-        ...(colorVariant === 'primary' ? {
-            background: 'linear-gradient(70deg, #0C7BC5 -105.24%, #40407D -53.72%, #EE9766 -0.86%, #EE9766 103.82%)',
-            color: theme.palette.background.default,
-        } : {
-            background: 'transparent',
-            border: `1px solid ${theme.palette.secondary.main}`,
-            color: theme.palette.secondary.main,
-            "&:hover": {
-                backgroundColor: theme.palette.secondary.dark,
-                color: theme.palette.background.default
-            },
-        })
+        ...(colorVariant === 'primary' ? getPrimaryStyles() : getSecondaryStyles())
     };
 
     return (
         <Button
-            variant="contained"
             sx={[defaultStyles, sx]}
             startIcon={startIcon}
             {...props}