fix: delete map shows confirmation twice (#845)

* Adds on success handler to the hook so that the modal is only closed after the refresh is done. * Adds body text and header text to the background map files so that they line up with figma designs. Adds warning red so that the red color is as design specifies * Uses Full screen menu list for map management menu screen.
digidem · Nov 19, 2024 · d14a225 · d14a225
1 parent 271a4af
commit d14a225
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 61 deletions.
diff --git a/src/frontend/lib/styles.ts b/src/frontend/lib/styles.ts
@@ -24,3 +24,4 @@ export const DARK_ORANGE = '#E86826';
 export const SYNC_BACKGROUND = '#2348B2';
 export const GPS_MODAL_TEXT = 'rgb(40,40,40)';
 export const DARK_GREEN = '#59A553';
+export const WARNING_RED = '#D92222';
diff --git a/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx b/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
@@ -14,7 +14,7 @@ import {
 import ErrorSvg from '../../../images/Error.svg';
 import GreenCheckSvg from '../../../images/GreenCheck.svg';
 import noop from '../../../lib/noop';
-import {DARK_GREY, RED, WHITE} from '../../../lib/styles';
+import {RED, WHITE} from '../../../lib/styles';
 import {
   BottomSheetModal,
   BottomSheetModalContent,
@@ -23,7 +23,8 @@ import {
 import {Button} from '../../../sharedComponents/Button';
 import {ErrorBottomSheet} from '../../../sharedComponents/ErrorBottomSheet';
 import {Loading} from '../../../sharedComponents/Loading';
-import {Text} from '../../../sharedComponents/Text';
+import {HeaderText} from '../../../sharedComponents/Text/HeaderText';
+import {BodyText} from '../../../sharedComponents/Text/BodyText';
 import {type NativeRootNavigationProps} from '../../../sharedTypes/navigation';
 import {ChooseMapFile} from './ChooseMapFile';
 import {CustomMapDetails} from './CustomMapDetails';
@@ -130,10 +131,12 @@ export function BackgroundMapsScreen() {
   return (
     <>
       <ScrollView contentContainerStyle={styles.container}>
-        <Text style={styles.aboutText}>{t(m.about)}</Text>
+        <HeaderText variant="header2" style={styles.aboutText}>
+          {t(m.about)}
+        </HeaderText>
         <View style={styles.descriptionContainer}>
-          <Text>{t(m.description1)}</Text>
-          <Text>{t(m.description2)}</Text>
+          <BodyText>{t(m.description1)}</BodyText>
+          <BodyText>{t(m.description2)}</BodyText>
         </View>
 
         <CustomMapInfoSection
@@ -172,18 +175,20 @@ export function BackgroundMapsScreen() {
 
         {customMapInfoQuery.status === 'error' && (
           <>
-            <Text style={styles.infoLoadErrorText}>
+            <BodyText variant="large" style={styles.infoLoadErrorText}>
               {t(m.customMapInfoLoadError)}
-            </Text>
+            </BodyText>
             <Button
               fullWidth
               variant="outlined"
               onPress={() => {
                 removeCustomMapMutation.mutate();
               }}>
-              <Text style={styles.removeMapFileButtonText}>
+              <HeaderText
+                variant="header5"
+                style={styles.removeMapFileButtonText}>
                 {t(m.removeMapFile)}
-              </Text>
+              </HeaderText>
             </Button>
           </>
         )}
@@ -206,8 +211,11 @@ export function BackgroundMapsScreen() {
               text: t(m.deleteMapButtonText),
               icon: <MaterialIcon size={30} name="delete" color={WHITE} />,
               onPress: () => {
-                removeCustomMapMutation.mutate();
-                removeMapBottomSheet.closeSheet();
+                removeCustomMapMutation.mutate(undefined, {
+                  onSuccess: () => {
+                    removeMapBottomSheet.closeSheet();
+                  },
+                });
               },
             },
             {
@@ -322,22 +330,16 @@ const styles = StyleSheet.create({
   },
   aboutText: {
     textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 36,
-    color: DARK_GREY,
   },
   infoLoadErrorText: {
     textAlign: 'center',
     color: RED,
-    fontSize: 20,
   },
   removeMapFileButton: {
     backgroundColor: RED,
   },
   removeMapFileButtonText: {
-    fontWeight: '700',
     letterSpacing: 0.5,
-    fontSize: 18,
     color: RED,
   },
 });
diff --git a/src/frontend/screens/Settings/MapManagement/ChooseMapFile.tsx b/src/frontend/screens/Settings/MapManagement/ChooseMapFile.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {StyleSheet, View} from 'react-native';
 
-import {MEDIUM_GREY, RED} from '../../../lib/styles';
+import {NEW_DARK_GREY, RED} from '../../../lib/styles';
 import {Button} from '../../../sharedComponents/Button';
-import {Text} from '../../../sharedComponents/Text';
 import {DownloadIcon} from '../../../sharedComponents/icons';
+import {HeaderText} from '../../../sharedComponents/Text/HeaderText';
+import {BodyText} from '../../../sharedComponents/Text/BodyText';
 
 const m = defineMessages({
   chooseFile: {
@@ -27,14 +28,19 @@ export function ChooseMapFile({onChooseFile}: {onChooseFile: () => void}) {
         <View style={styles.buttonContentContainer}>
           <DownloadIcon size={24} />
           <View>
-            <Text style={styles.buttonTextBase}>
+            <HeaderText variant="header5" style={styles.buttonTextBase}>
               {t(m.chooseFile)}
-              <Text style={styles.asteriskText}> *</Text>
-            </Text>
+              <HeaderText variant="header5" style={styles.asteriskText}>
+                {' '}
+                *
+              </HeaderText>
+            </HeaderText>
           </View>
         </View>
       </Button>
-      <Text style={styles.fileTypeText}>{t(m.acceptedFileTypes)}</Text>
+      <BodyText variant="smallMeta" style={styles.fileTypeText}>
+        {t(m.acceptedFileTypes)}
+      </BodyText>
     </View>
   );
 }
@@ -49,17 +55,13 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   buttonTextBase: {
-    fontWeight: '700',
     letterSpacing: 0.5,
-    fontSize: 18,
   },
   asteriskText: {
-    fontSize: 18,
     color: RED,
   },
   fileTypeText: {
-    color: MEDIUM_GREY,
-    fontSize: 14,
     textAlign: 'center',
+    color: NEW_DARK_GREY,
   },
 });
diff --git a/src/frontend/screens/Settings/MapManagement/CustomMapDetails.tsx b/src/frontend/screens/Settings/MapManagement/CustomMapDetails.tsx
@@ -4,9 +4,15 @@ import {StyleSheet, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 
 import {bytesToMegabytes} from '../../../lib/bytesToMegabytes';
-import {BLACK, MEDIUM_GREY, RED, VERY_LIGHT_GREY} from '../../../lib/styles';
+import {
+  BLACK,
+  NEW_DARK_GREY,
+  WARNING_RED,
+  VERY_LIGHT_GREY,
+} from '../../../lib/styles';
 import {Loading} from '../../../sharedComponents/Loading';
-import {Text} from '../../../sharedComponents/Text';
+import {BodyText} from '../../../sharedComponents/Text/BodyText';
+import {HeaderText} from '../../../sharedComponents/Text/HeaderText';
 
 const m = defineMessages({
   mapNameColumn: {
@@ -53,34 +59,40 @@ export function CustomMapDetails({
   return (
     <View style={styles.rootContainer}>
       <View style={styles.columnHeadersContainer}>
-        <Text style={styles.columnTitleText}>{t(m.mapNameColumn)}</Text>
-        <Text style={styles.columnTitleText}>{t(m.dateAddedColumn)}</Text>
+        <BodyText variant="smallMeta" style={styles.columnTitleText}>
+          {t(m.mapNameColumn)}
+        </BodyText>
+        <BodyText variant="smallMeta" style={styles.columnTitleText}>
+          {t(m.dateAddedColumn)}
+        </BodyText>
       </View>
       <View style={styles.cardContainer}>
         <View style={styles.cardRow}>
           <View style={styles.columnLeft}>
-            <Text style={styles.nameText}>{name}</Text>
-            <Text style={styles.sizeText}>
+            <HeaderText variant="header5">{name}</HeaderText>
+            <BodyText variant="smallMeta" style={styles.sizeText}>
               {displayedSize !== undefined &&
                 t(m.sizeInMegabytes, {
                   value: displayedSize,
                 })}
-            </Text>
+            </BodyText>
           </View>
           <View style={styles.columnRight}>
-            <Text style={styles.dateAddedText}>
+            <BodyText variant="smallMeta" style={styles.dateAddedText}>
               <FormattedDate
                 year="numeric"
                 month="short"
                 day="2-digit"
                 value={dateAdded}
               />
-            </Text>
+            </BodyText>
           </View>
         </View>
         <View style={styles.cardRow}>
           <TouchableOpacity onPress={onRemove} hitSlop={20}>
-            <Text style={styles.removeMapText}>{t(m.removeMap)}</Text>
+            <BodyText variant="smallMeta" style={styles.removeMapText}>
+              {t(m.removeMap)}
+            </BodyText>
           </TouchableOpacity>
         </View>
         {loading && <LoadingOverlay />}
@@ -119,21 +131,17 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   columnTitleText: {
-    color: MEDIUM_GREY,
+    color: NEW_DARK_GREY,
   },
   dateAddedText: {
-    color: MEDIUM_GREY,
+    color: NEW_DARK_GREY,
   },
   sizeText: {
-    color: MEDIUM_GREY,
+    color: NEW_DARK_GREY,
   },
   removeMapText: {
     fontWeight: 'bold',
-    color: RED,
-  },
-  nameText: {
-    fontWeight: 'bold',
-    fontSize: 18,
+    color: WARNING_RED,
   },
   columnLeft: {
     flex: 1,

diff --git a/src/frontend/screens/Settings/MapManagement/index.tsx b/src/frontend/screens/Settings/MapManagement/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import {type NativeStackNavigationOptions} from '@react-navigation/native-stack';
 import {defineMessages, useIntl, type MessageDescriptor} from 'react-intl';
-import {ScrollView} from 'react-native';
-
-import {List, ListItem, ListItemText} from '../../../sharedComponents/List';
 import {type NativeRootNavigationProps} from '../../../sharedTypes/navigation';
+import {FullScreenMenuList} from '../../../sharedComponents/MenuList/FullScreenMenuList';
+import {MenuListItemType} from '../../../sharedComponents/MenuList/MenuListItem';
 
 const m = defineMessages({
   screenTitle: {
@@ -21,18 +20,17 @@ export function MapManagementScreen({
   navigation,
 }: NativeRootNavigationProps<'MapManagement'>) {
   const {formatMessage: t} = useIntl();
-  return (
-    <ScrollView>
-      <List>
-        <ListItem
-          onPress={() => {
-            navigation.navigate('BackgroundMaps');
-          }}>
-          <ListItemText primary={t(m.backgroundMaps)} />
-        </ListItem>
-      </List>
-    </ScrollView>
-  );
+
+  const menuItems: MenuListItemType[] = [
+    {
+      onPress: () => {
+        navigation.navigate('BackgroundMaps');
+      },
+      primaryText: t(m.backgroundMaps),
+    },
+  ];
+
+  return <FullScreenMenuList data={menuItems} />;
 }
 
 export function createNavigationOptions({