feat: change customer screen transaction list part to the new design

feat: created the compliance details component (no data for now)

fix: added missing properties into the gql schema and the compliance
details component

feat: added another chip type for a neutral situation

style: change the property card style for the v1 specs

fix: added front facing camera override to schema and components

feat: added authorized override (status) column to the customers list
table

fix: moved name to the front of the phone on the customers list table

fix: added sanctions description text on it's card

fix: added id icon to the right of the customer name

feat: created subpage button component and use it in the customer
profile

feat: created an image popper component and use it in the customer
compliance page

fix: added varying sizes to the customer details and id data cards fields

refactor: simplify the compliance subpage code

new-lamassu-admin/src/components/ImagePopper.js

@@ -0,0 +1,52 @@
+import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import classnames from 'classnames'
+import React, { memo, useState } from 'react'
+
+import Popper from 'src/components/Popper'
+import { FeatureButton } from 'src/components/buttons'
+import { ReactComponent as ZoomIconInverse } from 'src/styling/icons/circle buttons/search/white.svg'
+import { ReactComponent as ZoomIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'
+
+import imagePopperStyles from './ImagePopper.styles'
+
+const useStyles = makeStyles(imagePopperStyles)
+
+const ImagePopper = memo(({ className, width, height, src }) => {
+  const classes = useStyles({ width, height })
+  const [popperAnchorEl, setPopperAnchorEl] = useState(null)
+
+  const handleOpenPopper = event => {
+    setPopperAnchorEl(popperAnchorEl ? null : event.currentTarget)
+  }
+
+  const handleClosePopper = () => {
+    setPopperAnchorEl(null)
+  }
+
+  const popperOpen = Boolean(popperAnchorEl)
+
+  const Image = ({ className }) => (
+    <img className={classnames(className)} src={src} alt="" />
+  )
+
+  return (
+    <ClickAwayListener onClickAway={handleClosePopper}>
+      <div className={classnames(classes.row, className)}>
+        <Image className={classes.unzoomedImg} />
+        <FeatureButton
+          Icon={ZoomIcon}
+          InverseIcon={ZoomIconInverse}
+          className={classes.button}
+          onClick={handleOpenPopper}
+        />
+        <Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
+          <div className={classes.popoverContent}>
+            <Image />
+          </div>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  )
+})
+
+export default ImagePopper