Geomap: Legend style update (#48641)

Legend style update

public/app/plugins/panel/geomap/layers/data/MarkersLegend.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import { Label, stylesFactory, useTheme2, VizLegendItem } from '@grafana/ui';
+import { useStyles2, VizLegendItem } from '@grafana/ui';
 import { DataFrame, formattedValueToString, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { config } from 'app/core/config';
 import { DimensionSupplier } from 'app/features/dimensions';
 import { getThresholdItems } from 'app/plugins/panel/state-timeline/utils';
@@ -23,8 +23,7 @@ export interface MarkersLegendProps {
 
 export function MarkersLegend(props: MarkersLegendProps) {
   const { layerName, styleConfig, layer } = props;
-  const theme = useTheme2();
-  const style = getStyles(theme);
+  const style = useStyles2(getStyles);
 
   const hoverEvent = useObservable(((layer as any)?.__state as MapLayerState)?.mouseEvents ?? of(undefined));
 
@@ -55,14 +54,14 @@ export function MarkersLegend(props: MarkersLegendProps) {
   if (color && symbol && !colorField) {
     return (
       <div className={style.infoWrap}>
-        <div className={style.fixedColorContainer}>
+        <div className={style.layerName}>{layerName}</div>
+        <div className={cx(style.layerBody, style.fixedColorContainer)}>
           <SVG
             src={`public/${symbol}`}
             className={style.legendSymbol}
             title={'Symbol'}
             style={{ fill: color, opacity: opacity }}
           />
-          <span>{layerName}</span>
         </div>
       </div>
     )
@@ -90,15 +89,12 @@ export function MarkersLegend(props: MarkersLegendProps) {
 
     const display = colorField.display ? (v: number) => formattedValueToString(colorField.display!(v)) : (v: number) => `${v}`;
     return (
-      <>
-        <div className={style.labelsWrapper}>
-          <Label>{layerName}</Label>
-          <Label>{colorField?.name}</Label>
-        </div>
-        <div className={style.colorScaleWrapper}>
+      <div className={style.infoWrap}>
+        <div className={style.layerName}>{layerName}</div>
+        <div className={cx(style.layerBody, style.colorScaleWrapper)}>
           <ColorScale hoverValue={hoverValue} colorPalette={colors} min={colorRange.min as number} max={colorRange.max as number} display={display} useStopsPercentage={false}/>
         </div>
-      </>
+      </div>
     );
   }
 
@@ -110,7 +106,8 @@ export function MarkersLegend(props: MarkersLegendProps) {
   const items = getThresholdItems(colorField!.config, config.theme2);
   return (
     <div className={style.infoWrap}>
-      <div className={style.legend}>
+      <div className={style.layerName}>{layerName}</div>
+      <div className={cx(style.layerBody, style.legend)}>
         {items.map((item: VizLegendItem, idx: number) => (
           <div key={`${idx}/${item.label}`} className={style.legendItem}>
             <i style={{ background: item.color }}></i>
@@ -122,17 +119,28 @@ export function MarkersLegend(props: MarkersLegendProps) {
   );
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   infoWrap: css`
+    display: flex;
+    flex-direction: column;
     background: ${theme.colors.background.secondary};
-    border-radius: 2px;
+    border-radius: 1px;
     padding: ${theme.spacing(1)};
+    border-bottom: 2px solid ${theme.colors.border.strong};
+    min-width: 150px;
+  `,
+  layerName: css`
+    font-size: ${theme.typography.body.fontSize};
+  `,
+  layerBody: css`
+    padding-left: 10px;
   `,
   legend: css`
     line-height: 18px;
     display: flex;
     flex-direction: column;
     font-size: ${theme.typography.bodySmall.fontSize};
+    padding: 5px 10px 0;
 
     i {
       width: 18px;
@@ -148,20 +156,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   fixedColorContainer: css`
     min-width: 80px;
     font-size: ${theme.typography.bodySmall.fontSize};
+    padding-top: 5px;
   `,
   legendSymbol: css`
-    height: 10px;
-    width: 10px;
+    height: 15px;
+    width: 15px;
     margin: auto;
-    margin-right: 4px;
   `,
   colorScaleWrapper: css`
     min-width: 200px;
     font-size: ${theme.typography.bodySmall.fontSize};
-    padding: ${theme.spacing(0, 0.5)};
+    padding-top: 10px;
   `,
-  labelsWrapper: css`
-    display: flex;
-    justify-content: space-between;
-  `
-}));
+});