From 85fbaf8b01500b0a00018f4eb2d8f4ac51dd8a40 Mon Sep 17 00:00:00 2001 From: jinming Date: Mon, 16 Dec 2024 15:18:04 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Apin=20ui=20bugs=20and=20default=20s?= =?UTF-8?q?creens=20bg=20color=20modify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets2024/icons/home/IconSend.svg | 4 +-- .../AccountSelector/AccountsPanel.tsx | 9 ++++--- .../AccountSwitcher/AddressItemInPanel.tsx | 7 +++--- apps/mobile/src/constant/layout.ts | 25 +++++++++++++++---- .../Address/components/AddressItem.tsx | 4 +-- .../screens/Address/components/PinBadge.tsx | 18 ++++++++----- .../src/screens/Home/MultiAddressHome.tsx | 17 +++++++------ 7 files changed, 55 insertions(+), 29 deletions(-) diff --git a/apps/mobile/src/assets2024/icons/home/IconSend.svg b/apps/mobile/src/assets2024/icons/home/IconSend.svg index 47ed2771c..39a55c4fa 100644 --- a/apps/mobile/src/assets2024/icons/home/IconSend.svg +++ b/apps/mobile/src/assets2024/icons/home/IconSend.svg @@ -1,5 +1,5 @@ - + - + diff --git a/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx b/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx index 737795e00..6d386fefd 100644 --- a/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx +++ b/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx @@ -220,14 +220,17 @@ const getAddressItemInPanelStyle = createGetStyles2024(ctx => { pinnedWrapper: { flexShrink: 0, - paddingHorizontal: 6, - paddingVertical: 4, + // paddingHorizontal: 6, + // paddingVertical: 4, + width: 33, + height: 20, marginLeft: 4, - borderRadius: 8, + borderRadius: 6, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: ctx.colors2024['brand-light-1'], + flexWrap: 'nowrap', }, pinText: { color: ctx.colors2024['brand-default'], diff --git a/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx b/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx index 9f32fbfd5..930a38076 100644 --- a/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx +++ b/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx @@ -161,10 +161,11 @@ const getAddressItemInPanelStyle = createGetStyles2024(ctx => { pinnedWrapper: { flexShrink: 0, - paddingHorizontal: 6, - paddingVertical: 4, marginLeft: 4, - borderRadius: 8, + borderRadius: 6, + width: 33, + height: 20, + flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', diff --git a/apps/mobile/src/constant/layout.ts b/apps/mobile/src/constant/layout.ts index 53e4e8a9f..1f55a261b 100644 --- a/apps/mobile/src/constant/layout.ts +++ b/apps/mobile/src/constant/layout.ts @@ -200,6 +200,12 @@ function makeScreenSpecConfig() { androidStatusBarBg: colors2024['neutral-bg-1'], }; + const transparentDefault2024Conf = { + barStyle: adaptiveStatusBarStyle, + iosStatusBarStyle: adaptiveIosStatusBarStyle, + androidStatusBarBg: 'transparent', + }; + const bg2DefaultConf = { barStyle: adaptiveStatusBarStyle, iosStatusBarStyle: adaptiveIosStatusBarStyle, @@ -225,7 +231,7 @@ function makeScreenSpecConfig() { }; const themeSpecs = { - '@default': !isDarkTheme ? card2DefaultConf : bg1DefaultConf, + '@default': bg1Default2024Conf, '@bg1default': { ...bg1DefaultConf }, '@openeddapp': { barStyle: adaptiveStatusBarStyle, @@ -236,8 +242,8 @@ function makeScreenSpecConfig() { GetStartedScreen2024: bg1DefaultConf, NewUserGetStarted2024: bg1DefaultConf, - Home: bg1DefaultConf, - MultiAddressHome: bg1Default2024Conf, + Home: transparentDefault2024Conf, + // MultiAddressHome: bg1Default2024Conf, Unlock: bg1DefaultConf, MultiAddressHistory: bg1Default2024Conf, @@ -252,16 +258,25 @@ function makeScreenSpecConfig() { ImportSafeAddress: blueLightConf, ImportSuccess: blueLightConf, // ImportSuccess2024: blueLightConf, - + Settings: !isDarkTheme ? card2DefaultConf : bg1DefaultConf, + SingleAddressHome: !isDarkTheme ? card2DefaultConf : bg1DefaultConf, + Receive: !isDarkTheme ? card2DefaultConf : bg1DefaultConf, + GasAccount: !isDarkTheme ? card2DefaultConf : bg1DefaultConf, Send: bg1Default2024Conf, MultiSend: bg1Default2024Conf, Swap: bg1Default2024Conf, MultiSwap: bg1Default2024Conf, + Bridge: bg1Default2024Conf, + MultiBridge: bg1Default2024Conf, // Receive: blueLightConf, + AddressList: bg1Default2024Conf, + SafeAddressList: bg1Default2024Conf, + WatchAddressList: bg1Default2024Conf, + ApprovalAddressList: bg1Default2024Conf, GnosisTransactionQueue: card2DefaultConf, - Approvals: bg2DefaultConf, + Approvals: bg1Default2024Conf, SetPassword: blueLightConf, SetPassword2024: bg1Default2024Conf, diff --git a/apps/mobile/src/screens/Address/components/AddressItem.tsx b/apps/mobile/src/screens/Address/components/AddressItem.tsx index ec6307888..27ad8d38f 100644 --- a/apps/mobile/src/screens/Address/components/AddressItem.tsx +++ b/apps/mobile/src/screens/Address/components/AddressItem.tsx @@ -99,7 +99,7 @@ export const AddressItemEntry = (props: AddressItemProps) => { }, }, { - title: 'Edit Name', + title: 'Edit', icon: isDarkTheme ? require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_edit_dark.png') : require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_edit.png'), @@ -110,7 +110,7 @@ export const AddressItemEntry = (props: AddressItemProps) => { }, }, { - title: 'Address Details', + title: 'Details', icon: isDarkTheme ? require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_more_dark.png') : require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_more.png'), diff --git a/apps/mobile/src/screens/Address/components/PinBadge.tsx b/apps/mobile/src/screens/Address/components/PinBadge.tsx index f84c4149d..5f9d8f46b 100644 --- a/apps/mobile/src/screens/Address/components/PinBadge.tsx +++ b/apps/mobile/src/screens/Address/components/PinBadge.tsx @@ -5,13 +5,17 @@ import { Text, View } from 'react-native'; const getStyle = createGetStyles2024(({ colors2024 }) => ({ root: { - paddingHorizontal: 6, - paddingVertical: 4, - gap: 4, - borderRadius: 8, + // paddingHorizontal: 6, + // paddingVertical: 4, + // gap: 4, + borderRadius: 6, backgroundColor: colors2024['brand-light-1'], flexDirection: 'row', - // width: 33, + justifyContent: 'center', + alignItems: 'center', + width: 33, + height: 20, + flexWrap: 'nowrap', }, text: { fontSize: 14, @@ -28,7 +32,9 @@ export const PinBadge = () => { return ( {/* */} - Pin + + Pin + ); }; diff --git a/apps/mobile/src/screens/Home/MultiAddressHome.tsx b/apps/mobile/src/screens/Home/MultiAddressHome.tsx index c3cbbe474..179cb60d2 100644 --- a/apps/mobile/src/screens/Home/MultiAddressHome.tsx +++ b/apps/mobile/src/screens/Home/MultiAddressHome.tsx @@ -138,14 +138,7 @@ function MultiAddressHome(): JSX.Element { const { styles, colors2024, isLight } = useTheme2024({ getStyle }); const [pendingTxCount, setPendingTxCount] = useState(0); const timeRef = useRef(null); - - const { pinAddresses } = usePinAddresses({ - disableAutoFetch: true, - }); const { switchAccount } = useCurrentAccount(); - const { accounts, fetchAccounts } = useAccounts({ - disableAutoFetch: true, - }); const { width } = Dimensions.get('window'); const itemWidth = @@ -535,7 +528,7 @@ function MultiAddressHome(): JSX.Element { height={18} borderRadius={5} /> - + {calcPinPercent(item.balance || 0)} @@ -712,6 +705,14 @@ const getStyle = createGetStyles2024(({ colors2024, isLight }) => ({ pinHeader: { marginTop: -8, }, + pinGridText: { + color: colors2024['neutral-body'], + fontWeight: '500', + fontSize: 16, + lineHeight: 20, + textAlign: 'left', + fontFamily: 'SF Pro Rounded', + }, gridText: { color: colors2024['neutral-body'], fontWeight: '700',