Merge branch 'master' of https://github.com/smaranjitghose/doc2pen in…

…to draggable-undo-redo

package.json

@@ -4,12 +4,12 @@
   "version": "0.1.0",
   "homepage": ".",
   "scripts": {
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "eject": "react-scripts eject",
-    "start": "react-scripts start",
     "test": "react-scripts test",
+    "eject": "react-scripts eject",
     "lint": "eslint --ext js,jsx src",
     "lint:fix": "eslint --ext js,jsx src --fix"
   },
@@ -49,7 +49,8 @@
     "reactstrap": "^8.9.0",
     "roughjs": "^4.4.1",
     "sass": "^1.34.0",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "react-color": "^2.19.3"
   },
   "devDependencies": {
     "eslint": "^7.27.0",

src/components/Header/header.module.scss

@@ -101,7 +101,7 @@
 		transform: translateX(89px);
 		color: colors.$light-blue;
 		border-radius: 5px 0 0 5px;
-
+		text-decoration: none;
 		&:hover {
 			color: aquamarine;
 			text-decoration: none;
@@ -124,8 +124,6 @@
 
 	.HeaderOpen {
 		gap: 0px;
-		// transform: translateX(-100%);
-		// transition: all 0.1s cubic-bezier(0.9, 0, 0.33, 1);
 	}
 
 	.Header {
@@ -137,7 +135,6 @@
 			transition: all 0.5s ease;
 			z-index: 1002;
 			height: 100vh;
-			// padding-right: 20px;
 			overflow: hidden;
 			transform: translateY(0);
 			transition: all 0.1s cubic-bezier(0.9, 0, 0.33, 1);

src/pages/Editor/containers/editContext.js

@@ -116,10 +116,6 @@ const EditContextProvider = props => {
 
 		setShow(true);
 		setShowing(true);
-		// setTimeout(() => {
-		//   setShow(false);
-		//   setShowing(false);
-		// }, 2000);
 	};
 
 	const downloadPdf = async (imgDataUris, name) => {

src/pages/Editor/sections/OutputComponent/Output.jsx

@@ -22,7 +22,10 @@ const OutputComponent = ({ pageNo, show }) => {
 				className={`${classes.wrapper} col-11 col-lg-8 mx-auto mt-4 p-2`}
 				style={{ display: show || allPagesVisible ? "block" : "none" }}
 			>
-				<div id="outputPage" className={"outputPage col-12 mx-auto px-0"}>
+				<div
+					id="outputPage"
+					className={classes.outputBox + " outputPage col-12 mx-auto px-0"}
+				>
 					<div className={`${classes.imgContainer} col-12 mx-auto px-0`}>
 						<img
 							src={page.default}

src/pages/Editor/sections/OutputComponent/output.module.scss

@@ -2,6 +2,9 @@
 
 .wrapper {
 	border: 3px solid colors.$royal-blue;
+	.outputBox {
+		position: relative;
+	}
 	.imgContainer {
 		position: relative;
 		img {

src/pages/Home/sections/Team/components/FluidCard/FluidCard.jsx

@@ -15,7 +15,6 @@ function FluidCard(props) {
 	const [context, setContext] = useState(null);
 
 	const fluidEffect = useCallback(() => {
-		// Vars
 		let pointsA = [],
 			points = 8,
 			viscosity = 300,

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/DragDrop.jsx

@@ -27,7 +27,7 @@ function DragDrop(props) {
 					outputOptionsTemp.splice(index, 1);
 					setOutputOptions(outputOptionsTemp);
 				}
-
+				if (fileType === "pdf") setOutputOptions(["pdf"]);
 				return Object.assign(file, {
 					preview: URL.createObjectURL(file),
 				});

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}

src/pages/Sketch/components/Canvas.jsx

@@ -253,7 +253,6 @@ function Canvas() {
 		setIsDrawing(false);
 		event.preventDefault();
 		setTypeState(null);
-		// console.log(context.getImageData(0, 0, canvasWidth, canvasHeight));
 	}
 
 	function handleMouseLeave() {