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

…to husky

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"
   },
@@ -32,7 +32,9 @@
     "pdf-lib": "^1.16.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.3",
     "react-dropzone": "^11.3.2",
     "react-easy-emoji": "^1.4.0",
     "react-helmet": "^6.1.0",

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}

src/pages/Sketch/components/Toolbox/Toolbox.jsx

@@ -1,5 +1,4 @@
-// import React, {useState} from "react";
-import React from "react";
+import React, { useState } from "react";
 import styles from "./toolbox.module.scss";
 import {
 	AiOutlineLine,
@@ -30,6 +29,7 @@ import {
 	ListItemText,
 	ListItemIcon,
 	Divider,
+	ClickAwayListener,
 } from "@material-ui/core";
 import {
 	AccountTree,
@@ -42,6 +42,7 @@ import {
 	Save,
 } from "@material-ui/icons";
 import IconsLibrary from "./../IconLibrary/IconsLibrary";
+import { ChromePicker } from "react-color";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -136,6 +137,41 @@ function VerticalTabs(props) {
 		loadLastState,
 		saveInstance,
 	} = props;
+	const [displayColorPicker, setDisplayColorPicker] = useState(false);
+	const ColorPicker = props => {
+		const { width, name, color, onColorChange } = props;
+		return (
+			<div className={styles.root}>
+				<div className={styles.swatch}>
+					<div
+						className={styles.colorIndicator}
+						style={{
+							backgroundColor: props.color || "#fff",
+						}}
+						onMouseDown={() => {
+							setDisplayColorPicker(true);
+						}}
+					/>
+				</div>
+				{displayColorPicker ? (
+					<ClickAwayListener
+						onClickAway={() => {
+							setDisplayColorPicker(false);
+						}}
+					>
+						<div className={styles.popover}>
+							<ChromePicker
+								width={width}
+								name={name}
+								color={color}
+								onChangeComplete={color => onColorChange(color.hex)}
+							/>
+						</div>
+					</ClickAwayListener>
+				) : null}
+			</div>
+		);
+	};
 
 	const classes = useStyles();
 	const [value, setValue] = React.useState(0);
@@ -296,11 +332,11 @@ function VerticalTabs(props) {
 					<List component="div">
 						<Feature title="Canvas Setup">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_bg_color"
-									value={background}
-									onChange={e => setBackground(e.target.value)}
+									color={background}
+									onColorChange={setBackground}
 								/>
 								<input
 									className={styles.hexInput}
@@ -372,11 +408,11 @@ function VerticalTabs(props) {
 									<>
 										<Feature title="Fill Color">
 											<div className={styles.colorPicker}>
-												<input
-													type="color"
+												<ColorPicker
+													width={200}
 													name="canvas_pen_color"
-													value={fillColor}
-													onChange={e => setFillColor(e.target.value)}
+													color={fillColor}
+													onColorChange={setFillColor}
 												/>
 												<input
 													className={styles.hexInput}
@@ -455,11 +491,11 @@ function VerticalTabs(props) {
 
 						<Feature title="Stroke">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_pen_color"
-									value={color}
-									onChange={e => setColor(e.target.value)}
+									color={color}
+									onColorChange={setColor}
 								/>
 								<input
 									className={styles.hexInput}
@@ -550,11 +586,11 @@ function VerticalTabs(props) {
 					<List component="div">
 						<Feature title="Stroke">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_pen_color"
-									value={color}
-									onChange={e => setColor(e.target.value)}
+									color={color}
+									onColorChange={setColor}
 								/>
 								<input
 									className={styles.hexInput}

src/pages/Sketch/components/Toolbox/toolbox.module.scss

@@ -89,14 +89,25 @@
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
-			input[type="color"] {
-				border: none;
-				outline: none;
-				width: 20px;
-				height: 20px;
+			.root {
+				position: relative;
+				.swatch {
+					box-shadow: 0px 0px 8px 5px #ede8e8;
+					border-radius: 5px;
+					padding: 2px;
+					.colorIndicator {
+						border-radius: 3px;
+						height: 22px;
+						width: 27px;
+					}
+				}
+				.popover {
+					position: absolute;
+				}
 			}
 			.hexInput {
 				font-size: 80%;
+				font-family: monospace;
 				height: 1.7rem;
 				margin-top: 2px;
 				margin-left: 10px;