From 6e29b5e2365197ad1030966da0306d6f6d01197f Mon Sep 17 00:00:00 2001 From: Christian Baroni Date: Mon, 18 Mar 2024 19:49:58 -0400 Subject: [PATCH] Fix Android AddressBar styles (#5531) --- src/components/DappBrowser/AddressBar.tsx | 3 ++- src/components/DappBrowser/address-bar/AddressInput.tsx | 4 +++- src/components/DappBrowser/address-bar/TabButton.tsx | 4 +++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/DappBrowser/AddressBar.tsx b/src/components/DappBrowser/AddressBar.tsx index c3d0157a5fb..56aa58555a9 100644 --- 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 index be9c548aaab..0975bb292f5 100644 --- 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 index ea9c12987e3..531b5382019 100644 --- 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) {