feat: refine UI for matching tool

Greenstand · Jan 26, 2022 · 245dffa · 245dffa
1 parent 030a246
commit 245dffa
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 97 deletions.
diff --git a/src/components/CaptureMatching/CandidateImages.js b/src/components/CaptureMatching/CandidateImages.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { Typography, Box, Button, Grid } from '@material-ui/core';
+import { Typography, Box, Button, Grid, Paper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CheckIcon from '@material-ui/icons/Check';
 import ClearIcon from '@material-ui/icons/Clear';
@@ -9,9 +9,7 @@ import theme from '../common/theme';
 const useStyles = makeStyles({
   containerBox: {
     marginTop: 0,
-    marginRight: theme.spacing(5),
     marginBottom: theme.spacing(5),
-    marginLeft: theme.spacing(5),
     paddingBottom: theme.spacing(2),
     background: '#fff',
     borderRadius: '4px',
@@ -37,12 +35,37 @@ const useStyles = makeStyles({
   },
 
   imageScroll: {
-    height: '76vh',
-    overflow: 'scroll',
+    // height: '76vh',
+    // overflow: 'scroll',
   },
 
   candidateImgBtn: {
-    marginTop: '10px',
+    padding: theme.spacing(5, 4),
+    display: 'flex',
+    gap: theme.spacing(2),
+  },
+  button: {
+    fontSize: '16px',
+  },
+  box2: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    padding: '8px 16px',
+  },
+  box3: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box1: {
+    width: '24px',
+    height: '24px',
+    backgroundColor: '#75B926',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
   },
 });
 
@@ -70,20 +93,26 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
       {candidateImgData &&
         candidateImgData.map((tree, i) => {
           return (
-            <Box className={classes.containerBox} key={`${i}-${tree.id}`}>
+            <Paper
+              elevation={4}
+              className={classes.containerBox}
+              key={`${i}-${tree.id}`}
+            >
               <Box className={classes.headerBox}>
                 <Grid
                   container
-                  direction="row"
-                  justify="space-between"
-                  alignItems="baseline"
+                  className={classes.box2}
                   onClick={() => showImgBox(tree.id)}
                 >
-                  <Box>
+                  <Box className={classes.box3}>
+                    <Paper elevation={0} className={classes.box1}>
+                      {++i}
+                    </Paper>
                     <Typography variant="h5" style={{ padding: '10px' }}>
                       Tree {tree.tree_id}
                     </Typography>
                   </Box>
+                  <Box>{/* button */}</Box>
                 </Grid>
               </Box>
 
@@ -121,29 +150,30 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
 
                   <Box className={classes.candidateImgBtn}>
                     <Button
-                      style={{ margin: '0 0 20px 20px' }}
                       variant="contained"
                       color="primary"
                       startIcon={<CheckIcon />}
                       onClick={() => sameTreeHandler(tree.id)}
+                      style={{ color: 'white' }}
+                      className={classes.button}
                     >
                       Same Tree
                     </Button>
                     <Button
-                      style={{ margin: '0 0 20px 20px' }}
                       id={tree.tree_id}
                       variant="outlined"
                       color="primary"
                       startIcon={<ClearIcon />}
                       onClick={() => hideImgBox(tree.id)}
+                      className={classes.button}
                       value={i}
                     >
                       Different Tree
                     </Button>
                   </Box>
                 </Box>
               ) : null}
-            </Box>
+            </Paper>
           );
         })}
     </Box>

diff --git a/src/components/CaptureMatching/CaptureHeader.js b/src/components/CaptureMatching/CaptureHeader.js
@@ -48,7 +48,7 @@ function CaptureHeader(props) {
   );
 
   return (
-    <Box style={{ margin: '20px' }}>
+    <Box>
       <Box>
         <Grid container className={classes.box1}>
           <CurrentCaptureNumber

diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
@@ -4,36 +4,67 @@ import CaptureHeader from './CaptureHeader';
 import Grower from './Grower';
 import theme from '../common/theme';
 
-import { Typography, Box, Button, Grid } from '@material-ui/core';
+import {
+  Tooltip,
+  Typography,
+  Box,
+  Button,
+  Grid,
+  Paper,
+} from '@material-ui/core';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { makeStyles } from '@material-ui/core/styles';
 import { getDateTimeStringLocale } from 'common/locale';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   containerBox: {
-    margin: theme.spacing(5),
     background: '#fff',
     borderRadius: '4px',
+    flexGrow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '1px',
   },
 
   headerBox: {
     display: 'flex',
-    flexDirection: 'spaceBetween',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2),
+    alignItems: 'center',
   },
 
   imgBox: {
-    height: '52vh',
-    marginTop: '20px',
+    // height: '52vh',
+    flexGrow: 1,
     overflow: 'scroll',
   },
 
   imgContainer: {
     width: '100%',
   },
-  box1: {},
-});
+  box1: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  box3: {
+    display: 'flex',
+    gap: '4px',
+    justifyContent: 'start',
+    alignItems: 'center',
+    marginTop: '4px',
+    '& svg': {
+      width: '16px',
+      height: '16px',
+    },
+  },
+  button: {
+    width: 71,
+    height: 31,
+  },
+}));
 
 function CaptureImage(props) {
   const {
@@ -59,63 +90,54 @@ function CaptureImage(props) {
         captureImages={captureImages}
       />
 
+      <Box height={16} />
+
       {captureImages &&
         captureImages
           .slice((currentPage - 1) * imgPerPage, currentPage * imgPerPage)
           .map((capture) => {
             return (
-              <Box
+              <Paper
+                elevation={4}
                 key={`capture_${capture.id}`}
                 className={classes.containerBox}
               >
                 <Box className={classes.headerBox}>
-                  <Grid
-                    container
-                    direction="row"
-                    justify="space-around"
-                    // alignItems="baseline"
-                  >
-                    <Box style={{ marginTop: '15px' }}>
-                      <Typography
-                        variant="h5"
-                        style={{ width: '150px', wordWrap: 'break-word' }}
-                      >
-                        Capture {capture.id}
+                  <Box className={classes.box2}>
+                    <Tooltip title={capture.id}>
+                      <Typography variant="h5">
+                        Capture {(capture.id + '').substring(0, 10) + '...'}
+                      </Typography>
+                    </Tooltip>
+                    <Box className={classes.box3}>
+                      <AccessTimeIcon />
+                      <Typography variant="body1">
+                        {getDateTimeStringLocale(capture.created_at)}
                       </Typography>
-                      <Box display="flex">
-                        <AccessTimeIcon />
-                        <Typography variant="body1">
-                          {getDateTimeStringLocale(capture.created_at)}
-                        </Typography>
-                      </Box>
-
-                      <Box display="flex">
-                        <LocationOnOutlinedIcon />
-                        <Typography variant="body1">USA</Typography>
-                      </Box>
-                      {/* <UseLocation/> */}
                     </Box>
 
-                    <Grower
-                      planter_photo_url={capture.planter_photo_url}
-                      planter_username={capture.planter_username}
-                      status={capture.status}
-                    />
-
-                    <Button
-                      variant="outlined"
-                      color="primary"
-                      style={{
-                        height: '50px',
-                        width: '100px',
-                        marginTop: '10px',
-                      }}
-                      onClick={handleSkip}
-                    >
-                      Skip
-                      <SkipNextIcon />
-                    </Button>
-                  </Grid>
+                    <Box className={classes.box3}>
+                      <LocationOnOutlinedIcon />
+                      <Typography variant="body1">USA</Typography>
+                    </Box>
+                    {/* <UseLocation/> */}
+                  </Box>
+
+                  <Grower
+                    planter_photo_url={capture.planter_photo_url}
+                    planter_username={capture.planter_username}
+                    status={capture.status}
+                  />
+
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    onClick={handleSkip}
+                    className={classes.button}
+                  >
+                    Skip
+                    <SkipNextIcon />
+                  </Button>
                 </Box>
 
                 <Box className={classes.imgBox}>
@@ -128,7 +150,7 @@ function CaptureImage(props) {
                     alt={`Capture ${capture.id}`}
                   />
                 </Box>
-              </Box>
+              </Paper>
             );
           })}
     </Box>