added profile image onto the homescreen

src/components/ProfileIcon.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { createUseStyles } from 'react-jss'
+
+export const useProfileIconStyles = createUseStyles({
+  container: {
+    width: 40,
+    height: 40,
+    textAlign: 'center',
+    lineHeight: '40px',
+    overflow: 'hidden',
+    position: 'relative',
+    borderRadius: '50%',
+    backgroundColor: 'white',
+    boxShadow: 'var(--boxShadow)'
+  }
+})
+
+export const ProfileIcon = ({ icon, ...rest }) => {
+  const classes = useProfileIconStyles()
+
+  return (
+    <div className={classes.container} {...rest}>
+      <img src={icon} alt="profile-icon" />
+    </div>
+  )
+}
+
+ProfileIcon.propTypes = {
+  icon: PropTypes.string
+}

src/components/index.js

@@ -7,6 +7,7 @@ export * from './FullPageLoader'
 export * from './Logo'
 export * from './Modal'
 export * from './Popover'
+export * from './ProfileIcon'
 export * from './ProgressBar'
 export * from './PullToRefresh'
 export * from './Tag'

src/modules/home/util.js

@@ -101,11 +101,17 @@ export const useHomeViewStyles = createUseStyles(theme => ({
   rotateIcon: {
     transform: 'rotateZ(-180deg)',
     bottom: theme.spacing(3.5)
+  },
+  profileIcon: {
+    top: theme.spacing(2),
+    right: theme.spacing(2),
+    zIndex: 100,
+    position: 'absolute'
   }
 }))
 
 export const useHomeHooks = () => {
-  const { inGroup, allowance } = useUser()
+  const { inGroup, allowance, profileImage } = useUser()
   const { cards, loading: walletLoading } = useWallet()
   const { data = {}, loading, refetch } = useQuery(UserTransactions, { variables: { inGroup } })
   const onRefresh = useCallback(e => refetch().then(e.detail.complete), [refetch])
@@ -148,6 +154,7 @@ export const useHomeHooks = () => {
     amountLeft: _loading ? 0 : amountLeft,
     groupSpent: _loading ? 0 : groupSpent,
     transactions,
+    profileImage,
     loading: _loading
   }
 }

src/modules/home/views/HomeView.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import clsx from 'clsx'
+import { menuController } from '@ionic/core'
 import { IonText, IonIcon } from '@ionic/react'
 import AnimateHeight from 'react-animate-height'
 import AnimatedNumber from 'react-animated-number'
@@ -9,7 +10,7 @@ import { chevronDown } from 'ionicons/icons'
 
 import { useHomeViewStyles, useHomeHooks } from '../util'
 import { PageContainer, Loading } from 'template'
-import { Fab, PullToRefresh, Card, ProgressBar } from 'components'
+import { Fab, PullToRefresh, Card, ProgressBar, ProfileIcon } from 'components'
 import { currency } from 'utils'
 import routes from 'routes'
 import { StaggeredList } from 'animation'
@@ -19,7 +20,8 @@ const DURATION = 1500
 
 const Home = () => {
   const [expand, updateExpansion] = useState(false)
-  const { inGroup, amountLeft, percentage, groupSpent, creditCards, transactions, loading, onRefresh } = useHomeHooks()
+  const { inGroup, amountLeft, percentage, groupSpent, creditCards, transactions, loading, onRefresh, profileImage } =
+    useHomeHooks()
   const classes = useHomeViewStyles({ cardsPresent: creditCards.length })
 
   const handleOpenSummary = useCallback(
@@ -28,11 +30,16 @@ const Home = () => {
   )
 
   const handleCloseSumary = useCallback(() => expand && updateExpansion(false), [expand])
+  const toggleMenu = useCallback(() => menuController.toggle(), [])
 
   return (
     <PageContainer loading={loading}>
       {!loading && <PullToRefresh onRefresh={onRefresh} />}
 
+      <div className={classes.profileIcon}>
+        <ProfileIcon icon={profileImage} onClick={toggleMenu} />
+      </div>
+
       <div className={clsx(classes.header, expand && classes.expandedHeader)}>
         <AnimatedNumber
           component="h2"
@@ -51,7 +58,7 @@ const Home = () => {
         )}
       </div>
 
-      {(inGroup || creditCards.length > 0) && (
+      {creditCards.length > 0 && (
         <div className={clsx(classes.summary, expand && classes.expandedSummary)} onClick={handleOpenSummary}>
           <AnimateHeight height={expand ? 'auto' : 68} duration={550} delay={100}>
             <div className={classes.cardList}>

src/modules/transaction/views/EditTransactionView.js

@@ -84,7 +84,7 @@ export const EditTransaction = ({ dismissModal, ...defaultValues }) => {
 
             <FieldController name="description" placeholder="memo" component={Input} />
 
-            <FieldController type="popover" name="card" label="Put on Card" options={cardOptions} component={Select} />
+            <FieldController name="card" label="Put on Card" options={cardOptions} component={Select} />
 
             <FieldController name="date" component={DatePicker} />
 

src/modules/transaction/views/NewTransactionView.js

@@ -68,7 +68,7 @@ const NewTransactionPage = ({ history }) => {
 
             <FieldController name="description" placeholder="memo" component={Input} />
 
-            <FieldController type="popover" name="card" label="Put on Card" options={cardOptions} component={Select} />
+            <FieldController name="card" label="Put on Card" options={cardOptions} component={Select} />
 
             {inGroup && <FieldController label="Group Purchase" name="group" component={Checkbox} />}
 

src/modules/user/user.gql.js

@@ -8,6 +8,7 @@ export const UserFragment = gql`
     inGroup
     income
     allowance
+    profileImage
     defaultCard {
       id
     }