From a3f84e2644770d8641cf3e51e0f403284995b7d2 Mon Sep 17 00:00:00 2001
From: Cindy Green <cimigreen@hotmail.com>
Date: Thu, 14 Nov 2024 12:57:37 -0500
Subject: [PATCH 1/3] Adds on success handler to the hook so that the modal is
 only closed after the refresh is done.

---
 .../screens/Settings/MapManagement/BackgroundMaps.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx b/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
index 883484c38..d33d6f5b0 100644
--- a/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
+++ b/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
@@ -206,8 +206,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();
+                  },
+                });
               },
             },
             {

From baf8b034944a79ced5dcf1334ce633c6df7b8c52 Mon Sep 17 00:00:00 2001
From: Cindy Green <cimigreen@hotmail.com>
Date: Mon, 18 Nov 2024 12:27:47 -0500
Subject: [PATCH 2/3] 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

---
 src/frontend/lib/styles.ts                    |  1 +
 .../Settings/MapManagement/BackgroundMaps.tsx | 29 ++++++------
 .../Settings/MapManagement/ChooseMapFile.tsx  | 24 +++++-----
 .../MapManagement/CustomMapDetails.tsx        | 44 +++++++++++--------
 4 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/src/frontend/lib/styles.ts b/src/frontend/lib/styles.ts
index bca8a9a31..ee9ec2ba2 100644
--- 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
index d33d6f5b0..d860c5770 100644
--- 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>
           </>
         )}
@@ -325,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
index 5cb284431..e71197ba1 100644
--- 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
index 3eb5edfd1..0dff655b4 100644
--- 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,

From 866045907ffe92c4bcda3f6b449b3cfcffe63ab8 Mon Sep 17 00:00:00 2001
From: Cindy Green <cimigreen@hotmail.com>
Date: Tue, 19 Nov 2024 10:02:41 -0500
Subject: [PATCH 3/3] Uses Full screen menu list for map management menu
 screen.

---
 .../screens/Settings/MapManagement/index.tsx  | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/frontend/screens/Settings/MapManagement/index.tsx b/src/frontend/screens/Settings/MapManagement/index.tsx
index cad00b4f8..70f610a6b 100644
--- 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({