use nc primary color seq for map layers

complexdatacollective · Dec 16, 2024 · 1563e06 · 1563e06
1 parent 365b419
commit 1563e06
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/lib/interviewer/containers/Interfaces/Geospatial.tsx b/lib/interviewer/containers/Interfaces/Geospatial.tsx
@@ -9,8 +9,10 @@ import type {
   Protocol,
 } from '~/lib/protocol-validation/schemas/src/8.zod';
 import Button from '~/lib/ui/components/Button';
+import { getCSSVariableAsString } from '~/lib/ui/utils/CSSVariables';
 import { usePrompts } from '../../behaviours/withPrompt';
 import CollapsablePrompts from '../../components/CollapsablePrompts';
+import Loading from '../../components/Loading';
 import Node from '../../components/Node';
 import { actionCreators as sessionActions } from '../../ducks/modules/session';
 import { useMapboxToken } from '../../hooks/useMapbox';
@@ -203,13 +205,17 @@ export default function GeospatialInterface({
 
       // add layers based on the protocol
       layers.forEach((layer) => {
+        const color =
+          getCSSVariableAsString(`--nc-${layer.color}`) ??
+          getCSSVariableAsString('--nc-primary-color-seq-1') ??
+          'black';
         if (layer.type === 'line') {
           mapRef.current?.addLayer({
             id: layer.id,
             type: 'line',
             source: 'geojson-data',
             paint: {
-              'line-color': layer.color,
+              'line-color': color,
               'line-width': layer.width! ?? 1,
             },
           });
@@ -219,7 +225,7 @@ export default function GeospatialInterface({
             type: 'fill',
             source: 'geojson-data',
             paint: {
-              'fill-color': layer.color,
+              'fill-color': color,
               'fill-opacity': layer.opacity,
             },
           });
@@ -229,7 +235,7 @@ export default function GeospatialInterface({
             type: 'fill',
             source: 'geojson-data',
             paint: {
-              'fill-color': layer.color,
+              'fill-color': color,
               'fill-opacity': layer.opacity,
             },
             filter: ['==', layer.filter, ''],
@@ -319,8 +325,7 @@ export default function GeospatialInterface({
   ]);
 
   if (!accessToken) {
-    // TODO: improve loading state
-    return <div>Loading...</div>;
+    return <Loading />;
   }
 
   return (

diff --git a/lib/test-protocol.ts b/lib/test-protocol.ts
@@ -35,22 +35,22 @@ export const protocol: Protocol = {
             id: 'censusTractsOutlineLayer',
             data: 'asset1',
             type: 'line',
-            color: 'purple',
+            color: 'primary-color-seq-1',
             width: 1,
           },
           {
             id: 'censusTractsFillLayer', // a fill layer is needed to have something to select
             data: 'asset1',
             type: 'fill',
-            color: 'purple',
+            color: 'primary-color-seq-1',
             opacity: 0,
           },
           {
             id: 'selectedCensusTract',
             data: 'asset1',
             type: 'fill',
-            color: 'purple',
-            opacity: 0.2,
+            color: 'primary-color-seq-1',
+            opacity: 0.5,
             filter: 'namelsad10',
           },
         ],
@@ -89,24 +89,24 @@ export const protocol: Protocol = {
             id: 'censusTractsOutlineLayer',
             data: 'asset2',
             type: 'line',
-            color: 'blue',
+            color: 'primary-color-seq-4',
             width: 1,
           },
           // needed to have something to select
           {
             id: 'censusTractsFillLayer',
             data: 'asset2',
             type: 'fill',
-            color: 'blue',
+            color: 'primary-color-seq-4',
             opacity: 0,
           },
           {
             id: 'selectedCensusTract',
             data: 'asset2',
             type: 'fill',
-            color: 'orange',
+            color: 'primary-color-seq-4',
             filter: 'NTAName',
-            opacity: 0.2,
+            opacity: 0.5,
           },
         ],
       },