Fix: cookie prefs checked checkbox color (#2356)

* Fix: cookie prefs checked checkbox color * Move colors to CSS * Stop propagation on ExplorerButton in EthHashInfo
safe-global · Aug 7, 2023 · e3c0e31 · e3c0e31
1 parent 3fbb439
commit e3c0e31
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 48 deletions.
diff --git a/src/components/common/CookieBanner/index.tsx b/src/components/common/CookieBanner/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, type ReactElement } from 'react'
+import classnames from 'classnames'
 import type { CheckboxProps } from '@mui/material'
 import { Grid, Button, Checkbox, FormControlLabel, Typography, Paper, SvgIcon, Box } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
@@ -22,26 +23,11 @@ const CookieCheckbox = ({
   checkboxProps,
   label,
   checked,
-  color,
 }: {
   label: string
   checked: boolean
   checkboxProps: CheckboxProps
-  color?: string
-}) => (
-  <FormControlLabel
-    label={label}
-    checked={checked}
-    control={<Checkbox {...checkboxProps} />}
-    sx={{
-      mt: '-9px',
-      color,
-      '.MuiCheckbox-root': {
-        color,
-      },
-    }}
-  />
-)
+}) => <FormControlLabel label={label} checked={checked} control={<Checkbox {...checkboxProps} />} sx={{ mt: '-9px' }} />
 
 export const CookieBanner = ({
   warningKey,
@@ -74,10 +60,8 @@ export const CookieBanner = ({
     setTimeout(handleAccept, 300)
   }
 
-  const color = inverted ? 'background.paper' : undefined
-
   return (
-    <Paper sx={inverted ? { backgroundColor: 'text.primary' } : undefined} className={css.container}>
+    <Paper className={classnames(css.container, { [css.inverted]: inverted })}>
       {warning && (
         <Typography align="center" mb={2} color="warning.background" variant="body2">
           <SvgIcon component={WarningIcon} inheritViewBox fontSize="small" color="error" sx={{ mb: -0.4 }} /> {warning}
@@ -87,49 +71,36 @@ export const CookieBanner = ({
       <form>
         <Grid container alignItems="center">
           <Grid item xs>
-            <Typography variant="body2" color={color} mb={2}>
+            <Typography variant="body2" mb={2}>
               By clicking &quot;Accept all&quot; you agree to the use of the tools listed below and their corresponding{' '}
               <span style={{ whiteSpace: 'nowrap' }}>3rd-party</span> cookies.{' '}
-              <ExternalLink href={AppRoutes.cookie} color={color}>
-                Cookie policy
-              </ExternalLink>
+              <ExternalLink href={AppRoutes.cookie}>Cookie policy</ExternalLink>
             </Typography>
 
             <Grid container alignItems="center" gap={4}>
               <Grid item xs={12} sm>
                 <Box mb={2}>
-                  <CookieCheckbox
-                    checkboxProps={{ id: 'necessary', disabled: true }}
-                    label="Necessary"
-                    checked
-                    color={color}
-                  />
+                  <CookieCheckbox checkboxProps={{ id: 'necessary', disabled: true }} label="Necessary" checked />
                   <br />
-                  <Typography variant="body2" color={color}>
-                    Locally stored data for core functionality
-                  </Typography>
+                  <Typography variant="body2">Locally stored data for core functionality</Typography>
                 </Box>
                 <Box mb={2}>
                   <CookieCheckbox
                     checkboxProps={{ ...register(CookieType.UPDATES), id: 'beamer' }}
                     label="Beamer"
                     checked={watch(CookieType.UPDATES)}
-                    color={color}
                   />
                   <br />
-                  <Typography variant="body2" color={color}>
-                    New features and product announcements
-                  </Typography>
+                  <Typography variant="body2">New features and product announcements</Typography>
                 </Box>
                 <Box>
                   <CookieCheckbox
                     checkboxProps={{ ...register(CookieType.ANALYTICS), id: 'ga' }}
                     label="Google Analytics"
                     checked={watch(CookieType.ANALYTICS)}
-                    color={color}
                   />
                   <br />
-                  <Typography variant="body2" color={color}>
+                  <Typography variant="body2">
                     Help us make the app better. We never track your Safe Account address or wallet addresses, or any
                     transaction data.
                   </Typography>
@@ -139,7 +110,7 @@ export const CookieBanner = ({
 
             <Grid container alignItems="center" justifyContent="center" mt={4} gap={2}>
               <Grid item>
-                <Typography color={color}>
+                <Typography>
                   <Button onClick={handleAccept} variant="text" size="small" color="inherit" disableElevation>
                     Accept selection
                   </Button>

diff --git a/src/components/common/CookieBanner/styles.module.css b/src/components/common/CookieBanner/styles.module.css
@@ -23,10 +23,20 @@
   }
 }
 
-.container :global(.Mui-checked) {
+.container.inverted {
+  background: var(--color-text-primary);
+}
+
+.container.inverted,
+.container.inverted :global(.MuiCheckbox-root),
+.container.inverted a {
+  color: var(--color-background-paper);
+}
+
+.container.inverted :global(.Mui-checked) {
   color: var(--color-background-paper);
 }
 
-.container :global(.Mui-checked.Mui-disabled) {
+.container.inverted :global(.Mui-checked.Mui-disabled) {
   opacity: 0.5;
 }
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode, ReactElement } from 'react'
+import type { ReactNode, ReactElement, SyntheticEvent } from 'react'
 import { isAddress } from 'ethers/lib/utils'
 import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
@@ -27,6 +27,8 @@ export type EthHashInfoProps = {
   ExplorerButtonProps?: ExplorerButtonProps
 }
 
+const stopPropagation = (e: SyntheticEvent) => e.stopPropagation()
+
 const SrcEthHashInfo = ({
   address,
   customAvatar,
@@ -82,7 +84,7 @@ const SrcEthHashInfo = ({
 
           {hasExplorer && ExplorerButtonProps && (
             <Box color="border.main">
-              <ExplorerButton {...ExplorerButtonProps} />
+              <ExplorerButton {...ExplorerButtonProps} onClick={stopPropagation} />
             </Box>
           )}
 

diff --git a/src/components/common/ExplorerButton/index.tsx b/src/components/common/ExplorerButton/index.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement, ComponentType } from 'react'
+import type { ReactElement, ComponentType, SyntheticEvent } from 'react'
 import { IconButton, SvgIcon, Tooltip } from '@mui/material'
 import LinkIcon from '@/public/images/common/link.svg'
 
@@ -7,9 +7,16 @@ export type ExplorerButtonProps = {
   href?: string
   className?: string
   icon?: ComponentType
+  onClick?: (e: SyntheticEvent) => void
 }
 
-const ExplorerButton = ({ title = '', href = '', icon = LinkIcon, className }: ExplorerButtonProps): ReactElement => (
+const ExplorerButton = ({
+  title = '',
+  href = '',
+  icon = LinkIcon,
+  className,
+  onClick,
+}: ExplorerButtonProps): ReactElement => (
   <Tooltip title={title} placement="top">
     <IconButton
       className={className}
@@ -18,6 +25,7 @@ const ExplorerButton = ({ title = '', href = '', icon = LinkIcon, className }: E
       href={href}
       size="small"
       sx={{ color: 'inherit' }}
+      onClick={onClick}
     >
       <SvgIcon component={icon} inheritViewBox fontSize="small" />
     </IconButton>

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -8,7 +8,7 @@ import packageJson from '../../../../package.json'
 import AppstoreButton from '../AppStoreButton'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
+import { IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
 
 const footerPages = [
   AppRoutes.welcome,
@@ -44,7 +44,7 @@ const Footer = (): ReactElement | null => {
   return (
     <footer className={css.container}>
       <ul>
-        {IS_OFFICIAL_HOST ? (
+        {IS_OFFICIAL_HOST || IS_DEV ? (
           <>
             <li>
               <Typography variant="caption">&copy;2022–{new Date().getFullYear()} Core Contributors GmbH</Typography>

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -1,6 +1,7 @@
 import chains from './chains'
 
-export const IS_PRODUCTION = process.env.NEXT_PUBLIC_IS_PRODUCTION
+export const IS_PRODUCTION = !!process.env.NEXT_PUBLIC_IS_PRODUCTION
+export const IS_DEV = process.env.NODE_ENV === 'development'
 
 export const GATEWAY_URL_PRODUCTION =
   process.env.NEXT_PUBLIC_GATEWAY_URL_PRODUCTION || 'https://safe-client.safe.global'