Fix Android AddressBar styles (#5531)

rainbow-me · Mar 18, 2024 · 6e29b5e · 6e29b5e
1 parent 5fe58d5
commit 6e29b5e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/components/DappBrowser/AddressBar.tsx b/src/components/DappBrowser/AddressBar.tsx
@@ -9,6 +9,7 @@ import { AccountIcon } from './address-bar/AccountIcon';
 import { TabButton } from './address-bar/TabButton';
 import { AddressInput } from './address-bar/AddressInput';
 import useDimensions from '@/hooks/useDimensions';
+import { IS_IOS } from '@/env';
 
 const GOOGLE_SEARCH_URL = 'https://www.google.com/search?q=';
 const HTTP = 'http://';
@@ -60,7 +61,7 @@ export const AddressBar = () => {
   const bottomBarStyle = useAnimatedStyle(() => {
     return {
       height: TAB_BAR_HEIGHT + 88,
-      transform: [{ translateY: Math.min(-(keyboard.height.value - 82), 0) }],
+      transform: [{ translateY: Math.min(-(keyboard.height.value - (IS_IOS ? 82 : 46)), 0) }],
     };
   }, [tabViewProgress, keyboard.height]);
 

diff --git a/src/components/DappBrowser/address-bar/AddressInput.tsx b/src/components/DappBrowser/address-bar/AddressInput.tsx
@@ -50,7 +50,9 @@ export const AddressInput = ({
   const labelQuaternary = useForegroundColor('labelQuaternary');
   const separatorSecondary = useForegroundColor('separatorSecondary');
 
-  const buttonColor = isDarkMode ? fillSecondary : opacity(globalColors.white100, 0.9);
+  const buttonColorIOS = isDarkMode ? fillSecondary : opacity(globalColors.white100, 0.9);
+  const buttonColorAndroid = isDarkMode ? globalColors.blueGrey100 : globalColors.white100;
+  const buttonColor = IS_IOS ? buttonColorIOS : buttonColorAndroid;
 
   const inputStyle = useAnimatedStyle(() => ({
     pointerEvents: (tabViewProgress?.value ?? 0) < 1 ? 'auto' : 'none',

diff --git a/src/components/DappBrowser/address-bar/TabButton.tsx b/src/components/DappBrowser/address-bar/TabButton.tsx
@@ -22,7 +22,9 @@ export const TabButton = ({
   const fillSecondary = useForegroundColor('fillSecondary');
   const separatorSecondary = useForegroundColor('separatorSecondary');
 
-  const buttonColor = isDarkMode ? fillSecondary : opacity(globalColors.white100, 0.9);
+  const buttonColorIOS = isDarkMode ? fillSecondary : opacity(globalColors.white100, 0.9);
+  const buttonColorAndroid = isDarkMode ? globalColors.blueGrey100 : globalColors.white100;
+  const buttonColor = IS_IOS ? buttonColorIOS : buttonColorAndroid;
 
   const onPress = useCallback(() => {
     if (!isFocused) {