[feat] Apply new legend style (#2831)

- pass through `className` to legend
- css updates to reflect new designs

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/components/src/common/color-legend.tsx

@@ -28,7 +28,7 @@ const inputCss = css`
 `;
 const StyledLegend = styled.div<{disableEdit: boolean; isExpanded?: boolean}>`
   ${props => props.theme.sidePanelScrollBar};
-  ${props => (props.isExpanded ? '' : `max-height: 180px;`)};
+  ${props => (props.isExpanded ? '' : `max-height: 156px;`)};
   overflow: auto;
   margin-bottom: ${GAP}px;
   display: grid;

src/components/src/map/map-control-panel.tsx

@@ -26,7 +26,7 @@ type StyledMapControlPanelContentProps = {
 const StyledMapControlPanelContent = styled.div.attrs({
   className: 'map-control__panel-content'
 })<StyledMapControlPanelContentProps>`
-  ${props => props.theme.dropdownScrollBar};
+  ${props => props.theme.sidePanelScrollBar};
   max-height: 500px;
   min-height: 100px;
   min-width: ${props => props.theme.mapControl.width}px;
@@ -119,6 +119,7 @@ export type MapControlPanelProps = {
   onToggleSplitMapViewport?: ActionHandler<typeof toggleSplitMapViewport>;
   isViewportUnsyncAllowed?: boolean;
   children?: React.ReactNode;
+  className?: string;
 };
 
 function MapControlPanelFactory() {
@@ -135,7 +136,8 @@ function MapControlPanelFactory() {
       logoComponent,
       mapState,
       onToggleSplitMapViewport,
-      isViewportUnsyncAllowed
+      isViewportUnsyncAllowed,
+      className = 'map-control-panel'
     }) => {
       const {isViewportSynced, isZoomLocked} = mapState || {};
       const onUnlockViewportChange = useCallback(() => {
@@ -148,11 +150,11 @@ function MapControlPanelFactory() {
 
       return (
         <StyledMapControlPanel
-          className="map-control-panel"
           style={{
             transform: `scale(${scale})`,
             marginBottom: '8px !important'
           }}
+          className={className}
         >
           {mapState?.isSplit && isViewportUnsyncAllowed ? (
             <StyledMapControlPanelHeaderSplitViewportsTools>

src/components/src/map/map-legend-panel.tsx

@@ -72,6 +72,7 @@ export type MapLegendPanelProps = {
   isViewportUnsyncAllowed?: boolean;
   onClickControlBtn?: (e?: MouseEvent) => void;
   onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
+  className: string;
 };
 
 function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
@@ -93,6 +94,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     onToggleSplitMapViewport,
     onClickControlBtn,
     isViewportUnsyncAllowed = true,
+    className,
     onLayerVisConfigChange
   }) => {
     const mapLegend = mapControls?.mapLegend || ({} as MapControlMapLegend);
@@ -139,7 +141,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     const mapControlPanel = (
       <MapControlPanel
         scale={scale}
-        header={'header.layerLegend'}
+        header="header.layerLegend"
         isPinned={true}
         {...(isPinned
           ? {
@@ -157,6 +159,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
         mapState={mapState}
         onToggleSplitMapViewport={onToggleSplitMapViewport}
         isViewportUnsyncAllowed={isViewportUnsyncAllowed}
+        className={className}
       >
         <MapLegend
           layers={layers}