Merge pull request smaranjitghose#1041 from ashuvssut/media-manip-bug

Media manip bug - image looks squuezed

src/pages/MediaManip/Button/Button.jsx

@@ -1,15 +1,20 @@
 import React from "react";
 import styles from "./button.module.scss";
+import { Button as MuiButton } from "@material-ui/core";
 
-function Button({ value, type, disabled, onClick }) {
+function Button({ value, disabled, onClick }) {
 	return (
-		<button
-			className={`${styles.btn} ${styles[type]}`}
-			disabled={disabled}
-			onClick={onClick}
-		>
-			{value}
-		</button>
+		<div className={styles.btnWrap}>
+			<MuiButton
+				variant="contained"
+				color="primary"
+				component="span"
+				onClick={onClick}
+				disabled={disabled}
+			>
+				{value}
+			</MuiButton>
+		</div>
 	);
 }
 

src/pages/MediaManip/Button/button.module.scss

@@ -1,46 +1,3 @@
-.btn {
+.btnWrap {
 	padding: 15px;
-	border: 3px solid transparent;
-	border-radius: 6px;
-	font-weight: bold;
-	font-size: 14px;
-	text-transform: uppercase;
-	margin-left: 10px;
-	box-shadow: 2px 4px 5px #0000005b;
-
-	&:disabled {
-		cursor: not-allowed;
-		background-color: #cccccc;
-		color: #beb8b8;
-		border: 3px solid transparent;
-
-		&:hover {
-			background-color: #cccccc;
-			border: 3px solid transparent;
-			color: #b1afaf;
-		}
-	}
-}
-
-.primary {
-	background: #add8e6;
-	color: black;
-
-	&:hover {
-		background: #5597c0a6;
-		color: rgba(0, 0, 0, 0.651);
-		border: 3px solid #4e89ae;
-	}
-}
-
-.secondary {
-	background: #4e89ae;
-	border: 3px solid #4e89ae;
-	color: white;
-
-	&:hover {
-		background: #5597c0a6;
-		color: rgba(0, 0, 0, 0.651);
-		border: 3px solid #4e89ae;
-	}
 }

src/pages/MediaManip/DragDrop/drag-drop.module.scss

@@ -35,12 +35,13 @@
 	position: relative;
 
 	& > img {
-		display: "block";
+		object-fit: cover;
+		object-position: center center;
+		display: block;
 		width: 150px;
 		height: 150px;
 		border-radius: 10px;
 		margin-right: 10px;
-		object-fit: fill;
 		box-shadow: 0.8px 2px 6px rgba(36, 34, 34, 0.507);
 	}
 
@@ -56,19 +57,19 @@
 	}
 }
 
-.scroll::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
 	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 	border-radius: 10px;
 	background-color: #f5f5f5;
 }
 
-.scroll::-webkit-scrollbar {
+::-webkit-scrollbar {
 	width: 12px;
 	background-color: #f5f5f5;
 }
 
-.scroll::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
 	border-radius: 10px;
 	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

src/pages/MediaManip/MediaManip.jsx

@@ -6,7 +6,7 @@ import { PDFDocument } from "pdf-lib";
 import Progress from "./Progress/Progress";
 import Dropdown from "./DropDown/DropDown";
 import DragDrop from "./DragDrop/DragDrop";
-import Button from "./Button/Button";
+import MuiButton from "./Button/Button";
 
 import styles from "./media-manip.module.scss";
 
@@ -196,14 +196,14 @@ export default function MediaManip() {
 				setOutputOptions={setOutputOptions}
 			/>
 			<div className={styles.mediaManip_btn}>
-				<Button
+				<MuiButton
 					value="Convert"
 					type="primary"
 					onClick={() => onConvert()}
 					disabled={convert}
 				/>
 				{!convert && (
-					<Button
+					<MuiButton
 						value="Download"
 						type="secondary"
 						onClick={onDownload}