fix: Added new blue variant, added message when no data maps

techmatters · May 14, 2024 · 22642ac · 22642ac
1 parent 4dfdd65
commit 22642ac
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 14 deletions.
diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json
@@ -1022,6 +1022,7 @@
         "form_location_add_data_layer_dialog_title_blank": "Add a data layer to chapter",
         "form_location_add_data_layer_dialog_subtitle": "Select a map from your landscape or group",
         "form_location_add_data_layer_dialog_description": "Polygon(s), lines, points from the map will be added to this chapter. The embedded data map will become public when publishing this story map.",
+        "form_location_add_data_layer_dialog_layers_count_zero": "You haven't made a map in Terraso yet. Make a map in a group or landscape to see it here.",
         "form_location_add_data_layer_dialog_layers_count_one": "{{count}} data map is available for you",
         "form_location_add_data_layer_dialog_layers_count_other": "{{count}} data maps are available for you",
         "form_location_add_data_layer_dialog_source_file": "Source file: {{filename}}",

diff --git a/src/storyMap/components/StoryMapForm/DataLayerDialog.js b/src/storyMap/components/StoryMapForm/DataLayerDialog.js
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import {
+  Alert,
   List as BaseList,
   ListItem as BaseListItem,
   Box,
@@ -97,11 +98,23 @@ const DataLayerDialog = props => {
           </Box>
         ) : (
           <>
-            <Typography variant="caption" component="p" sx={{ mt: 3 }}>
-              {t('storyMap.form_location_add_data_layer_dialog_layers_count', {
-                count: dataLayers.length,
-              })}
-            </Typography>
+            {_.isEmpty(dataLayers) ? (
+              <Alert severity="info" sx={{ mt: 2 }}>
+                {t(
+                  'storyMap.form_location_add_data_layer_dialog_layers_count_zero'
+                )}
+              </Alert>
+            ) : (
+              <Typography variant="caption" component="p" sx={{ mt: 3 }}>
+                {t(
+                  'storyMap.form_location_add_data_layer_dialog_layers_count',
+                  {
+                    count: dataLayers.length,
+                  }
+                )}
+              </Typography>
+            )}
+
             <RadioGroup
               value={selected}
               onChange={event => setSelected(event.target.value)}
@@ -189,7 +202,12 @@ const DataLayerDialog = props => {
         <Button onClick={onClose}>
           {t('storyMap.form_location_add_data_layer_dialog_cancel')}
         </Button>
-        <Button variant="contained" onClick={onConfirmWrapper} autoFocus>
+        <Button
+          variant="contained"
+          onClick={onConfirmWrapper}
+          autoFocus
+          disabled={fetching || _.isEmpty(selected)}
+        >
           {t('storyMap.form_location_add_data_layer_confirm')}
         </Button>
       </DialogActions>

diff --git a/src/storyMap/components/StoryMapForm/EditableMedia.js b/src/storyMap/components/StoryMapForm/EditableMedia.js
@@ -366,7 +366,7 @@ const EditableImage = props => {
           sx={({ palette }) => ({
             backgroundColor: 'white',
             '&:hover': {
-              backgroundColor: palette.blue.dark2,
+              backgroundColor: palette.blue.dark3,
             },
           })}
         >
@@ -438,7 +438,7 @@ const EditableAudio = props => {
           sx={({ palette }) => ({
             backgroundColor: 'white',
             '&:hover': {
-              backgroundColor: palette.blue.dark2,
+              backgroundColor: palette.blue.dark3,
             },
           })}
         >
@@ -512,7 +512,7 @@ const EditableVideo = props => {
           sx={({ palette }) => ({
             backgroundColor: 'white',
             '&:hover': {
-              backgroundColor: palette.blue.dark2,
+              backgroundColor: palette.blue.dark3,
             },
           })}
         >
@@ -570,7 +570,7 @@ const EditableEmbedded = props => {
           sx={({ palette }) => ({
             backgroundColor: 'white',
             '&:hover': {
-              backgroundColor: palette.blue.dark2,
+              backgroundColor: palette.blue.dark3,
             },
           })}
         >

diff --git a/src/storyMap/components/StoryMapForm/MapLocationDialog.js b/src/storyMap/components/StoryMapForm/MapLocationDialog.js
@@ -165,11 +165,16 @@ const DataLayer = props => {
               <Typography sx={{ fontWeight: 700, ml: 1 }}>title</Typography>
             </Trans>
             <IconButton onClick={onRemove}>
-              <DeleteIcon sx={{ color: 'blue.dark2' }} />
+              <DeleteIcon sx={{ color: 'blue.dark3' }} />
             </IconButton>
           </>
         ) : (
-          <Button variant="outlined" size="small" onClick={() => setOpen(true)}>
+          <Button
+            variant="outlined"
+            size="small"
+            sx={{ color: 'blue.dark2', borderColor: 'blue.dark2' }}
+            onClick={() => setOpen(true)}
+          >
             {t('storyMap.form_location_add_data_layer_button')}
           </Button>
         )}

diff --git a/src/storyMap/components/UserStoryMapEmbed.js b/src/storyMap/components/UserStoryMapEmbed.js
@@ -45,7 +45,7 @@ const EmbedHeader = props => {
       justifyContent="flex-end"
       sx={{
         color: 'white',
-        bgcolor: 'blue.dark2',
+        bgcolor: 'blue.dark3',
         zIndex: 2,
         position: 'fixed',
         width: '100%',

diff --git a/src/theme.js b/src/theme.js
@@ -70,7 +70,8 @@ const colorTheme = createTheme({
       mid: '#D2EDF7',
       dark: '#2C7690',
       dark1: '#125A7E',
-      dark2: '#00344D',
+      dark2: '#076B8E',
+      dark3: '#00344D',
       background: '#F7FAFB', // rgba(44, 118, 144, 0.04) converted to hex for use on nonwhite background where alpha can't be used
     },
     black: '#000000',