Make responsive avatar crop component

2 files changed, 39 insertions, 22 deletions

diff --git a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
index 015dd47..b4540da 100644
--- a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
+++ b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, {useCallback, useState} from 'react';
 import Cropper from 'react-easy-crop';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
+import {Slider} from "@material-ui/core";
 
 interface Area {
   x: number;
@@ -15,39 +16,55 @@ interface PropTypes {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
+  cropperArea: {
     position: 'relative',
     width: '100%',
-    height: '100vh',
+    height: 'calc(100vh - 130px)',
     background: '#333',
     [theme.breakpoints.up('sm')]: {
       height: 400,
     }
+  },
+  sliderContainer: {
+    padding: 20,
   }
 }));
 
-const ImageCropAreaSelect: React.FC<PropTypes> = ({ image, setArea }) => {
+const ImageCropAreaSelect: React.FC<PropTypes> = ({image, setArea}) => {
   const classes = useStyles();
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
+  const [crop, setCrop] = useState({x: 0, y: 0});
+  const [zoom, setZoom] = useState<any>(1);
 
   const onCropComplete = useCallback((areaPercentage: Area, areaPixels: Area): void => {
     setArea(areaPixels);
   }, [setArea]);
 
+
   return (
-    <div className={classes.root}>
-      <Cropper
-        image={image}
-        crop={crop}
-        zoom={zoom}
-        aspect={1}
-        cropShape="round"
-        showGrid={false}
-        onCropChange={setCrop}
-        onCropComplete={onCropComplete}
-        onZoomChange={setZoom}
-      />
+    <div>
+      <div className={classes.cropperArea}>
+        <Cropper
+          image={image}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          cropShape="round"
+          showGrid={false}
+          onCropChange={setCrop}
+          onCropComplete={onCropComplete}
+          onZoomChange={setZoom}
+        />
+      </div>
+      <div className={classes.sliderContainer}>
+        <Slider
+          value={zoom}
+          min={1}
+          max={3}
+          step={0.01}
+          aria-labelledby="Zoom"
+          onChange={(e, zoom) => setZoom(zoom)}
+        />
+      </div>
     </div>
   )
 };
diff --git a/src/containers/AvatarCropModal/AvatarCropModal.tsx b/src/containers/AvatarCropModal/AvatarCropModal.tsx
index a24d2b4..4decdfb 100644
--- a/src/containers/AvatarCropModal/AvatarCropModal.tsx
+++ b/src/containers/AvatarCropModal/AvatarCropModal.tsx
@@ -22,10 +22,10 @@ const useStyles = makeStyles(theme => ({
   cropContainer: {

     position: 'relative',

     width: '100%',

-    height: '100vh',

-    background: '#333',

+    // height: '100vh',

+    // background: '#333',

     [theme.breakpoints.up('sm')]: {

-      height: 400,

+      // height: 400,

     },

   }

 }));