diff --git a/packages/react-ui/src/widgets/legend/LegendLayer.js b/packages/react-ui/src/widgets/legend/LegendLayer.js
index 71b82584f..2b035644f 100644
--- 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 (
- `1px solid ${theme.palette.divider}`
- }
- }}
- >
+
{collapsible && (
)}
-
+
{showZoomNote && (
)}
-
+
{showOpacityControl && visible && !collapsed && (
{helperText && (
-
+
)}
-
+
);
}
diff --git a/packages/react-ui/src/widgets/legend/LegendLayerTitle.js b/packages/react-ui/src/widgets/legend/LegendLayerTitle.js
index ccd591ff0..a88b62fce 100644
--- 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
index a47abdd09..1e78933d4 100644
--- 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
index 513651bb3..760840ba6 100644
--- 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
);
diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendIcon.js b/packages/react-ui/src/widgets/legend/legend-types/LegendIcon.js
index e3b72c0ed..3a9317bbe 100644
--- 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 (
{labels.map((label, idx) => (
-
-
-
-
+
+
+
+
-
+
))}
);
diff --git a/packages/react-ui/src/widgets/legend/legend-types/LegendProportion.js b/packages/react-ui/src/widgets/legend/legend-types/LegendProportion.js
index 5ddbeffb0..16b6fa8fd 100644
--- 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
index b1c5ae117..8f2f5a1bf 100644
--- 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 (
-
+
{error ? (
@@ -47,7 +47,7 @@ function LegendRamp({ isContinuous = false, legend }) {
) : (
<>
-
+
{isContinuous ? (
) : (
@@ -59,7 +59,7 @@ function LegendRamp({ isContinuous = false, legend }) {
/>
)}
-
+
{minLabel}