diff --git a/app/assets/img/Connect-active.svg b/app/assets/img/Connect-active.svg deleted file mode 100644 index 4e55d95f..00000000 --- a/app/assets/img/Connect-active.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/img/Connect.svg b/app/assets/img/Connect.svg deleted file mode 100644 index 2c90f4a1..00000000 --- a/app/assets/img/Connect.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/app/assets/img/Rectangle.png b/app/assets/img/Rectangle.png deleted file mode 100644 index f110974e..00000000 Binary files a/app/assets/img/Rectangle.png and /dev/null differ diff --git a/app/assets/img/active-explore-icon.svg b/app/assets/img/active-explore-icon.svg index eec87ebb..534639bb 100644 --- a/app/assets/img/active-explore-icon.svg +++ b/app/assets/img/active-explore-icon.svg @@ -1,6 +1,7 @@ - - - - - + + + + + + diff --git a/app/assets/img/credential-active.svg b/app/assets/img/credential-active.svg deleted file mode 100644 index 73bb8beb..00000000 --- a/app/assets/img/credential-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/img/credential.svg b/app/assets/img/credential.svg deleted file mode 100644 index 483b97cb..00000000 --- a/app/assets/img/credential.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/app/assets/img/explore-icon.svg b/app/assets/img/explore-icon.svg index 80f83956..7282e45c 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 deleted file mode 100644 index ab335e87..00000000 --- a/app/assets/img/home.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/img/homeinactivesvg.svg b/app/assets/img/homeinactivesvg.svg deleted file mode 100644 index 4d70f2d5..00000000 --- a/app/assets/img/homeinactivesvg.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/app/localization/en/index.ts b/app/localization/en/index.ts index 0183b5d4..ef217349 100644 --- a/app/localization/en/index.ts +++ b/app/localization/en/index.ts @@ -492,8 +492,7 @@ const translation = { "Home": "Home", "Scan": "Scan", "Credentials": "Credentials", - "Explore":"Explore", - "Connections": "Connections", + "Explore":"Explore" }, "RootStack": { "Contacts": "Contacts", diff --git a/app/navigators/TabStack.tsx b/app/navigators/TabStack.tsx index 116e4f44..3ae65710 100644 --- a/app/navigators/TabStack.tsx +++ b/app/navigators/TabStack.tsx @@ -1,12 +1,13 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import React from 'react' import { useTranslation } from 'react-i18next' -import { Text, useWindowDimensions, View, StyleSheet, ImageBackground } from 'react-native' +import { Text, useWindowDimensions, View, StyleSheet } 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' @@ -18,6 +19,8 @@ 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() @@ -27,7 +30,6 @@ const TabStack: React.FC = () => { const styles = StyleSheet.create({ tabBarIcon: { flex: 1, - zIndex: 1, }, }) @@ -38,26 +40,15 @@ const TabStack: React.FC = () => { return 0 } - const CustomTabBar = () => { - return ( - - - - ) - } + return ( , tabBarActiveTintColor: TabTheme.tabBarActiveTintColor, tabBarInactiveTintColor: TabTheme.tabBarInactiveTintColor, header: () => null, @@ -67,9 +58,9 @@ const TabStack: React.FC = () => { component={HomeStack} options={{ tabBarIconStyle: styles.tabBarIcon, - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({ color, focused }) => ( - {focused ? : } + {showLabels && ( { )} ), - tabBarShowLabel: false, - tabBarAccessibilityLabel: `${t('TabStack.Home')} `, + tabBarAccessibilityLabel: `${t('TabStack.Home')} (${ + total === 1 ? t('Home.OneNotification') : t('Home.CountNotifications', { count: total || 0 }) + })`, tabBarTestID: testIdWithKey(t('TabStack.Home')), + tabBarBadge: total || undefined, tabBarBadgeStyle: { marginLeft: leftMarginForDevice(width, height), backgroundColor: ColorPallet.semantic.error, @@ -115,41 +108,15 @@ 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: ({ color, focused }) => ( - {focused ? : } + {showLabels && ( = ({ navigation }) => { }, fabContainer: { position: 'absolute', - bottom: 1, - alignSelf: 'center', + bottom: 10, + right: 10, }, homeImage: { height: '85%', diff --git a/app/screens/ListCredentials.tsx b/app/screens/ListCredentials.tsx index d848ea6e..265b9bbe 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: 1, - alignSelf: 'center', + bottom: 10, + right: 10, }, }) diff --git a/app/screens/OrganizationList.tsx b/app/screens/OrganizationList.tsx index e514aff0..33846920 100644 --- a/app/screens/OrganizationList.tsx +++ b/app/screens/OrganizationList.tsx @@ -81,8 +81,8 @@ const OrganizationList: React.FC = ({ navigation }) => { }, scanContainer: { position: 'absolute', - bottom: 1, - alignSelf: 'center', + bottom: 10, + right: 10, }, itemSeparator: { backgroundColor: ColorPallet.brand.primaryBackground, diff --git a/app/theme.ts b/app/theme.ts index 39b75e4b..472b5f62 100644 --- a/app/theme.ts +++ b/app/theme.ts @@ -3,25 +3,20 @@ 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 @@ -37,12 +32,6 @@ 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 { @@ -574,11 +563,11 @@ export const ListItems = StyleSheet.create({ export const TabTheme = { tabBarStyle: { - height: 80, - backgroundColor: ColorPallet.grayscale.white, - shadowOffset: { width: 0, height: -4 }, - shadowRadius: 8, - shadowColor: ColorPallet.grayscale.white, + height: 60, + backgroundColor: '#D3E4FA', + shadowOffset: { width: 0, height: -3 }, + shadowRadius: 6, + shadowColor: ColorPallet.grayscale.black, shadowOpacity: 0.1, borderTopWidth: 0, paddingBottom: 0, @@ -589,7 +578,7 @@ export const TabTheme = { alignItems: 'center', }, tabBarActiveTintColor: ColorPallet.brand.primary, - tabBarInactiveTintColor: ColorPallet.grayscale.black, + tabBarInactiveTintColor: ColorPallet.notification.infoText, tabBarTextStyle: { ...TextTheme.label, fontWeight: 'normal', @@ -859,12 +848,6 @@ 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 e096c0d4..5d0844b7 100644 --- a/app/types/navigators.ts +++ b/app/types/navigators.ts @@ -68,7 +68,6 @@ export enum TabStacks { ConnectStack = 'Tab Connect Stack', CredentialStack = 'Tab Credential Stack', OrganizationStack = 'Tab OrganizationStack Stack', - ContactStack = ' Tab Contacts Stack', } export type RootStackParams = { @@ -86,7 +85,6 @@ export type TabStackParams = { [TabStacks.ConnectStack]: NavigatorScreenParams [TabStacks.CredentialStack]: NavigatorScreenParams [TabStacks.OrganizationStack]: NavigatorScreenParams - [TabStacks.ContactStack]: NavigatorScreenParams } export type AuthenticateStackParams = {