Merge pull request #31 from credebl/home-screen-design

Design home screen

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,
+  },
+})

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<HomeContentViewProps> = ({ 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<BCState>()
 
-  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<SvgProps>
+    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 = (
-        <Text>
-          {t('Home.YouHave')} <Text style={{ fontWeight: 'bold' }}>{credentialCount}</Text> {t('Home.Credential')}{' '}
-          {t('Home.InYourWallet')}
-        </Text>
-      )
-    } else if (credentialCount > 1) {
-      credentialMsg = (
-        <Text>
-          {t('Home.YouHave')} <Text style={{ fontWeight: 'bold' }}>{credentialCount}</Text> {t('Home.Credentials')}{' '}
-          {t('Home.InYourWallet')}
-        </Text>
-      )
-    } else {
-      credentialMsg = t('Home.NoCredentials')
-    }
-
-    return (
-      <View style={[styles.messageContainer]}>
-        <Text style={[HomeTheme.credentialMsg, { marginTop: offset, textAlign: 'center' }]}>{credentialMsg}</Text>
-      </View>
-    )
+  ]
+  const imageDisplayOptions = {
+    height: 28,
+    width: 28,
   }
 
-  const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible)
-
   return (
     <View style={[styles.feedbackContainer]}>
       {store.preferences.developerModeEnabled ? (
@@ -110,12 +89,24 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
       ) : null}
       {notifications.total === 0 && (
         <View style={[styles.messageContainer]}>
-          <Text adjustsFontSizeToFit style={[HomeTheme.welcomeHeader, { marginTop: offset, marginBottom: 20 }]}>
-            {t('Home.Welcome')}
-          </Text>
+          <Image source={require('../assets/img/homeimage.png')} style={styles.homeImage} />
         </View>
       )}
-      <View style={styles.container}>{displayMessage(credentials.length)}</View>
+
+      <View style={styles.homebadageview}>
+        {homebadage.map((g) => (
+          <View style={styles.badagecontainer}>
+            <Text style={styles.badageText}>{g.count}</Text>
+            <Image source={require('../assets/img/Line.png')} style={styles.line} />
+            <View style={styles.badageview}>
+              <View style={styles.homebadage}>{g.image(imageDisplayOptions)}</View>
+            </View>
+            <View>
+              <Text style={styles.badageText}>{g.title}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
       {children}
     </View>
   )

app/src/components/NotificationIcon.tsx

@@ -0,0 +1,4 @@
+import React, { useMemo } from 'react'
+import { Image } from 'react-native'
+
+export const AdeyaHeaderLogo = useMemo(() => <Image source={require('../assets/img/Vector.png')} />, [])

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,