diff --git a/app/assets/img/Connect-active.svg b/app/assets/img/Connect-active.svg new file mode 100644 index 00000000..4e55d95f --- /dev/null +++ b/app/assets/img/Connect-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/img/Connect.svg b/app/assets/img/Connect.svg new file mode 100644 index 00000000..2c90f4a1 --- /dev/null +++ b/app/assets/img/Connect.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/assets/img/Rectangle.png b/app/assets/img/Rectangle.png new file mode 100644 index 00000000..f110974e Binary files /dev/null and b/app/assets/img/Rectangle.png differ diff --git a/app/assets/img/active-explore-icon.svg b/app/assets/img/active-explore-icon.svg index 534639bb..eec87ebb 100644 --- a/app/assets/img/active-explore-icon.svg +++ b/app/assets/img/active-explore-icon.svg @@ -1,7 +1,6 @@ - - - - - - + + + + + diff --git a/app/assets/img/credential-active.svg b/app/assets/img/credential-active.svg new file mode 100644 index 00000000..73bb8beb --- /dev/null +++ b/app/assets/img/credential-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/img/credential.svg b/app/assets/img/credential.svg new file mode 100644 index 00000000..483b97cb --- /dev/null +++ b/app/assets/img/credential.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/img/explore-icon.svg b/app/assets/img/explore-icon.svg index 7282e45c..80f83956 100644 --- a/app/assets/img/explore-icon.svg +++ b/app/assets/img/explore-icon.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/app/assets/img/home.svg b/app/assets/img/home.svg new file mode 100644 index 00000000..ab335e87 --- /dev/null +++ b/app/assets/img/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/img/homeinactivesvg.svg b/app/assets/img/homeinactivesvg.svg new file mode 100644 index 00000000..4d70f2d5 --- /dev/null +++ b/app/assets/img/homeinactivesvg.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/localization/en/index.ts b/app/localization/en/index.ts index ef217349..0183b5d4 100644 --- a/app/localization/en/index.ts +++ b/app/localization/en/index.ts @@ -492,7 +492,8 @@ const translation = { "Home": "Home", "Scan": "Scan", "Credentials": "Credentials", - "Explore":"Explore" + "Explore":"Explore", + "Connections": "Connections", }, "RootStack": { "Contacts": "Contacts", diff --git a/app/navigators/TabStack.tsx b/app/navigators/TabStack.tsx index 3ae65710..116e4f44 100644 --- a/app/navigators/TabStack.tsx +++ b/app/navigators/TabStack.tsx @@ -1,13 +1,12 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import React from 'react' import { useTranslation } from 'react-i18next' -import { Text, useWindowDimensions, View, StyleSheet } from 'react-native' +import { Text, useWindowDimensions, View, StyleSheet, ImageBackground } from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import { AttachTourStep } from '../components/tour/AttachTourStep' -import { useConfiguration } from '../contexts/configuration' import { useTheme } from '../contexts/theme' +import ListContacts from '../screens/ListContacts' import { Assets } from '../theme' import { TabStackParams, TabStacks } from '../types/navigators' import { isTablet, orientation, Orientation } from '../utils/helpers' @@ -19,8 +18,6 @@ import OrganizationStack from './OrganizationStack' const TabStack: React.FC = () => { const { width, height } = useWindowDimensions() - const { useCustomNotifications } = useConfiguration() - const { total } = useCustomNotifications() const { t } = useTranslation() const Tab = createBottomTabNavigator() const { ColorPallet, TabTheme } = useTheme() @@ -30,6 +27,7 @@ const TabStack: React.FC = () => { const styles = StyleSheet.create({ tabBarIcon: { flex: 1, + zIndex: 1, }, }) @@ -40,15 +38,26 @@ const TabStack: React.FC = () => { return 0 } - + const CustomTabBar = () => { + return ( + + + + ) + } return ( , tabBarActiveTintColor: TabTheme.tabBarActiveTintColor, tabBarInactiveTintColor: TabTheme.tabBarInactiveTintColor, header: () => null, @@ -58,9 +67,9 @@ const TabStack: React.FC = () => { component={HomeStack} options={{ tabBarIconStyle: styles.tabBarIcon, - tabBarIcon: ({ color, focused }) => ( + tabBarIcon: ({ focused }) => ( - + {focused ? : } {showLabels && ( { )} ), + tabBarShowLabel: false, - tabBarAccessibilityLabel: `${t('TabStack.Home')} (${ - total === 1 ? t('Home.OneNotification') : t('Home.CountNotifications', { count: total || 0 }) - })`, + tabBarAccessibilityLabel: `${t('TabStack.Home')} `, tabBarTestID: testIdWithKey(t('TabStack.Home')), - tabBarBadge: total || undefined, tabBarBadgeStyle: { marginLeft: leftMarginForDevice(width, height), backgroundColor: ColorPallet.semantic.error, @@ -108,15 +115,41 @@ const TabStack: React.FC = () => { tabBarTestID: testIdWithKey(t('TabStack.Explore')), }} /> + ( + + + {focused ? : } + {showLabels && ( + + {t('TabStack.Connections')} + + )} + + + ), + tabBarShowLabel: false, + tabBarAccessibilityLabel: t('TabStack.Credentials'), + tabBarTestID: testIdWithKey(t('TabStack.Credentials')), + }} + /> ( + tabBarIcon: ({ focused }) => ( - + {focused ? : } {showLabels && ( = ({ navigation }) => { }, fabContainer: { position: 'absolute', - bottom: 10, - right: 10, + bottom: 1, + alignSelf: 'center', }, homeImage: { height: '85%', diff --git a/app/screens/ListCredentials.tsx b/app/screens/ListCredentials.tsx index 265b9bbe..d848ea6e 100644 --- a/app/screens/ListCredentials.tsx +++ b/app/screens/ListCredentials.tsx @@ -28,8 +28,8 @@ const styles = StyleSheet.create({ container: { flex: 1 }, scanContainer: { position: 'absolute', - bottom: 10, - right: 10, + bottom: 1, + alignSelf: 'center', }, }) diff --git a/app/screens/OrganizationList.tsx b/app/screens/OrganizationList.tsx index 33846920..e514aff0 100644 --- a/app/screens/OrganizationList.tsx +++ b/app/screens/OrganizationList.tsx @@ -81,8 +81,8 @@ const OrganizationList: React.FC = ({ navigation }) => { }, scanContainer: { position: 'absolute', - bottom: 10, - right: 10, + bottom: 1, + alignSelf: 'center', }, itemSeparator: { backgroundColor: ColorPallet.brand.primaryBackground, diff --git a/app/theme.ts b/app/theme.ts index 472b5f62..39b75e4b 100644 --- a/app/theme.ts +++ b/app/theme.ts @@ -3,20 +3,25 @@ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-nat import { SvgProps } from 'react-native-svg' import Arrow from './assets/icons/large-arrow.svg' +import ConnectionIconActive from './assets/img/Connect-active.svg' +import Connection from './assets/img/Connect.svg' import ExploreIconActive from './assets/img/active-explore-icon.svg' import AppLockout from './assets/img/app-lockout.svg' import BackupSuccess from './assets/img/backup-success.svg' import Biometrics from './assets/img/biometrics.svg' import ContactBook from './assets/img/contact-book.svg' +import CredentialIconActive from './assets/img/credential-active.svg' import CredentialDeclined from './assets/img/credential-declined.svg' +import Credential from './assets/img/credential.svg' import DeleteNotification from './assets/img/delete-notification.svg' import EmptyWallet from './assets/img/empty-wallet.svg' import ExploreIcon from './assets/img/explore-icon.svg' +import HomeIconActive from './assets/img/home.svg' +import HomeIcon from './assets/img/homeinactivesvg.svg' import IconInfoSentDark from './assets/img/icon-info-sent-dark.svg' import IconProofRequestDark from './assets/img/icon-proof-request-dark.svg' import Logo from './assets/img/logo-with-text.svg' import ProofRequestDeclined from './assets/img/proof-declined.svg' - export interface ISVGAssets { appLockout: React.FC biometrics: React.FC @@ -32,6 +37,12 @@ export interface ISVGAssets { IconInfoSentDark: React.FC ExploreIcon: React.FC ExploreIconActive: React.FC + HomeIcon: React.FC + HomeIconActive: React.FC + Connection: React.FC + ConnectionIconActive: React.FC + Credential: React.FC + CredentialIconActive: React.FC } export interface IFontAttributes { @@ -563,11 +574,11 @@ export const ListItems = StyleSheet.create({ export const TabTheme = { tabBarStyle: { - height: 60, - backgroundColor: '#D3E4FA', - shadowOffset: { width: 0, height: -3 }, - shadowRadius: 6, - shadowColor: ColorPallet.grayscale.black, + height: 80, + backgroundColor: ColorPallet.grayscale.white, + shadowOffset: { width: 0, height: -4 }, + shadowRadius: 8, + shadowColor: ColorPallet.grayscale.white, shadowOpacity: 0.1, borderTopWidth: 0, paddingBottom: 0, @@ -578,7 +589,7 @@ export const TabTheme = { alignItems: 'center', }, tabBarActiveTintColor: ColorPallet.brand.primary, - tabBarInactiveTintColor: ColorPallet.notification.infoText, + tabBarInactiveTintColor: ColorPallet.grayscale.black, tabBarTextStyle: { ...TextTheme.label, fontWeight: 'normal', @@ -848,6 +859,12 @@ export const Assets = { IconInfoSentDark: IconInfoSentDark, ExploreIcon: ExploreIcon, ExploreIconActive: ExploreIconActive, + HomeIcon: HomeIcon, + HomeIconActive: HomeIconActive, + Connection: Connection, + ConnectionIconActive: ConnectionIconActive, + Credential: Credential, + CredentialIconActive: CredentialIconActive, }, img: { logoPrimary: { diff --git a/app/types/navigators.ts b/app/types/navigators.ts index 5d0844b7..e096c0d4 100644 --- a/app/types/navigators.ts +++ b/app/types/navigators.ts @@ -68,6 +68,7 @@ export enum TabStacks { ConnectStack = 'Tab Connect Stack', CredentialStack = 'Tab Credential Stack', OrganizationStack = 'Tab OrganizationStack Stack', + ContactStack = ' Tab Contacts Stack', } export type RootStackParams = { @@ -85,6 +86,7 @@ export type TabStackParams = { [TabStacks.ConnectStack]: NavigatorScreenParams [TabStacks.CredentialStack]: NavigatorScreenParams [TabStacks.OrganizationStack]: NavigatorScreenParams + [TabStacks.ContactStack]: NavigatorScreenParams } export type AuthenticateStackParams = {