Add hover states for buttons (#620)

Co-authored-by: Patricio Del Boca <[email protected]>
okfn · Nov 13, 2024 · aa38f04 · aa38f04
1 parent eb73cdf
commit aa38f04
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 15 deletions.
diff --git a/client/components/Application/Content.tsx b/client/components/Application/Content.tsx
@@ -88,7 +88,15 @@ function EmptyContent() {
           The ODE supports Excel & csv files
         </Typography>
         <Button
-          sx={{ my: 0.5, width: '236px', textTransform: 'none' }}
+          sx={{
+            my: 0.5,
+            width: '236px',
+            textTransform: 'none',
+            backgroundColor: (theme) => theme.palette.OKFNBlack.main,
+            '&:hover': {
+              backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+            },
+          }}
           variant="contained"
           aria-label="accept"
           onClick={() => store.openDialog('fileUpload')}

diff --git a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
@@ -20,7 +20,7 @@ export default function CloseWithUnsavedChangesDialog() {
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes."
+      description="There are unsaved changes. Please, click save or cancel."
       onCancel={onDiscard}
       onConfirm={onSave}
       disableClosing={true}

diff --git a/client/components/Application/Dialogs/DeleteFilesFolders.tsx b/client/components/Application/Dialogs/DeleteFilesFolders.tsx
@@ -31,6 +31,7 @@ export default function DeleteFilesFoldersDialog() {
           : `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
       }
       label="Delete"
+      hoverBgButtonColor="OKFNRed600"
       cancelLabel="No"
       onCancel={store.closeDialog}
       onConfirm={async () => {

diff --git a/client/components/Application/Dialogs/FileUpload.tsx b/client/components/Application/Dialogs/FileUpload.tsx
@@ -121,7 +121,7 @@ export default function FileUploadDialog() {
                 <FileSelectBox
                   sx={{
                     ':hover': {
-                      borderColor: (theme) => theme.palette.primary.main,
+                      borderColor: (theme) => theme.palette.OKFNBlue.main,
                     },
                   }}
                 >
@@ -149,7 +149,7 @@ export default function FileUploadDialog() {
                 <FileSelectBox
                   sx={{
                     ':hover': {
-                      borderColor: (theme) => theme.palette.primary.main,
+                      borderColor: (theme) => theme.palette.OKFNBlue.main,
                     },
                   }}
                 >
@@ -211,6 +211,8 @@ export default function FileUploadDialog() {
                 sx={{ my: 0.5, marginTop: '53px' }}
                 variant="contained"
                 aria-label="accept"
+                hoverBgColor="OKFNBlue"
+                color="OKFNBlack"
                 disabled={!remoteUrlValue}
                 onClick={() => onAddRemoteConfirm(remoteUrlValue)}
               />

diff --git a/client/components/Application/Dialogs/Publish.tsx b/client/components/Application/Dialogs/Publish.tsx
@@ -39,7 +39,7 @@ export default function PublishDialog() {
       onCancel={handleClose}
       onConfirm={publishedUrl ? handleClose : handlePublish}
     >
-      <Box sx={{ padding: '24px 24px 40px 24px' }}>
+      <Box sx={{ padding: '24px' }}>
         <PortalEditor
           portal={portal}
           onChange={(portal) => {

diff --git a/client/components/Application/Dialogs/UnsavedChanges.tsx b/client/components/Application/Dialogs/UnsavedChanges.tsx
@@ -20,7 +20,7 @@ export default function UnsavedChangesDialog() {
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes."
+      description="There are unsaved changes. Please, click save or cancel."
       onCancel={onDiscard}
       onConfirm={onSave}
     />

diff --git a/client/components/Application/Dialogs/WelcomeBanner.tsx b/client/components/Application/Dialogs/WelcomeBanner.tsx
@@ -8,6 +8,7 @@ import * as store from '@client/store'
 import * as React from 'react'
 import welcomescreenImg from './assets/welcomescreen.png'
 import { styled } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 
 export default function WelcomeBanner() {
   const hideWelcomeScreen = store.useStore((state) => state.hideWelcomeScreen)
@@ -23,15 +24,17 @@ export default function WelcomeBanner() {
     store.closeDialog()
   }
 
+  const theme = useTheme()
+
   const StyledButton = styled(SimpleButton)({
     boxShadow: 'none',
     textTransform: 'none',
     fontSize: 16,
     padding: '18px 0',
     lineHeight: 1.5,
-    backgroundColor: '#00D1FF',
+    backgroundColor: theme.palette.OKFNBlack.main,
     '&:hover': {
-      backgroundColor: '#11E2FF',
+      backgroundColor: theme.palette.OKFNBlue.main,
     },
     '&:active': {
       boxShadow: 'none',

diff --git a/client/components/Application/Sidebar.tsx b/client/components/Application/Sidebar.tsx
@@ -21,7 +21,16 @@ export default function Sidebar() {
       </Box>
       <Button
         variant="outlined"
-        sx={{ textTransform: 'none', marginBottom: '22px', mx: '24px' }}
+        sx={{
+          textTransform: 'none',
+          marginBottom: '22px',
+          mx: '24px',
+          '&:hover': {
+            color: 'white',
+            borderColor: (theme) => theme.palette.OKFNBlue.main,
+            backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+          },
+        }}
         onClick={() => store.openDialog('fileUpload')}
       >
         Upload your data

diff --git a/client/components/Parts/Bars/Action.tsx b/client/components/Parts/Bars/Action.tsx
@@ -61,11 +61,13 @@ export function PublishButton(props: ButtonProps) {
       <IconButton
         label={props.label || 'Publish'}
         Icon={ElectricBoltIcon}
-        variant="outlined"
+        variant={!props.disabled ? 'contained' : 'outlined'}
         disabled={props.disabled}
         onClick={() => onClick()}
-        sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
-          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        sx={{ backgroundColor: (theme) => props.disabled ? 'white' : theme.palette.OKFNBlack.main, textTransform: 'none', color: (theme) => theme.palette.OKFNWhite.main, '&:hover': {
+          color: (theme) => theme.palette.OKFNWhite.main,
+          borderColor: (theme) => theme.palette.OKFNBlue.main,
+          backgroundColor: (theme) => theme.palette.OKFNBlue.main
         }  }}
       />
     </Box>
@@ -101,7 +103,9 @@ export function SaveButton(props: ButtonProps) {
         variant={props.updated ? 'contained' : 'outlined'}
         disabled={!props.updated}
         onClick={() => onClick()}
-        sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
+        sx={{ backgroundColor: (theme) => !props.updated ? 'white' :  theme.palette.OKFNBlack.main, '&:hover': {
+          backgroundColor: (theme) => theme.palette.OKFNBlue.main
+        }, textTransform: 'none' }}
       />
     </Box>
   )

diff --git a/client/components/Parts/Buttons/SimpleButton.tsx b/client/components/Parts/Buttons/SimpleButton.tsx
@@ -1,21 +1,31 @@
 import Typography from '@mui/material/Typography'
 import Button, { ButtonProps } from '@mui/material/Button'
 
+export const ButtonBgColor = {
+  OKFNRed600: 'OKFNRed600',
+  OKFNBlue: 'OKFNBlue',
+} as const;
+
+export type ButtonBgColorType = keyof typeof ButtonBgColor
+
 interface SimpleButtonProps extends ButtonProps {
   label?: string
   small?: boolean
+  hoverBgColor?: ButtonBgColorType
 }
 
 export default function SimpleButton(props: SimpleButtonProps) {
-  const { label, ...others } = props
+  const { label, hoverBgColor, ...others } = props
 
   const buttonTextColor = props.color === 'OKFNWhite' ? 'gray': 'white'
   return (
     <Button
       fullWidth={!props.small}
       color={props.color}
       {...others}
-      sx={{ padding: '14px 24px', borderRadius: '9px', border: props.label === 'Cancel' ? '1px solid #D3D7D8' : 0, boxShadow: 'none' }}
+      sx={{ padding: '14px 24px', borderRadius: '9px', border: props.label === 'Cancel' ? '1px solid #D3D7D8' : 0, boxShadow: 'none', '&:hover': {
+        backgroundColor: (theme) => hoverBgColor ? theme.palette[hoverBgColor].main : 'unset'
+      } }}
     >
       {(
         <Typography sx={{ textTransform: 'capitalize', fontWeight: 700, color: (theme) => props.disabled ? theme.palette.OKFNGray700.main : buttonTextColor, }}>

diff --git a/client/components/Parts/Dialogs/OneButton.tsx b/client/components/Parts/Dialogs/OneButton.tsx
@@ -90,6 +90,7 @@ export default function OneButtonDialog(props: OneButtonDialogProps) {
           onClick={handleConfirm}
           aria-label="accept"
           variant="contained"
+          hoverBgColor='OKFNBlue'
           color={ props.label === 'Delete' ? 'OKFNRed500' : 'OKFNBlack' }
           disabled={props.disabled || props.loading}
         />

diff --git a/client/components/Parts/Dialogs/TwoButton.tsx b/client/components/Parts/Dialogs/TwoButton.tsx
@@ -7,6 +7,7 @@ import DialogContent from '@mui/material/DialogContent'
 import SimpleButton from '../Buttons/SimpleButton'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
+import { ButtonBgColorType } from '../Buttons/SimpleButton'
 
 export interface TwoButtonDialogProps {
   open?: boolean
@@ -23,6 +24,7 @@ export interface TwoButtonDialogProps {
   ctrlEnter?: boolean
   children?: React.ReactNode
   disableClosing?: boolean
+  hoverBgButtonColor?: ButtonBgColorType
 }
 
 export default function TwoButtonDialog(props: TwoButtonDialogProps) {
@@ -104,6 +106,7 @@ export default function TwoButtonDialog(props: TwoButtonDialogProps) {
             onClick={handleConfirm}
             aria-label="accept"
             variant="contained"
+            hoverBgColor={ props.hoverBgButtonColor ? props.hoverBgButtonColor : 'OKFNBlue'}
             color={ props.label === 'Delete' ? 'OKFNRed500' : 'OKFNBlack' }
             disabled={props.disabled || props.loading}
           />

diff --git a/client/themes.ts b/client/themes.ts
@@ -9,6 +9,7 @@ declare module '@mui/material/styles' {
     OKFNBlue: SimplePaletteColorOptions
     OKFNRed400: SimplePaletteColorOptions
     OKFNRed500: SimplePaletteColorOptions
+    OKFNRed600: SimplePaletteColorOptions
     OKFNGreenBlue: SimplePaletteColorOptions
     OKFNBlack: SimplePaletteColorOptions
     OKFNWhite: SimplePaletteColorOptions
@@ -27,6 +28,7 @@ declare module '@mui/material/Button' {
     OKFNBlue: true
     OKFNRed400: true
     OKFNRed500: true
+    OKFNRed600: true
     OKFNGreenBlue: true
     OKFNBlack: true
     OKFNWhite: true
@@ -89,6 +91,9 @@ export const DEFAULT = createTheme({
     OKFNRed500: {
       main: '#FF403F',
     },
+    OKFNRed600: {
+      main: '#DC2625',
+    },
     OKFNGreenBlue: {
       main: '#56C4A3',
     },