feat: add icons and make customer data cards editable

new-lamassu-admin/src/components/buttons/FeatureButton.js

@@ -32,8 +32,8 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const FeatureButton = memo(
-  ({ className, Icon, InverseIcon, children, ...props }) => {
+  ({ className, Icon, InverseIcon, children, active, ...props }) => {
-    const classes = useStyles()
+    const classes = useStyles({ active })
 
     const classNames = {
       [classes.featureButton]: true,

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -1,4 +1,4 @@
-import { Box, CardContent, Card } from '@material-ui/core'
+import { CardContent, Card } from '@material-ui/core'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import moment from 'moment'
@@ -6,17 +6,20 @@ import * as R from 'ramda'
 import { useState, React } from 'react'
 
 import { Tooltip } from 'src/components/Tooltip'
-import { SubpageButton } from 'src/components/buttons'
+import { FeatureButton } from 'src/components/buttons'
+import { TextInput } from 'src/components/inputs/formik'
 import { H3 } from 'src/components/typography'
 import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
 import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
-import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/disabled.svg'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'
-import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
+import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'
-import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
+import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'
+import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
+import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
 import { ifNotNull } from 'src/utils/nullCheck'
 
 import styles from './CustomerData.styles.js'
-import { Field } from './components'
+import { EditableCard } from './components'
 import { getName } from './helper.js'
 
 const useStyles = makeStyles(styles)
@@ -31,49 +34,62 @@ const CustomerData = ({ customer, updateCustomer }) => {
 
   const nameElements = [
     {
-      header: 'Name',
+      name: 'name',
-      display: `${getName(customer)}`,
+      label: 'Name',
+      value: `${getName(customer)}` ?? '',
+      component: TextInput,
       size: 190
     }
   ]
 
-  const idScanElementsFirstRow = [
+  const idScanElements = [
     {
-      header: 'Name',
+      name: 'name',
-      display: `${getName(customer)}`,
+      label: 'Name',
+      value: `${getName(customer)}`,
+      component: TextInput,
       size: 190
     },
     {
-      header: 'ID number',
+      name: 'ID number',
-      display: R.path(['documentNumber'])(idData),
+      label: 'ID number',
+      value: R.path(['documentNumber'])(idData),
+      component: TextInput,
       size: 160
     },
     {
-      header: 'Age',
+      name: 'age',
-      display: ifNotNull(
+      label: 'Age',
+      value: ifNotNull(
         rawDob,
         moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
       ),
+      component: TextInput,
       size: 50
-    }
+    },
-  ]
-  const idScanElementsSecondRow = [
     {
-      header: 'Gender',
+      name: 'gender',
-      display: R.path(['gender'])(idData),
+      label: 'Gender',
+      value: R.path(['gender'])(idData),
+      component: TextInput,
       size: 80
     },
     {
-      header: country === 'Canada' ? 'Province' : 'State',
+      name: country === 'Canada' ? 'province' : 'state',
-      display: R.path(['state'])(idData),
+      label: country === 'Canada' ? 'Province' : 'State',
+      value: R.path(['state'])(idData),
+      component: TextInput,
       size: 120
     },
     {
-      header: 'Expiration Date',
+      name: 'expiration date',
-      display: ifNotNull(
+      label: 'Expiration Date',
+      value: ifNotNull(
         rawExpirationDate,
         moment.utc(rawExpirationDate).format('YYYY-MM-DD')
-      )
+      ),
+      component: TextInput,
+      size: 120
     }
   ]
 
@@ -83,11 +99,20 @@ const CustomerData = ({ customer, updateCustomer }) => {
     <div>
       <div className={classes.header}>
         <H3 className={classes.title}>{'Customer data'}</H3>
-        <SubpageButton
+        <FeatureButton
-          className={classes.subpageButton}
+          active={!listView}
-          Icon={ListingViewIcon}
+          className={classes.viewIcons}
-          InverseIcon={ReverseListingViewIcon}
+          Icon={OverviewIcon}
-          toggle={setListView}></SubpageButton>
+          InverseIcon={OverviewReversedIcon}
+          onClick={() => setListView(false)}
+          variant="contained"
+        />
+        <FeatureButton
+          active={listView}
+          className={classes.viewIcons}
+          Icon={CustomerListViewIcon}
+          InverseIcon={CustomerListViewReversedIcon}
+          onClick={() => setListView(true)}></FeatureButton>
       </div>
       <div>
         {listView && <H3>{''}</H3>}
@@ -101,16 +126,9 @@ const CustomerData = ({ customer, updateCustomer }) => {
                     <H3 className={classes.cardTitle}>{'Name'}</H3>
                     <Tooltip width={304}></Tooltip>
                   </div>
-                  <Box display="flex" alignItems="center">
+                  <EditableCard
-                    {nameElements.map(({ header, display, size }, idx) => (
+                    data={nameElements}
-                      <Field
+                    save={() => {}}></EditableCard>
-                        key={idx}
-                        label={header}
-                        display={display}
-                        size={size}
-                      />
-                    ))}
-                  </Box>
                 </CardContent>
               </Card>
               <Card className={classes.leftSideCard}>
@@ -120,30 +138,9 @@ const CustomerData = ({ customer, updateCustomer }) => {
                     <H3 className={classes.cardTitle}>{'ID Scan'}</H3>
                     <Tooltip width={304}></Tooltip>
                   </div>
-                  <Box display="flex" alignItems="center">
+                  <EditableCard
-                    {idScanElementsFirstRow.map(
+                    data={idScanElements}
-                      ({ header, display, size }, idx) => (
+                    save={() => {}}></EditableCard>
-                        <Field
-                          key={idx}
-                          label={header}
-                          display={display}
-                          size={size}
-                        />
-                      )
-                    )}
-                  </Box>
-                  <Box display="flex" alignItems="center">
-                    {idScanElementsSecondRow.map(
-                      ({ header, display, size }, idx) => (
-                        <Field
-                          key={idx}
-                          label={header}
-                          display={display}
-                          size={size}
-                        />
-                      )
-                    )}
-                  </Box>
                 </CardContent>
               </Card>
             </Grid>

new-lamassu-admin/src/pages/Customers/CustomerData.styles.js

@@ -6,7 +6,7 @@ export default {
   },
   title: {
     marginTop: 7,
-    marginRight: 20
+    marginRight: 24
   },
   leftSideCard: {
     borderRadius: 10,
@@ -30,5 +30,8 @@ export default {
   },
   cardTitle: {
     margin: [[8, 15, 15, 15]]
+  },
+  viewIcons: {
+    marginRight: 12
   }
 }

new-lamassu-admin/src/pages/Customers/CustomerProfile.js

@@ -1,7 +1,6 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Breadcrumbs, Box } from '@material-ui/core'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
-// import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
@@ -17,6 +16,8 @@ import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/butto
 import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'
 import { ReactComponent as BlockReversedIcon } from 'src/styling/icons/button/block/white.svg'
 import { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/zodiac.svg'
+import { ReactComponent as DiscountReversedIcon } from 'src/styling/icons/button/discount/white.svg'
+import { ReactComponent as Discount } from 'src/styling/icons/button/discount/zodiac.svg'
 import { fromNamespace, namespaces } from 'src/utils/config'
 
 import CustomerData from './CustomerData'
@@ -109,7 +110,6 @@ const SET_CUSTOMER = gql`
 `
 
 const CustomerProfile = memo(() => {
-  const classes = useStyles()
   const history = useHistory()
   const [showCompliance, setShowCompliance] = useState(false)
   const [clickedItem, setClickedItem] = useState('overview')
@@ -134,7 +134,7 @@ const CustomerProfile = memo(() => {
       }
     })
 
-  const onClickSidebarItem = e => setClickedItem(e.code)
+  const onClickSidebarItem = code => setClickedItem(code)
 
   const configData = R.path(['config'])(customerResponse) ?? []
   const locale = configData && fromNamespace(namespaces.LOCALE, configData)
@@ -151,6 +151,8 @@ const CustomerProfile = memo(() => {
   const isCustomerData = clickedItem === 'customerData'
   const isOverview = clickedItem === 'overview'
 
+  const classes = useStyles({ blocked })
+
   return (
     <>
       <Breadcrumbs
@@ -178,11 +180,21 @@ const CustomerProfile = memo(() => {
             <div>
               <div>
                 <CustomerSidebar
-                  isSelected={it => it.code === clickedItem}
+                  isSelected={code => code === clickedItem}
                   onClick={onClickSidebarItem}
                 />
               </div>
               <Label1 className={classes.actionLabel}>Actions</Label1>
+              <div>
+                <ActionButton
+                  className={classes.customerDiscount}
+                  color="primary"
+                  Icon={Discount}
+                  InverseIcon={DiscountReversedIcon}
+                  onClick={() => {}}>
+                  {`Add individual discount`}
+                </ActionButton>
+              </div>
               <div>
                 {isSuspended && (
                   <ActionButton
@@ -232,14 +244,6 @@ const CustomerProfile = memo(() => {
                   {`Retrieve information`}
                 </ActionButton>
               </div>
-              <div>
-                <ActionButton
-                  className={classes.customerDiscount}
-                  color="primary"
-                  onClick={() => {}}>
-                  {`Add individual discount`}
-                </ActionButton>
-              </div>
             </div>
           )}
         </div>

new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js

@@ -15,17 +15,17 @@ export default {
   customerDetails: {
     marginBottom: 18
   },
-  customerBlock: {
+  customerBlock: props => ({
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [[8, 0, 4, 0]],
-    padding: [[0, 35, 0]]
-  },
-  customerDiscount: {
     display: 'flex',
     flexDirection: 'row',
     margin: [[0, 0, 4, 0]],
-    padding: [[0, 34, 0]]
+    padding: [[0, props.blocked ? 35 : 48, 0]]
+  }),
+  customerDiscount: {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: [[8, 0, 4, 0]],
+    padding: [[0, 24, 0]]
   },
   panels: {
     display: 'flex'

new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js

@@ -2,6 +2,11 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React from 'react'
 
+import { ReactComponent as CustomerDataReversedIcon } from 'src/styling/icons/customer-nav/data/comet.svg'
+import { ReactComponent as CustomerDataIcon } from 'src/styling/icons/customer-nav/data/white.svg'
+import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/customer-nav/overview/comet.svg'
+import { ReactComponent as OverviewIcon } from 'src/styling/icons/customer-nav/overview/white.svg'
+
 import styles from './CustomerSidebar.styles.js'
 
 const useStyles = makeStyles(styles)
@@ -11,24 +16,31 @@ const CustomerSidebar = ({ isSelected, onClick }) => {
   const sideBarOptions = [
     {
       code: 'overview',
-      display: 'Overview'
+      display: 'Overview',
+      Icon: OverviewIcon,
+      InverseIcon: OverviewReversedIcon
     },
     {
       code: 'customerData',
-      display: 'Customer Data'
+      display: 'Customer Data',
+      Icon: CustomerDataIcon,
+      InverseIcon: CustomerDataReversedIcon
     }
   ]
 
   return (
     <div className={classes.sidebar}>
-      {sideBarOptions?.map(it => (
+      {sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (
         <div
           className={classnames({
-            [classes.activeLink]: isSelected(it),
+            [classes.activeLink]: isSelected(code),
             [classes.link]: true
           })}
-          onClick={() => onClick(it)}>
+          onClick={() => onClick(code)}>
-          {it.display}
+          <div className={classes.icon}>
+            {isSelected(code) ? <Icon /> : <InverseIcon />}
+          </div>
+          {display}
         </div>
       ))}
     </div>

new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js

@@ -15,6 +15,8 @@ export default {
     marginBottom: 50
   },
   link: {
+    alignItems: 'center',
+    display: 'flex',
     extend: p,
     position: 'relative',
     color: offDarkColor,
@@ -22,6 +24,8 @@ export default {
     cursor: 'pointer'
   },
   activeLink: {
+    display: 'flex',
+    alignItems: 'center',
     extend: tl2,
     color: white,
     backgroundColor: offDarkColor,
@@ -31,5 +35,8 @@ export default {
     '&:last-child': {
       borderRadius: '0px 0px 5px 5px'
     }
+  },
+  icon: {
+    marginRight: 15
   }
 }

new-lamassu-admin/src/pages/Customers/components/EditableCard.js

@@ -0,0 +1,159 @@
+import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
+import { Form, Formik, Field as FormikField } from 'formik'
+import { useState, React } from 'react'
+
+import ErrorMessage from 'src/components/ErrorMessage'
+import PromptWhenDirty from 'src/components/PromptWhenDirty'
+import { ActionButton } from 'src/components/buttons'
+import { Label1, Info3 } from 'src/components/typography'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
+import { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edit/white.svg'
+import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/button/authorize/white.svg'
+import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'
+import { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'
+import { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
+import { comet } from 'src/styling/variables'
+
+import styles from './EditableCard.styles.js'
+
+const useStyles = makeStyles(styles)
+
+const fieldStyles = {
+  field: {
+    position: 'relative',
+    width: 280,
+    height: 48,
+    padding: [[0, 4, 4, 0]]
+  },
+  label: {
+    color: comet,
+    margin: [[0, 3]]
+  },
+  notEditing: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > p:first-child': {
+      height: 16,
+      lineHeight: '16px',
+      transformOrigin: 'left',
+      paddingLeft: 0,
+      margin: [[3, 0, 3, 0]]
+    },
+    '& > p:last-child': {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      margin: 0
+    }
+  },
+  editing: {
+    '& > input': {
+      padding: 0
+    }
+  }
+}
+
+const fieldUseStyles = makeStyles(fieldStyles)
+
+const EditableField = ({ editing, field, size, ...props }) => {
+  const classes = fieldUseStyles()
+
+  const classNames = {
+    [classes.field]: true,
+    [classes.notEditing]: !editing
+  }
+
+  return (
+    <div className={classnames(classNames)}>
+      {!editing && (
+        <>
+          <Label1 className={classes.label}>{field.label}</Label1>
+          <Info3>{field.value}</Info3>
+        </>
+      )}
+      {editing && (
+        <>
+          <Label1 className={classes.label}>{field.label}</Label1>
+          <FormikField
+            className={classes.editing}
+            id={field.name}
+            name={field.name}
+            component={field.component}
+            placeholder={field.placeholder}
+            value={field.value}
+            type={field.type}
+            width={size}
+            {...props}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+const EditableCard = ({ data, save }) => {
+  const classes = useStyles()
+
+  const [editing, setEditing] = useState(false)
+  const [error, setError] = useState(null)
+
+  return (
+    <div>
+      <Formik
+        validateOnBlur={false}
+        validateOnChange={false}
+        enableReinitialize
+        onSubmit={values => save(values)}
+        onReset={() => {
+          setEditing(false)
+          setError(false)
+        }}>
+        <Form>
+          <PromptWhenDirty />
+          <div className={classes.row}>
+            {data.map((field, idx) => (
+              <EditableField key={idx} field={field} editing={editing} />
+            ))}
+          </div>
+          <div className={classes.edit}>
+            {!editing && (
+              <div className={classes.editButton}>
+                <ActionButton
+                  color="primary"
+                  Icon={EditIcon}
+                  InverseIcon={EditReversedIcon}
+                  onClick={() => setEditing(true)}>
+                  {`Edit`}
+                </ActionButton>
+              </div>
+            )}
+            {editing && (
+              <div className={classes.editingButtons}>
+                <div className={classes.saveButton}>
+                  <ActionButton
+                    color="secondary"
+                    Icon={AuthorizeIcon}
+                    InverseIcon={AuthorizeReversedIcon}
+                    type="submit">
+                    Save
+                  </ActionButton>
+                </div>
+                <ActionButton
+                  color="secondary"
+                  Icon={CancelIcon}
+                  InverseIcon={CancelReversedIcon}
+                  type="reset">
+                  Cancel
+                </ActionButton>
+                {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
+              </div>
+            )}
+          </div>
+        </Form>
+      </Formik>
+    </div>
+  )
+}
+
+export default EditableCard

new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js

@@ -0,0 +1,13 @@
+export default {
+  editButton: {
+    display: 'flex',
+    justifyContent: 'right'
+  },
+  saveButton: {
+    marginRight: 12
+  },
+  editingButtons: {
+    display: 'flex',
+    justifyContent: 'right'
+  }
+}

new-lamassu-admin/src/pages/Customers/components/index.js

@@ -1,6 +1,7 @@
 import ComplianceDetails from './ComplianceDetails'
 import CustomerDetails from './CustomerDetails'
 import CustomerSidebar from './CustomerSidebar'
+import EditableCard from './EditableCard'
 import Field from './Field'
 import IdDataCard from './IdDataCard'
 import TransactionsList from './TransactionsList'
@@ -11,5 +12,6 @@ export {
   TransactionsList,
   ComplianceDetails,
   CustomerSidebar,
-  Field
+  Field,
+  EditableCard
 }

new-lamassu-admin/src/styling/icons/action/edit/comet.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <desc>Created with Sketch.</desc>
+    <g id="icon/action/edit/disabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18" id="Stroke-1" stroke="#5f668a" stroke-width="2"></path>
+        <polygon id="Stroke-3" stroke="#5f668a" stroke-width="2" points="6 12 17 1 21 5 10 16 6 16"></polygon>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/discount/comet.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/loyalty/comet</title>
+    <g id="icon/button/loyalty/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Stroke-2" stroke="#5f668a" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
+        <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#5f668a"></path>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/discount/white.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/loyalty/white</title>
+    <g id="icon/button/loyalty/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Stroke-2" stroke="#FFFFFF" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
+        <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/loyalty/zodiac</title>
+    <g id="icon/button/loyalty/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Stroke-2" stroke="#1B2559" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
+        <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#1B2559"></path>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/sf-small/listing/white</title>
+    <g id="icon/sf-small/listing/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#FFFFFF" stroke-width="2"></line>
+        <line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#FFFFFF" stroke-width="2"></line>
+        <line x1="1" y1="13" x2="19.0952381" y2="13" id="Path-4-Copy-2" stroke="#FFFFFF" stroke-width="2"></line>
+        <line x1="1" y1="19" x2="19.0952381" y2="19" id="Path-4-Copy-3" stroke="#FFFFFF" stroke-width="2"></line>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/sf-small/listing/zodiac</title>
+    <g id="icon/sf-small/listing/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#1B2559" stroke-width="2"></line>
+        <line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#1B2559" stroke-width="2"></line>
+        <line x1="1" y1="13" x2="19.0952381" y2="13" id="Path-4-Copy-2" stroke="#1B2559" stroke-width="2"></line>
+        <line x1="1" y1="19" x2="19.0952381" y2="19" id="Path-4-Copy-3" stroke="#1B2559" stroke-width="2"></line>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/sf-small/overview/comet</title>
+    <g id="icon/sf-small/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#5F668A" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#5F668A" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/sf-small/overview/white</title>
+    <g id="icon/sf-small/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#FFFFFF" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#FFFFFF" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/sf-small/overview/zodiac</title>
+    <g id="icon/sf-small/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#1B2559" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#1B2559" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/data/comet</title>
+    <g id="icon/customer-nav/data/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
+        <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
+        <ellipse id="Oval-Copy-3" stroke="#5F668A" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/data/white</title>
+    <g id="icon/customer-nav/data/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
+        <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
+        <ellipse id="Oval-Copy-3" stroke="#FFFFFF" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/data/zodiac</title>
+    <g id="icon/customer-nav/data/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
+        <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
+        <ellipse id="Oval-Copy-3" stroke="#1B2559" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/overview/comet</title>
+    <g id="icon/customer-nav/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#5F668A" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#5F668A" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/overview/white</title>
+    <g id="icon/customer-nav/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#FFFFFF" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#FFFFFF" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/customer-nav/overview/zodiac</title>
+    <g id="icon/customer-nav/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy" stroke="#1B2559" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
+        <rect id="Rectangle-Copy-3" stroke="#1B2559" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
+    </g>
+</svg>