google play accessibility issues - map modal

src/app/components/MapDataMenu.js

@@ -21,7 +21,7 @@ function DataMenuHeader({ setShowModal }) {
     <View
       style={{
         backgroundColor: colors.primary,
-        height: 42,
+        height: 48,
         justifyContent: "center",
         flexDirection: "row",
         justifyContent: "space-between",
@@ -34,7 +34,7 @@ function DataMenuHeader({ setShowModal }) {
         style={styles.topBarIcon}
         onPress={() => setShowModal(null)}
       >
-        <MaterialCommunityIcons name="close" size={24} color={colors.white} />
+        <MaterialCommunityIcons name="close" size={38} color={colors.white} alignSelf="center"/>
       </TouchableOpacity>
     </View>
   );
@@ -55,7 +55,7 @@ function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
     >
       <View
         style={{
-          height: 40,
+          height: 48,
           justifyContent: "center",
           flexDirection: "row",
           justifyContent: "space-between",
@@ -210,7 +210,7 @@ function ListDataOptions(
             style={{
               alignContent: "flex-end",
               width: 120,
-              height: 36,
+              height: 48,
               justifyContent: "center",
               borderRadius: 6,
               backgroundColor: !item ? colors.activated : colors.notActivated,
@@ -340,9 +340,15 @@ const styles = StyleSheet.create({
     color: colors.white,
     alignSelf: "center",
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: 18,
   },
   topBarIcon: {
     alignSelf: "center",
+  //  backgroundColor: "red",    
+    height: 48,
+    width: 48,
+    alignItems: "flex-end",
+    alignContent: "center",
+    marginTop: 5,
   },
 });