feat: photo roll dialog

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

@@ -2,32 +2,19 @@ import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
 import React, { memo } from 'react'
 
 import { IconButton } from 'src/components/buttons'
-import { H4, P } from 'src/components/typography'
+import { H2 } from 'src/components/typography'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { spacer } from 'src/styling/variables'
 
 const useStyles = makeStyles({
-  dialogContent: {
-    width: 434,
-    padding: spacer * 2,
-    paddingRight: spacer * 3.5
-  },
-  dialogTitle: {
-    padding: spacer * 2,
-    paddingRight: spacer * 1.5,
+  closeButton: {
     display: 'flex',
-    'justify-content': 'space-between',
-    '& > h4': {
-      margin: 0
+    padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
+    paddingRight: spacer * 1.5,
+    justifyContent: 'end'
   },
-    '& > button': {
-      padding: 0,
-      marginTop: -(spacer / 2)
-    }
-  },
-  dialogActions: {
-    padding: spacer * 4,
-    paddingTop: spacer * 2
+  title: {
+    margin: [[0, spacer * 2, spacer * 2, spacer * 2]]
   }
 })
 
@@ -54,13 +41,18 @@ export const InformativeDialog = memo(
     }
 
     return (
-      <Dialog open={open} aria-labelledby="form-dialog-title" {...props}>
-        <DialogTitle id="customized-dialog-title" onClose={innerOnClose}>
-          <H4>{title}</H4>
-        </DialogTitle>
-        <DialogContent className={classes.dialogContent}>
-          {data && <P>{data}</P>}
-        </DialogContent>
+      <Dialog
+        fullWidth
+        open={open}
+        aria-labelledby="form-dialog-title"
+        {...props}>
+        <div className={classes.closeButton}>
+          <IconButton size={16} aria-label="close" onClick={innerOnClose}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <H2 className={classes.title}>{title}</H2>
+        <DialogContent className={classes.dialogContent}>{data}</DialogContent>
       </Dialog>
     )
   }

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

@@ -64,7 +64,7 @@ const PhotosCard = memo(({ frontCameraPath, txData }) => {
       </Paper>
       <InformativeDialog
         open={photosDialog}
-        title={`Photos roll`}
+        title={`Photo roll`}
         data={<PhotosCarousel txData={txData}></PhotosCarousel>}
         onDissmised={() => {
           setPhotosDialog(false)
@@ -79,6 +79,15 @@ export const PhotosCarousel = memo(({ txData }) => {
 
   return (
     <>
+      <div className={classes.carousel}>
+        <img
+          className={classes.carouselImg}
+          src={`${URI}/operator-data/customersphotos/${
+            R.head(txData)?.txCustomerPhotoPath
+          }`}
+          alt=""
+        />
+      </div>
       <div className={classes.firstRow}>
         <div>
           <div>

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

@@ -47,8 +47,7 @@ export default {
     margin: [[0, 0, 6, 0]]
   },
   firstRow: {
-    padding: [[8]],
-    marginBottom: 10
+    padding: [[8]]
   },
   secondRow: {
     extend: p,
@@ -64,5 +63,19 @@ export default {
         marginRight: 55
       }
     }
+  },
+  carousel: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    width: 550,
+    height: 550
+  },
+  carouselImg: {
+    objectFit: 'cover',
+    objectPosition: 'center',
+    width: 550,
+    height: 550,
+    marginBottom: 40
   }
 }