diff --git a/app/android/app/src/main/res/mipmap-xxhdpi/basic_swish.png b/app/android/app/src/main/res/mipmap-xxhdpi/basic_swish.png deleted file mode 100644 index 2c5ed52e..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxhdpi/basic_swish.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png deleted file mode 100644 index c1a17504..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png deleted file mode 100644 index 01114ce1..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxhdpi/splash_icon.png b/app/android/app/src/main/res/mipmap-xxhdpi/splash_icon.png deleted file mode 100644 index 763bf967..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxhdpi/splash_icon.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxxhdpi/basic_swish.png b/app/android/app/src/main/res/mipmap-xxxhdpi/basic_swish.png deleted file mode 100644 index 395dad7a..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxxhdpi/basic_swish.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png deleted file mode 100644 index c1a17504..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png deleted file mode 100644 index 01114ce1..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/android/app/src/main/res/mipmap-xxxhdpi/splash_icon.png b/app/android/app/src/main/res/mipmap-xxxhdpi/splash_icon.png deleted file mode 100644 index 763bf967..00000000 Binary files a/app/android/app/src/main/res/mipmap-xxxhdpi/splash_icon.png and /dev/null differ diff --git a/app/src/HomeContentviewstyle.ts b/app/src/HomeContentviewstyle.ts new file mode 100644 index 00000000..669111d1 --- /dev/null +++ b/app/src/HomeContentviewstyle.ts @@ -0,0 +1,87 @@ +import { StyleSheet } from 'react-native' + +const offset = 25 + +export const styles = StyleSheet.create({ + container: { + paddingHorizontal: offset, + paddingBottom: 25 * 3, + }, + messageContainer: { + alignItems: 'center', + justifyContent: 'center', + marginTop: 35, + marginHorizontal: offset, + }, + feedbackContainer: { + paddingTop: 15, + marginHorizontal: offset, + }, + feedbackIcon: { + paddingRight: 10, + }, + homebadage: { width: 29, height: 28, flexShrink: 0, justifyContent: 'space-between' }, + homebadageview: { + flexDirection: 'row', + marginTop: 30, + justifyContent: 'center', + alignSelf: 'center', + marginLeft: 20, + }, + badageview: { + flexDirection: 'row', + marginLeft: 40, + }, + badagecontainer: { + height: 200, + width: 100, + alignSelf: 'center', + marginRight: 20, + }, + badageText: { + fontSize: 14, + color: '#1F4EAD', + textAlign: 'center', + fontWeight: 'bold', + marginTop: 5, + marginLeft: 5, + }, + badageCount: { + fontSize: 17, + color: '#1F4EAD', + textAlign: 'center', + fontWeight: 'bold', + marginTop: 5, + marginLeft: 10, + }, + homeImage: { + width: 300.236, + height: 300.303, + flexShrink: 0, + }, + button: { + paddingHorizontal: 16, + }, + countext: { + color: '#2052A8', + fontSize: 10, + fontWeight: '500', + fontStyle: 'normal', + textAlign: 'center', + marginTop: 3, + }, + countbackgroundImage: { + position: 'absolute', + bottom: 40, + right: 0, + left: 20, + top: 0, + height: 19, + width: 19, + }, + line: { + alignSelf: 'center', + marginBottom: 5, + marginTop: 5, + }, +}) diff --git a/app/src/assets/img/Countbackground.png b/app/src/assets/img/Countbackground.png new file mode 100644 index 00000000..7c9cbc44 Binary files /dev/null and b/app/src/assets/img/Countbackground.png differ diff --git a/app/src/assets/img/Line.png b/app/src/assets/img/Line.png new file mode 100644 index 00000000..46ef23db Binary files /dev/null and b/app/src/assets/img/Line.png differ diff --git a/app/src/assets/img/Vector.png b/app/src/assets/img/Vector.png new file mode 100644 index 00000000..d9f67ce0 Binary files /dev/null and b/app/src/assets/img/Vector.png differ diff --git a/app/src/assets/img/contactsimage.svg b/app/src/assets/img/contactsimage.svg new file mode 100644 index 00000000..58265ffa --- /dev/null +++ b/app/src/assets/img/contactsimage.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/src/assets/img/credentialImage.svg b/app/src/assets/img/credentialImage.svg new file mode 100644 index 00000000..327015c8 --- /dev/null +++ b/app/src/assets/img/credentialImage.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/src/assets/img/requestsImage.svg b/app/src/assets/img/requestsImage.svg new file mode 100644 index 00000000..2c47bbae --- /dev/null +++ b/app/src/assets/img/requestsImage.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/src/components/HomeContentView.tsx b/app/src/components/HomeContentView.tsx index 4125018d..421eacbd 100644 --- a/app/src/components/HomeContentView.tsx +++ b/app/src/components/HomeContentView.tsx @@ -1,18 +1,21 @@ -import { CredentialState } from '@aries-framework/core' -import { useCredentialByState } from '@aries-framework/react-hooks' +import { CredentialState, ProofState } from '@aries-framework/core' +import { useCredentialByState, useConnections, useProofByState } from '@aries-framework/react-hooks' import { useStore, Button, ButtonType, testIdWithKey, useTheme } from 'aries-bifold' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' -import { StyleSheet, View, Text } from 'react-native' +import { View, Text, Image } from 'react-native' +import { SvgProps } from 'react-native-svg' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' +import { styles } from '../HomeContentviewstyle' +import contacts from '../assets/img/contactsimage.svg' +import credentialImage from '../assets/img/credentialImage.svg' +import request from '../assets/img/requestsImage.svg' import { surveyMonkeyUrl, surveyMonkeyExitUrl } from '../constants' import { useNotifications } from '../hooks/notifications' import WebDisplay from '../screens/WebDisplay' import { BCState } from '../store' -const offset = 25 - interface HomeContentViewProps { children?: any } @@ -22,66 +25,42 @@ const HomeContentView: React.FC = ({ children }) => { ...useCredentialByState(CredentialState.CredentialReceived), ...useCredentialByState(CredentialState.Done), ] + const contactscount = useConnections.length + const requestcount = useProofByState(ProofState.RequestReceived).length + const notifications = useNotifications() - const { HomeTheme, ColorPallet } = useTheme() + const { ColorPallet } = useTheme() const { t } = useTranslation() const [surveyVisible, setSurveyVisible] = useState(false) const [store] = useStore() - const styles = StyleSheet.create({ - container: { - paddingHorizontal: offset, - paddingBottom: offset * 3, - }, - messageContainer: { - alignItems: 'center', - justifyContent: 'center', - marginTop: 35, - marginHorizontal: offset, + const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible) + const homebadage: { + image: React.FC + title: string + count: number + }[] = [ + { + image: contacts, + title: 'CONTACTS', + count: contactscount, }, - feedbackContainer: { - paddingTop: 15, - marginHorizontal: offset, + { + image: credentialImage, + title: 'CREDENTIALS', + count: credentials.length, }, - feedbackIcon: { - paddingRight: 10, + { + image: request, + title: 'REQUEST', + count: requestcount, }, - }) - - const displayMessage = (credentialCount: number) => { - if (typeof credentialCount === 'undefined' && credentialCount >= 0) { - throw new Error('Credential count cannot be undefined') - } - - let credentialMsg - - if (credentialCount === 1) { - credentialMsg = ( - - {t('Home.YouHave')} {credentialCount} {t('Home.Credential')}{' '} - {t('Home.InYourWallet')} - - ) - } else if (credentialCount > 1) { - credentialMsg = ( - - {t('Home.YouHave')} {credentialCount} {t('Home.Credentials')}{' '} - {t('Home.InYourWallet')} - - ) - } else { - credentialMsg = t('Home.NoCredentials') - } - - return ( - - {credentialMsg} - - ) + ] + const imageDisplayOptions = { + height: 28, + width: 28, } - const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible) - return ( {store.preferences.developerModeEnabled ? ( @@ -110,12 +89,24 @@ const HomeContentView: React.FC = ({ children }) => { ) : null} {notifications.total === 0 && ( - - {t('Home.Welcome')} - + )} - {displayMessage(credentials.length)} + + + {homebadage.map((g) => ( + + {g.count} + + + {g.image(imageDisplayOptions)} + + + {g.title} + + + ))} + {children} ) diff --git a/app/src/components/NotificationIcon.tsx b/app/src/components/NotificationIcon.tsx new file mode 100644 index 00000000..07765a78 --- /dev/null +++ b/app/src/components/NotificationIcon.tsx @@ -0,0 +1,4 @@ +import React, { useMemo } from 'react' +import { Image } from 'react-native' + +export const AdeyaHeaderLogo = useMemo(() => , []) diff --git a/app/src/theme.ts b/app/src/theme.ts index 05d684e7..91d61f37 100644 --- a/app/src/theme.ts +++ b/app/src/theme.ts @@ -34,9 +34,9 @@ const NotificationColors: INotificationColors = { successBorder: '#D6E9C6', successIcon: '#2D4821', successText: '#2D4821', - info: '#9BDAF1', - infoBorder: '#046B99', - infoIcon: '#046B99', + info: '#FFFF', + infoBorder: '#234CB4', + infoIcon: '#244CB4;', infoText: '#046B99', warn: '#F9F1C6', warnBorder: '#FAEBCC', @@ -62,11 +62,12 @@ const BrandColors: IBrandColors = { primary: '#1F4EAD', primaryDisabled: `rgba(31, 78, 173, ${lightOpacity})`, secondary: '#FFFFFFFF', + // tabbackground:'#D3E4FA', secondaryDisabled: `rgba(31, 78, 173, ${lightOpacity})`, primaryLight: '#D9EAF7', highlight: '#FCBA19', primaryBackground: '#F2F2F2', - secondaryBackground: '#FFFFFF', + secondaryBackground: '#FFFF', modalPrimary: '#003366', modalSecondary: '#FFFFFFFF', modalPrimaryBackground: '#FFFFFF', @@ -101,9 +102,9 @@ export const TextTheme: ITextTheme = { color: '#2289F7', }, headingThree: { - fontSize: 26, + fontSize: 24, fontWeight: 'bold', - color: ColorPallet.grayscale.darkGrey, + color: ColorPallet.brand.primary, }, headingFour: { fontSize: 21, @@ -413,7 +414,7 @@ export const ListItems = StyleSheet.create({ export const TabTheme = { tabBarStyle: { height: 60, - backgroundColor: ColorPallet.brand.secondaryBackground, + backgroundColor: '#D3E4FA', shadowOffset: { width: 0, height: -3 }, shadowRadius: 6, shadowColor: ColorPallet.grayscale.black, @@ -473,7 +474,7 @@ export const HomeTheme = StyleSheet.create({ }, noNewUpdatesText: { ...TextTheme.normal, - color: ColorPallet.notification.infoText, + color: ColorPallet.brand.primary, }, link: { ...TextTheme.normal,