refactor styles for sx, box and styled-components

CartoDB · Mar 18, 2024 · a12749b · a12749b
1 parent 2d947d6
commit a12749b
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 41 deletions.
diff --git a/packages/react-ui/src/widgets/legend/LegendLayer.js b/packages/react-ui/src/widgets/legend/LegendLayer.js
@@ -1,16 +1,22 @@
 import React, { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Collapse, IconButton, Tooltip, Typography } from '@mui/material';
+import { Collapse, IconButton, Tooltip } from '@mui/material';
 import EyeIcon from '@mui/icons-material/VisibilityOutlined';
 import EyeOffIcon from '@mui/icons-material/VisibilityOffOutlined';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { LayerVariablesList, LegendItemHeader } from './LegendWidgetUI.styles';
+import {
+  LayerVariablesList,
+  LegendItemHeader,
+  LegendLayerTitleWrapper,
+  LegendLayerWrapper
+} from './LegendWidgetUI.styles';
 import LegendOpacityControl from './LegendOpacityControl';
 import LegendLayerTitle from './LegendLayerTitle';
 import LegendLayerVariable from './LegendLayerVariable';
 import { useIntl } from 'react-intl';
 import useImperativeIntl from '../../hooks/useImperativeIntl';
+import Typography from '../../components/atoms/Typography';
 
 const EMPTY_OBJ = {};
 
@@ -98,16 +104,7 @@ export default function LegendLayer({
   }
 
   return (
-    <Box
-      data-testid='legend-layer'
-      aria-label={title}
-      component='section'
-      sx={{
-        '&:not(:first-of-type)': {
-          borderTop: (theme) => `1px solid ${theme.palette.divider}`
-        }
-      }}
-    >
+    <LegendLayerWrapper data-testid='legend-layer' aria-label={title}>
       <LegendItemHeader ref={menuAnchorRef}>
         {collapsible && (
           <IconButton
@@ -121,7 +118,7 @@ export default function LegendLayer({
             {collapseIcon}
           </IconButton>
         )}
-        <Box flexGrow={1} sx={{ minWidth: 0, flexShrink: 1 }}>
+        <LegendLayerTitleWrapper>
           <LegendLayerTitle visible={visible} title={title} />
           {showZoomNote && (
             <Tooltip
@@ -139,7 +136,7 @@ export default function LegendLayer({
               </Typography>
             </Tooltip>
           )}
-        </Box>
+        </LegendLayerTitleWrapper>
         {showOpacityControl && visible && !collapsed && (
           <LegendOpacityControl
             menuRef={menuAnchorRef}
@@ -190,17 +187,12 @@ export default function LegendLayer({
           ))}
         </LayerVariablesList>
         {helperText && (
-          <Typography
-            variant='caption'
-            color='textSecondary'
-            component='div'
-            sx={{ p: 2 }}
-          >
+          <Typography variant='caption' color='textSecondary' component='div' p={2}>
             <div dangerouslySetInnerHTML={{ __html: helperText }}></div>
           </Typography>
         )}
       </Collapse>
-    </Box>
+    </LegendLayerWrapper>
   );
 }
 

diff --git a/packages/react-ui/src/widgets/legend/LegendLayerTitle.js b/packages/react-ui/src/widgets/legend/LegendLayerTitle.js
@@ -26,10 +26,9 @@ export default function LegendLayerTitle({ title, visible, typographyProps }) {
       color={visible ? 'textPrimary' : 'textSecondary'}
       variant='button'
       weight='medium'
-      lineHeight='20px'
       component='p'
       noWrap
-      sx={{ my: 0.25 }}
+      my={0.25}
       {...typographyProps}
     >
       {title}

diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.styles.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.styles.js
@@ -41,7 +41,7 @@ export const StyledOpacityControl = styled('div')(({ theme }) => ({
   gap: theme.spacing(2),
   alignItems: 'center',
   padding: theme.spacing(1),
-  minWidth: LEGEND_WIDTH - 32
+  minWidth: LEGEND_WIDTH - theme.spacingValue * 4
 }));
 
 export const OpacityTextField = styled(TextField)(({ theme }) => ({
@@ -74,7 +74,12 @@ export const LegendVariableList = styled('ul')(({ theme }) => ({
   flexDirection: 'column'
 }));
 
-export const LegendIconWrapper = styled('div')(({ theme }) => ({
+export const LegendIconWrapper = styled('li')(() => ({
+  display: 'flex',
+  alignItems: 'center'
+}));
+
+export const LegendIconImageWrapper = styled('div')(({ theme }) => ({
   marginRight: theme.spacing(1.5),
   width: ICON_SIZE_MEDIUM,
   height: ICON_SIZE_MEDIUM,
@@ -86,10 +91,22 @@ export const LegendIconWrapper = styled('div')(({ theme }) => ({
 
 export const LegendContent = styled(Box, {
   shouldForwardProp: (prop) => !['width'].includes(prop)
-})(({ width }) => ({
+})(({ width, theme }) => ({
   width,
   overflow: 'auto',
-  maxHeight: `calc(100% - 12px)`
+  maxHeight: `calc(100% - ${theme.spacing(1.5)})`
+}));
+
+export const LegendLayerWrapper = styled('section')(({ theme }) => ({
+  '&:not(:first-of-type)': {
+    borderTop: `1px solid ${theme.palette.divider}`
+  }
+}));
+
+export const LegendLayerTitleWrapper = styled('div')(() => ({
+  flexGrow: 1,
+  flexShrink: 1,
+  minWidth: 0
 }));
 
 export const styles = {};
diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendCategories.js b/packages/react-ui/src/widgets/legend/legend-types/LegendCategories.js
@@ -159,7 +159,7 @@ function LegendCategoriesRow({ label, isStrokeColor, color = '#000', icon, maske
       <LegendLayerTitle
         title={label}
         visible
-        typographyProps={{ variant: 'overlineDelicate' }}
+        typographyProps={{ variant: 'overline', my: 0.75 }}
       />
     </Box>
   );

diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendIcon.js b/packages/react-ui/src/widgets/legend/legend-types/LegendIcon.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import { Box } from '@mui/material';
 import PropTypes from 'prop-types';
 import { ICON_SIZE_MEDIUM } from '../../../theme/themeConstants';
-import { LegendIconWrapper, LegendVariableList } from '../LegendWidgetUI.styles';
+import {
+  LegendIconImageWrapper,
+  LegendIconWrapper,
+  LegendVariableList
+} from '../LegendWidgetUI.styles';
 import LegendLayerTitle from '../LegendLayerTitle';
 
 /**
@@ -15,16 +18,16 @@ function LegendIcon({ legend }) {
   return (
     <LegendVariableList data-testid='icon-legend'>
       {labels.map((label, idx) => (
-        <Box key={label} component='li' sx={{ display: 'flex', alignItems: 'center' }}>
-          <LegendIconWrapper>
-            <img src={icons[idx]} alt={label} width='autio' height={ICON_SIZE_MEDIUM} />
-          </LegendIconWrapper>
+        <LegendIconWrapper key={label}>
+          <LegendIconImageWrapper>
+            <img src={icons[idx]} alt={label} width='auto' height={ICON_SIZE_MEDIUM} />
+          </LegendIconImageWrapper>
           <LegendLayerTitle
             visible
             title={label}
-            typographyProps={{ variant: 'overlineDelicate' }}
+            typographyProps={{ variant: 'overline', my: 0.75 }}
           />
-        </Box>
+        </LegendIconWrapper>
       ))}
     </LegendVariableList>
   );

diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendProportion.js b/packages/react-ui/src/widgets/legend/legend-types/LegendProportion.js
@@ -19,8 +19,8 @@ const Circle = styled(Box, {
   const height = theme.spacing(sizes[index]);
 
   return {
-    border: `solid 1px ${theme.palette.grey[100]}`,
-    backgroundColor: theme.palette.grey[50],
+    border: `solid 1px ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.default,
     borderRadius: '50%',
     position: 'absolute',
     right: 0,

diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendRamp.js b/packages/react-ui/src/widgets/legend/legend-types/LegendRamp.js
@@ -38,7 +38,7 @@ function LegendRamp({ isContinuous = false, legend }) {
   }
 
   return (
-    <Box sx={{ py: 2 }} data-testid='ramp-legend'>
+    <Box py={2} data-testid='ramp-legend'>
       {error ? (
         <Box maxWidth={240}>
           <Typography variant='overline'>
@@ -47,7 +47,7 @@ function LegendRamp({ isContinuous = false, legend }) {
         </Box>
       ) : (
         <>
-          <Box sx={{ display: 'flex', pb: 1 }}>
+          <Box display='flex' pb={1}>
             {isContinuous ? (
               <StepsContinuous data-testid='step-continuous' palette={palette} />
             ) : (
@@ -59,7 +59,7 @@ function LegendRamp({ isContinuous = false, legend }) {
               />
             )}
           </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Box display='flex' justifyContent='space-between'>
             <Typography variant='overlineDelicate' color='textSecondary'>
               {minLabel}
             </Typography>