Update source for the map style in local unit map

Author: frozenhelium

app/src/components/Link/index.tsx

@@ -285,6 +285,8 @@ function Link(props: Props) {
                 ellipsize && styles.ellipsized,
                 className,
             )}
+            title={(ellipsize && typeof childrenFromProps === 'string')
+                ? childrenFromProps : undefined}
         >
             {children}
         </div>

app/src/components/Link/styles.module.css

@@ -7,6 +7,7 @@
     width: fit-content;
 
     &.ellipsized {
+        width: 100%;
         overflow: auto;
     }
 

app/src/components/domain/ActiveCountryBaseMapLayer/index.tsx

@@ -12,6 +12,13 @@ import {
     COLOR_WHITE,
 } from '#utils/constants';
 
+const hiddenFillLayerOptions: Omit<FillLayer, 'id'> = {
+    type: 'fill',
+    layout: {
+        visibility: 'none',
+    },
+};
+
 interface Props {
     activeCountryIso3: string | undefined | null;
 }
@@ -25,10 +32,18 @@ function ActiveCountryBaseMapLayer(props: Props) {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-color': [
-                    'match',
-                    ['get', 'iso3'],
-                    activeCountryIso3,
-                    COLOR_ACTIVE_REGION,
+                    'interpolate',
+                    ['linear'],
+                    ['zoom'],
+                    2,
+                    [
+                        'match',
+                        ['get', 'iso3'],
+                        activeCountryIso3,
+                        COLOR_ACTIVE_REGION,
+                        COLOR_LIGHT_GREY,
+                    ],
+                    10,
                     COLOR_LIGHT_GREY,
                 ],
             },
@@ -80,6 +95,10 @@ function ActiveCountryBaseMapLayer(props: Props) {
                 layerKey="admin-0"
                 layerOptions={adminZeroHighlightLayerOptions}
             />
+            <MapLayer
+                layerKey="admin-0-highlight"
+                layerOptions={hiddenFillLayerOptions}
+            />
             <MapLayer
                 layerKey="admin-1-boundary"
                 layerOptions={adminOneBoundaryLayerOptions}

app/src/components/domain/HighlightedOperations/OperationCard/index.tsx

@@ -119,6 +119,8 @@ function OperationCard(props: Props) {
         <Container
             className={_cs(styles.operationCard, className)}
             // heading={name}
+            headingClassName={styles.heading}
+            headingContainerClassName={styles.headingContainer}
             heading={(
                 <Link
                     to="emergenciesLayout"

app/src/components/domain/HighlightedOperations/OperationCard/styles.module.css

@@ -1,6 +1,18 @@
 .operation-card {
     border-radius: var(--go-ui-border-radius-lg);
     box-shadow: var(--go-ui-box-shadow-md);
+    width: 100%;
+    overflow: auto;
+
+    .heading-container {
+        width: 100%;
+        overflow: auto;
+    }
+
+    .heading {
+        width: 100%;
+        overflow: auto;
+    }
 
     .severity-indicator {
         font-size: var(--go-ui-font-size-xl);

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 import { sumSafe } from '@ifrc-go/ui/utils';
 import {
     isDefined,
+    isNotDefined,
     isTruthyString,
 } from '@togglecorp/fujs';
 import {
@@ -151,7 +152,7 @@ function LocalUnitsMap() {
         response: publicLocalUnitsResponse,
         pending: publicLocalUnitsPending,
     } = useRequest({
-        skip: requestType !== PUBLIC,
+        skip: requestType !== PUBLIC || isNotDefined(countryResponse),
         url: '/api/v2/public-local-units/',
         query: urlQuery,
     });
@@ -160,7 +161,7 @@ function LocalUnitsMap() {
         response: localUnitsResponse,
         pending: localUnitsPending,
     } = useRequest({
-        skip: requestType !== AUTHENTICATED,
+        skip: requestType !== AUTHENTICATED || isNotDefined(countryResponse),
         url: '/api/v2/local-units/',
         query: urlQuery,
     });
@@ -235,7 +236,7 @@ function LocalUnitsMap() {
         pending: publicLocalUnitDetailPending,
         error: publicLocalUnitDetailError,
     } = useRequest({
-        skip: requestType !== PUBLIC,
+        skip: requestType !== PUBLIC || isNotDefined(clickedPointProperties),
         url: '/api/v2/public-local-units/{id}/',
         pathVariables: isDefined(clickedPointProperties) ? ({
             id: clickedPointProperties.localUnitId,
@@ -247,24 +248,24 @@ function LocalUnitsMap() {
         pending: superLocalUnitDetailPending,
         error: superLocalUnitDetailError,
     } = useRequest({
-        skip: requestType !== AUTHENTICATED,
+        skip: requestType !== AUTHENTICATED || isNotDefined(clickedPointProperties),
         url: '/api/v2/local-units/{id}/',
         pathVariables: isDefined(clickedPointProperties) ? ({
             id: clickedPointProperties.localUnitId,
         }) : undefined,
     });
 
     const localUnitDetail = requestType !== AUTHENTICATED
-        ? superLocalUnitDetailResponse
-        : publicLocalUnitDetailResponse;
+        ? publicLocalUnitDetailResponse
+        : superLocalUnitDetailResponse;
 
     const localUnitDetailPending = requestType !== AUTHENTICATED
-        ? superLocalUnitDetailPending
-        : publicLocalUnitDetailPending;
+        ? publicLocalUnitDetailPending
+        : superLocalUnitDetailPending;
 
     const localUnitDetailError = requestType !== AUTHENTICATED
-        ? superLocalUnitDetailError
-        : publicLocalUnitDetailError;
+        ? publicLocalUnitDetailError
+        : superLocalUnitDetailError;
 
     const localUnitsGeoJson = react.useMemo<GeoJSON.FeatureCollection<GeoJSON.Geometry>>(
         () => ({
@@ -352,6 +353,7 @@ function LocalUnitsMap() {
         >
             <div className={styles.mapContainerWithContactDetails}>
                 <BaseMap
+                    mapStyle="mapbox://styles/go-ifrc/clvvgugzh00x501pc1n00b8cz"
                     withoutLabel
                     baseLayers={(
                         <ActiveCountryBaseMapLayer

packages/ui/src/components/LegendItem/styles.module.css

@@ -16,6 +16,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 50%;
+        padding: var(--go-ui-spacing-2xs);
         width: 1.2rem;
         height: 1.2rem;