Merge branch 'main' into fix/12728_getAnalyticsParams_anon_prop

MetaMask · Jan 13, 2025 · 62a620d · 62a620d
2 parents 3b88727 + 8873337
commit 62a620d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 65 deletions.
diff --git a/app/components/Views/BrowserUrlModal/BrowserUrlModal.tsx b/app/components/Views/BrowserUrlModal/BrowserUrlModal.tsx
@@ -20,6 +20,7 @@ import Routes from '../../../constants/navigation/Routes';
 import Device from '../../../util/device';
 
 import { BrowserURLBarSelectorsIDs } from '../../../../e2e/selectors/Browser/BrowserURLBar.selectors';
+import { SafeAreaView } from 'react-native-safe-area-context';
 export interface BrowserUrlParams {
   onUrlInputSubmit: (inputValue: string | undefined) => void;
   url: string | undefined;
@@ -72,7 +73,7 @@ const BrowserUrlModal = () => {
   );
 
   const renderContent = () => (
-    <>
+    <SafeAreaView style={styles.screen}>
       <View style={styles.urlModalContent}>
         <View style={styles.searchWrapper}>
           <TextInput
@@ -117,7 +118,7 @@ const BrowserUrlModal = () => {
         input={autocompleteValue}
         onDismiss={triggerClose}
       />
-    </>
+    </SafeAreaView>
   );
 
   return (

diff --git a/app/components/Views/BrowserUrlModal/__snapshots__/BrowserUrlModal.test.tsx.snap b/app/components/Views/BrowserUrlModal/__snapshots__/BrowserUrlModal.test.tsx.snap
@@ -9,81 +9,86 @@ exports[`BrowserUrlModal should render correctly 1`] = `
     }
   }
 >
-  <View
+  <RNCSafeAreaView
     style={
       {
         "backgroundColor": "#ffffff",
-        "flexDirection": "row",
-        "height": 87,
-        "paddingHorizontal": 10,
-        "paddingTop": 50,
+        "flex": 1,
       }
     }
   >
     <View
       style={
         {
-          "backgroundColor": "#f2f4f6",
-          "borderRadius": 30,
-          "flex": 1,
+          "alignItems": "center",
           "flexDirection": "row",
-          "height": 30,
+          "paddingHorizontal": 10,
         }
       }
     >
-      <TextInput
-        autoCapitalize="none"
-        autoCorrect={false}
-        autoFocus={true}
-        keyboardAppearance="light"
-        keyboardType="web-search"
-        onChangeText={[Function]}
-        onSubmitEditing={[Function]}
-        placeholder="Search or Type URL"
-        placeholderTextColor="#9fa6ae"
-        returnKeyType="go"
-        selectTextOnFocus={true}
+      <View
         style={
           {
-            "color": "#141618",
+            "backgroundColor": "#f2f4f6",
+            "borderRadius": 30,
             "flex": 1,
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "paddingLeft": 15,
+            "flexDirection": "row",
           }
         }
-        testID="browser-modal-url-input"
-      />
-    </View>
-    <TouchableOpacity
-      onPress={[Function]}
-      style={
-        {
-          "justifyContent": "center",
-          "marginLeft": 10,
-          "marginTop": -6,
-        }
-      }
-      testID="cancel-url-button"
-    >
-      <Text
+      >
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoFocus={true}
+          keyboardAppearance="light"
+          keyboardType="web-search"
+          onChangeText={[Function]}
+          onSubmitEditing={[Function]}
+          placeholder="Search or Type URL"
+          placeholderTextColor="#9fa6ae"
+          returnKeyType="go"
+          selectTextOnFocus={true}
+          style={
+            {
+              "color": "#141618",
+              "flex": 1,
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "paddingLeft": 15,
+              "paddingVertical": 6,
+            }
+          }
+          testID="browser-modal-url-input"
+        />
+      </View>
+      <TouchableOpacity
+        onPress={[Function]}
         style={
           {
-            "color": "#0376c9",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
+            "marginLeft": 10,
           }
         }
+        testID="cancel-url-button"
       >
-        Cancel
-      </Text>
-    </TouchableOpacity>
-  </View>
-  <Component
-    onDismiss={[Function]}
-    onSubmit={[Function]}
-  />
+        <Text
+          style={
+            {
+              "color": "#0376c9",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+            }
+          }
+        >
+          Cancel
+        </Text>
+      </TouchableOpacity>
+    </View>
+    <Component
+      onDismiss={[Function]}
+      onSubmit={[Function]}
+    />
+  </RNCSafeAreaView>
 </ForwardRef>
 `;
diff --git a/app/components/Views/BrowserUrlModal/styles.ts b/app/components/Views/BrowserUrlModal/styles.ts
@@ -11,31 +11,24 @@ export const createStyles = (colors: any) =>
       flex: 1,
       backgroundColor: colors.background.default,
     },
-    urlModal: {
-      justifyContent: 'flex-start',
-      margin: 0,
-    },
     urlModalContent: {
       flexDirection: 'row',
-      paddingTop: Device.isAndroid() ? 10 : Device.isIphoneX() ? 50 : 27,
       paddingHorizontal: 10,
-      height: Device.isAndroid() ? 59 : Device.isIphoneX() ? 87 : 65,
-      backgroundColor: colors.background.default,
+      alignItems: 'center',
     },
     clearButton: { paddingHorizontal: 12, justifyContent: 'center' },
     urlInput: {
       ...fontStyles.normal,
       fontSize: Device.isAndroid() ? 16 : 14,
       paddingLeft: 15,
+      paddingVertical: 6,
       flex: 1,
       color: colors.text.default,
       // TODO: Replace "any" with type
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any,
     cancelButton: {
-      marginTop: -6,
       marginLeft: 10,
-      justifyContent: 'center',
     },
     cancelButtonText: {
       fontSize: 14,
@@ -48,7 +41,6 @@ export const createStyles = (colors: any) =>
       flexDirection: 'row',
       borderRadius: 30,
       backgroundColor: colors.background.alternative,
-      height: Device.isAndroid() ? 40 : 30,
       flex: 1,
     },
   });