From b03b6c346123586ff52ef036b9135f6094cab3bf Mon Sep 17 00:00:00 2001 From: yanas Date: Sat, 14 Dec 2024 16:30:04 +0100 Subject: [PATCH] feat(suite-native): use filled icons for focused items in tab bar --- suite-common/icons/generateIconFont.ts | 3 + .../iconFontsMobile/TrezorSuiteIcons.json | 102 +++++++++--------- .../iconFontsMobile/TrezorSuiteIcons.ttf | Bin 20796 -> 21468 bytes suite-native/app/app.config.ts | 2 +- .../app/src/navigation/enhanceTabOption.ts | 3 + suite-native/app/src/navigation/routes.ts | 4 + .../navigation/src/components/TabBar.tsx | 4 +- .../navigation/src/components/TabBarItem.tsx | 12 ++- suite-native/navigation/src/types.tsx | 1 + 9 files changed, 78 insertions(+), 53 deletions(-) diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts index 88f67015002..e858556d750 100644 --- a/suite-common/icons/generateIconFont.ts +++ b/suite-common/icons/generateIconFont.ts @@ -51,6 +51,7 @@ const usedIcons = [ 'database', 'detective', 'discover', + 'discoverFilled', 'eye', 'eyeSlash', 'facebookLogo', @@ -60,9 +61,11 @@ const usedIcons = [ 'flag', 'flagCheckered', 'gear', + 'gearFilled', 'githubLogo', 'handPalm', 'house', + 'houseFilled', 'image', 'info', 'lifebuoy', diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json index 9a8aae0bf23..2a8841a2ad4 100644 --- a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json +++ b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json @@ -44,53 +44,57 @@ "lifebuoy": 61739, "info": 61740, "image": 61741, - "house": 61742, - "handPalm": 61743, - "githubLogo": 61744, - "gear": 61745, - "flagCheckered": 61746, - "flag": 61747, - "fingerprintSimple": 61748, - "fingerprint": 61749, - "filePdf": 61750, - "facebookLogo": 61751, - "eyeSlash": 61752, - "eye": 61753, - "discover": 61754, - "detective": 61755, - "database": 61756, - "cpu": 61757, - "copy": 61758, - "coins": 61759, - "coinVerticalCheck": 61760, - "clockClockwise": 61761, - "circleDashed": 61762, - "checks": 61763, - "checkCircleFilled": 61764, - "checkCircle": 61765, - "check": 61766, - "chatCircle": 61767, - "change": 61768, - "caretUpFilled": 61769, - "caretUpDown": 61770, - "caretUp": 61771, - "caretRight": 61772, - "caretLeft": 61773, - "caretDownFilled": 61774, - "caretDown": 61775, - "caretCircleRight": 61776, - "calendar": 61777, - "bugBeetle": 61778, - "bookmarkSimple": 61779, - "backspace": 61780, - "arrowsCounterClockwise": 61781, - "arrowUpRight": 61782, - "arrowUp": 61783, - "arrowURightDown": 61784, - "arrowSquareOut": 61785, - "arrowRight": 61786, - "arrowLineUpRight": 61787, - "arrowLineUp": 61788, - "arrowLineDown": 61789, - "arrowDown": 61790 + "houseFilled": 61742, + "house": 61743, + "handPalm": 61744, + "githubLogo": 61745, + "gearFilled": 61746, + "gear": 61747, + "flagCheckered": 61748, + "flag": 61749, + "fingerprintSimple": 61750, + "fingerprint": 61751, + "filePdf": 61752, + "facebookLogo": 61753, + "eyeSlash": 61754, + "eye": 61755, + "discoverFilled": 61756, + "discover": 61757, + "detective": 61758, + "database": 61759, + "cpu": 61760, + "copy": 61761, + "coins": 61762, + "coinVerticalCheck": 61763, + "clockClockwise": 61764, + "circleDashed": 61765, + "checks": 61766, + "checkCircleFilled": 61767, + "checkCircle": 61768, + "check": 61769, + "chatCircle": 61770, + "change": 61771, + "caretUpFilled": 61772, + "caretUpDown": 61773, + "caretUp": 61774, + "caretRight": 61775, + "caretLeft": 61776, + "caretDownFilled": 61777, + "caretDown": 61778, + "caretCircleRight": 61779, + "calendar": 61780, + "bugBeetle": 61781, + "bookmarkSimple": 61782, + "backspace": 61783, + "arrowsCounterClockwise": 61784, + "arrowUpRight": 61785, + "arrowUp": 61786, + "arrowURightDown": 61787, + "arrowSquareOut": 61788, + "arrowRight": 61789, + "arrowLineUpRight": 61790, + "arrowLineUp": 61791, + "arrowLineDownFilled": 61792, + "arrowLineDown": 61793, + "arrowDown": 61794 } diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf index c752a59087745b27568609c4df8327fdb5d536de..6c7d41c0222857d81b2ac96ff9e3b97422f3af17 100644 GIT binary patch delta 922 zcmXw1U1(ER9RL6CJ@=zGYf_W+rY1M{#zb$iP2)_mtkBkNu8PCfTCt;!cJ0lFO-4RS zTWcL-qF^V(fqI33Pf`@64>GyK2kH8tFCticopi&&o`zWZS{Ux1raR~S&j0Ioe&>U; zvV`mR@p|myj{tZL048%4YkK7jcN>6T01#KF$`{TiHy+&ra8dcQ{$jz(kKVd7NWmLI zrbr2H6t9!NLfBiZ%q`3ue*d2I-qtnCwVXBh$M`z{rJL%{E7rm^&cj2hwNV_YT9v~6 zzkPkak2_&tH9uI5@OUzY%^=$v~#08#c|b+v7pWNF7S) zdVP8(C3+K*ws-Nt->4Nyi0Q zI4&`EnwR$*dhXy$DFNS&gYTpm6%4lI0bC`E}2Vdhs zSFv_(ws5pmE*J8`wl5d0YW}2Et|(Kbx#GF(Ky9j~Ockt|2Fd<#Xw>7*mu7Rd`NB@l bxjOVS`hC{SOzr$Ysaoi-ov-e&jp5LLs(jFy delta 441 zcmcb!oN>=0#tF*xZ43;IJq!#C3CX#M1$y@xw=gg;XD~3ZwWa4&rU`U#?qy)$+Q7hI zZ<3Lkm=ZB%fiF<)10Xib017Zgfc5SH@>Mc&ODb|F{r?X%?+p;w zNO?%LNL`S6C9NdwB%L5#Cp}Gii}VkfCRrv~E!i^JdvYvtI&vv;tK=@pbI9Atm&niB z#N8{m`J-kF)8<@VAFj>37Fxoar+d3G1HE|9Z{Ox6{cLhpKULP2-SuAKe { slug: appSlugs[buildType], owner: appOwners[buildType], version: suiteNativeVersion, - runtimeVersion: '20', + runtimeVersion: '21', ...(buildType === 'production' ? {} : { diff --git a/suite-native/app/src/navigation/enhanceTabOption.ts b/suite-native/app/src/navigation/enhanceTabOption.ts index 47d7ec9b0e3..3bd2059c638 100644 --- a/suite-native/app/src/navigation/enhanceTabOption.ts +++ b/suite-native/app/src/navigation/enhanceTabOption.ts @@ -4,6 +4,7 @@ import { AppTabsParamList } from '@suite-native/navigation'; type TabOption = { routeName: RouteName; iconName: IconName; + focusedIconName: IconName; label: string; params?: ParamList[RouteName]; }; @@ -14,12 +15,14 @@ export const enhanceTabOption = < >({ routeName, iconName, + focusedIconName, label, params, }: TabOption) => ({ [routeName]: { routeName, iconName, + focusedIconName, label, params, }, diff --git a/suite-native/app/src/navigation/routes.ts b/suite-native/app/src/navigation/routes.ts index c60ab265948..00da16f02a6 100644 --- a/suite-native/app/src/navigation/routes.ts +++ b/suite-native/app/src/navigation/routes.ts @@ -5,12 +5,14 @@ import { enhanceTabOption } from './enhanceTabOption'; const homeStack = enhanceTabOption({ routeName: AppTabsRoutes.HomeStack, iconName: 'house', + focusedIconName: 'houseFilled', label: 'Home', }); const accountsStack = enhanceTabOption({ routeName: AppTabsRoutes.AccountsStack, iconName: 'discover', + focusedIconName: 'discoverFilled', label: 'My assets', params: { screen: AccountsStackRoutes.Accounts, @@ -21,11 +23,13 @@ const receiveStack = enhanceTabOption({ routeName: AppTabsRoutes.ReceiveStack, label: 'Receive', iconName: 'arrowLineDown', + focusedIconName: 'arrowLineDown', }); const settingsStack = enhanceTabOption({ routeName: AppTabsRoutes.SettingsStack, iconName: 'gear', + focusedIconName: 'gearFilled', label: 'Settings', }); diff --git a/suite-native/navigation/src/components/TabBar.tsx b/suite-native/navigation/src/components/TabBar.tsx index 5a65d00e9f6..983837bd85b 100644 --- a/suite-native/navigation/src/components/TabBar.tsx +++ b/suite-native/navigation/src/components/TabBar.tsx @@ -43,7 +43,8 @@ export const TabBar = ({ state, navigation, tabItemOptions }: TabBarProps) => { > {state.routes.map((route, index) => { const isFocused = state.index === index; - const { routeName, iconName, label, params } = tabItemOptions[route.name]; + const { routeName, iconName, focusedIconName, label, params } = + tabItemOptions[route.name]; const handleTabBarItemPress = () => { const event = navigation.emit({ @@ -62,6 +63,7 @@ export const TabBar = ({ state, navigation, tabItemOptions }: TabBarProps) => { key={route.key} isFocused={isFocused} iconName={iconName} + focusedIconName={focusedIconName} title={label} onPress={handleTabBarItemPress} testID={route.name} diff --git a/suite-native/navigation/src/components/TabBarItem.tsx b/suite-native/navigation/src/components/TabBarItem.tsx index 340dc774f04..87de25db0d5 100644 --- a/suite-native/navigation/src/components/TabBarItem.tsx +++ b/suite-native/navigation/src/components/TabBarItem.tsx @@ -8,6 +8,7 @@ type TabBarItemProps = { isFocused: boolean; onPress: () => void; iconName: IconName; + focusedIconName: IconName; title?: string; testID: string; }; @@ -26,7 +27,14 @@ const tabBarItemContainerStyle = prepareNativeStyle(utils => ({ const TAB_BAR_ITEM_HORIZONTAL_HIT_SLOP = 15; -export const TabBarItem = ({ isFocused, onPress, iconName, title, testID }: TabBarItemProps) => { +export const TabBarItem = ({ + isFocused, + onPress, + iconName, + focusedIconName, + title, + testID, +}: TabBarItemProps) => { const { applyStyle } = useNativeStyles(); return ( @@ -49,7 +57,7 @@ export const TabBarItem = ({ isFocused, onPress, iconName, title, testID }: TabB > diff --git a/suite-native/navigation/src/types.tsx b/suite-native/navigation/src/types.tsx index 5b1fe91bcd8..2d32b6a022d 100644 --- a/suite-native/navigation/src/types.tsx +++ b/suite-native/navigation/src/types.tsx @@ -64,6 +64,7 @@ export type TabsOptions = { [routeName: string]: { routeName: string; iconName: IconName; + focusedIconName: IconName; label: string; params?: Record; };