Merge pull request #1198 from IFRCGo/fix/local-unit-stylings

Update local unit stylings

Author: samshara

.changeset/breezy-peaches-talk.md

@@ -0,0 +1,11 @@
+---
+"@ifrc-go/ui": patch
+---
+
+- Add and export Legend component
+- Add FilterBar component
+- Update RawList to extend Key prop from react
+- Add a pageWidth option for Modal size
+- Update Container to use FilterBar
+- Remove withGridViewInFiterProp from Container, make it the default behavior
+- Add filterActions props in Container

.changeset/polite-houses-suffer.md

@@ -0,0 +1,9 @@
+---
+"go-web-app": patch
+---
+
+- Update Local Unit map, table and form to match the updated design
+- Add delete button in Local units table and form
+- Use filter prop in container and remove manual stylings
+- Update size of WikiLink to match height of other action items
+- Add error boundary to BaseMap component

app/src/components/WikiLink/index.tsx

@@ -36,7 +36,7 @@ function WikiLink<N extends string>(props: Props<N>) {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         >
-            <WikiHelpSectionLineIcon />
+            <WikiHelpSectionLineIcon className={styles.icon} />
         </Link>
     );
 }

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

@@ -1,3 +1,8 @@
 .wiki-link {
-    font-size: var(--go-ui-font-size-3xl);
+    padding: 0;
+    font-size: var(--go-ui-font-size-2xl);
+
+    .icon {
+        transform: scale(1.4);
+    }
 }

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

@@ -382,7 +382,6 @@ function ActiveOperationMap(props: Props) {
             heading={!presentationMode && heading}
             withHeaderBorder={!presentationMode}
             childrenContainerClassName={styles.content}
-            withGridViewInFilter
             filters={!presentationMode && (
                 <>
                     <DateInput

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

@@ -254,7 +254,6 @@ function AppealsTable(props: Props) {
         <Container
             className={_cs(styles.appealsTable, className)}
             childrenContainerClassName={styles.content}
-            withGridViewInFilter
             heading={heading}
             withHeaderBorder={isDefined(heading)}
             filters={(

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

@@ -3,6 +3,7 @@ import {
     useMemo,
 } from 'react';
 import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { ErrorBoundary } from '@sentry/react';
 import {
     isDefined,
     isFalsyString,
@@ -22,6 +23,8 @@ import {
     defaultNavControlPosition,
 } from '#utils/map';
 
+import styles from './styles.module.css';
+
 type MapProps = Parameters<typeof Map>[0];
 
 type overrides = 'mapStyle' | 'mapOptions' | 'navControlShown' | 'navControlPosition' | 'navControlOptions' | 'scaleControlShown';
@@ -175,4 +178,21 @@ function BaseMap(props: Props) {
     );
 }
 
-export default BaseMap;
+function BaseMapWithErrorBoundary(props: Props) {
+    return (
+        <ErrorBoundary
+            fallback={(
+                <div className={styles.mapError}>
+                    Failed to load map!
+                </div>
+            )}
+        >
+            <BaseMap
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </ErrorBoundary>
+    );
+}
+
+export default BaseMapWithErrorBoundary;

app/src/components/domain/BaseMap/styles.module.css

@@ -0,0 +1,9 @@
+.map-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--go-ui-color-background);
+    min-height: 20rem;
+    color: var(--go-ui-color-red);
+    font-size: var(--go-ui-font-size-lg);
+}

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

@@ -103,7 +103,9 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     type: 'Point',
                     coordinates: [value.lng, value.lat],
                 },
-                properties: {},
+                properties: {
+                    radius: 10,
+                },
             };
         },
         [value],
@@ -150,7 +152,7 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                 visibility: 'visible',
             },
             paint: {
-                'circle-radius': 10,
+                'circle-radius': ['get', 'radius'],
                 'circle-color': COLOR_PRIMARY_RED,
             },
         }),

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

@@ -193,7 +193,6 @@ function HistoricalDataChart(props: Props) {
             className={styles.historicalDataChart}
             heading={strings.historicalChartHeading}
             withHeaderBorder
-            filtersContainerClassName={styles.filters}
             filters={(
                 <SelectInput
                     name={undefined}