Merge branch 'feature/add-new-AA-storm' into feature/permanently-show…

…-last-analysed-date-tooltip-2
WFP-VAM · Jan 15, 2025 · dce9860 · dce9860
2 parents 3f1a628 + 7d975ab
commit dce9860
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/frontend/src/components/MapView/DateSelector/TimelineItems/__snapshots__/index.test.tsx.snap b/frontend/src/components/MapView/DateSelector/TimelineItems/__snapshots__/index.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renders as expected 1`] = `
       data-date-index="0"
     >
       <div
-        class="makeStyles-dayItem-17"
+        class="makeStyles-dayItem-18"
       />
     </div>
   </mock-tooltip>

diff --git a/frontend/src/components/MapView/DateSelector/TimelineItems/index.tsx b/frontend/src/components/MapView/DateSelector/TimelineItems/index.tsx
@@ -104,6 +104,7 @@ const TimelineItems = memo(
                 tooltip: isShowingAAStormLayer
                   ? classes.AAStormTooltip
                   : classes.AADroughtTooltip,
+                arrow: classes.arrow,
               }}
             >
               <Grid
@@ -214,6 +215,22 @@ const useStyles = makeStyles(() =>
         border: '2px solid black',
       },
     },
+
+    arrow: {
+      width: '11px',
+      height: '11px',
+      bottom: '-1px !important',
+      '&::before': {
+        width: '8px',
+        height: '8px',
+        backgroundColor: 'white',
+        transformOrigin: 'center !important',
+        boxSizing: 'border-box',
+        borderWidth: '0px 1px 1px 0px',
+        borderColor: '#D3D3D3',
+        borderStyle: 'solid',
+      },
+    },
   }),
 );
 

diff --git a/...end/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormDatePopup/index.tsx b/...end/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormDatePopup/index.tsx
@@ -83,7 +83,7 @@ function AAStormDatePopup({ timeSeries }: AAStormDatePopupProps) {
         longitude={lng}
         latitude={lat}
         anchor="top"
-        offset={15}
+        offset={25}
         closeButton={false}
         onClose={() => null}
         closeOnClick={false}
@@ -126,13 +126,27 @@ const useStyles = makeStyles(() =>
     },
     popup: {
       '& > .maplibregl-popup-content': {
-        border: '1px solid #A4A4A4',
-        padding: 5,
+        border: 'none',
+        padding: '4px',
+        borderRadius: '4px',
+        background: 'white',
+        boxShadow: 'inset 0px 0px 0px 1px #A4A4A4',
+        position: 'relative',
       },
       '& > .maplibregl-popup-tip': {
-        borderBottomColor: '#A4A4A4',
-        borderLeftWidth: '8px',
-        borderRightWidth: '8px',
+        display: 'none',
+      },
+      // hack to display the popup tip without overlapping border
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        left: '50%',
+        top: -5,
+        width: '10px',
+        height: '10px',
+        background: 'white',
+        transform: 'translateX(-50%) rotate(45deg)',
+        boxShadow: 'inset 1px 1px 0px 0px #A4A4A4',
       },
     },
   }),