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

…to icon-pack2

src/index.css

@@ -43,6 +43,11 @@
   src: url(./fonts/LuckiestGuy-Regular.ttf);
 }
 
+@font-face {
+  font-family: Enola;
+  src: url(./fonts/Enola-Regular.ttf);
+}
+
 * {
   margin: 0;
   padding: 0;

src/pages/Editor/sections/Settings/Settings.js

@@ -45,7 +45,7 @@ const Settings = () => {
           <Dropdown
             name="Change Style"
             type="font"
-            items={["HomemadeApple","Caveat","Dawning","IndieFlower","NothingYouCouldDo","Liu","LeagueScript"]}
+            items={["HomemadeApple","Caveat","Dawning","IndieFlower","NothingYouCouldDo","Liu","LeagueScript", "Enola"]}
           />
           <div className={styles.vSeparator}></div>
           <Dropdown name="Change Sheet" type="page" items={["Ruled1", "Ruled2", "OnlyMargin", "Blank1", "Blank2"]}/>

src/pages/Home/sections/Contact/ContactUs.jsx

@@ -1,6 +1,4 @@
 import React, { useRef } from "react";
-import MetaComponent from "../../../../seo/MetaComponent";
-import metaData from '../../../../seo/metaData'
 import ExperienceForm from "./components/ExperienceForm/ExperienceForm";
 import Map from "./components/Map/Map";
 
@@ -12,11 +10,6 @@ function ContactUs() {
 
   return (
     <div className={styles.ContactUs} id="home_contact">
-      <MetaComponent
-        title={metaData.contact.title}
-        description={metaData.contact.description}
-        keywords={metaData.contact.keywords}
-      />
       <p className={styles.titleMain} >Get in Touch</p>
       <div className={styles.contact_and_info_container}>
         <ExperienceForm />

src/pages/Home/sections/Team/Team.js

@@ -33,7 +33,7 @@ function Team() {
       const [contributors, setContributors] = useState([]);
 
       useEffect(() => {
-        fetch('https://api.github.com/repos/smaranjitghose/doc2pen/contributors')
+        fetch('https://api.github.com/repos/smaranjitghose/doc2pen/contributors?per_page=1000')
         .then(res => res.json())
         .then(data => {
           // console.log(data);
@@ -79,7 +79,6 @@ function Team() {
                       <img src={c.avatar_url} className={styles.grid_wd_100} alt="Profile"/>
                       <figcaption className={`${styles.position_absolute} ${styles.grid_wd_100} ${styles.va_top}`}>
                         <div className={styles.text}>
-                          <div>{c.login}</div>
                           <a href={c.html_url} className={styles.social_icon} target="_blank" rel="noreferrer">
                             <FaGithub />
                           </a>

src/pages/Home/sections/Team/Team.module.css

@@ -199,6 +199,7 @@
 
 .position_relative {
     position: relative;
+    border-radius:50%;
 }
 
 .position_absolute {
@@ -238,10 +239,8 @@
 
 .figure {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    width: 25%;
+    width: 7%;
     overflow: hidden;
-    width: 170px;
-    height: 170px;
 }
 
 .figure img {
@@ -295,7 +294,6 @@
 .social_icon {
     text-shadow: 0 0 1px #000;
     font-size: 1.2rem;
-    margin-left: 5px;
     color: black;
     cursor: pointer;
 }

src/pages/Sketch/components/Canvas.js

@@ -17,7 +17,8 @@ function Canvas() {
   const [context, setContext] = useState();
 
   /* ----- Feature State ----- */
-  const [color, setColor] = useState("#ff0000");
+  const [color, setColor] = useState("#000000");
+  const [background, setBackground] = useState("#ffffff");
   const [width, setWidth] = useState("1");
   const [opacity, setOpacity] = useState("1");
   const [stroke, setStroke] = useState("none");
@@ -47,17 +48,23 @@ function Canvas() {
   const [canvasWidth, setCanvasWidth] = useState(window.innerWidth - 50);
   const [canvasHeight, setCanvasHeight] = useState(window.innerHeight - 100);
 
-  useEffect(() => {
-    window.addEventListener("resize", () => {
-      setCanvasWidth(window.innerWidth - 50);
-      setCanvasHeight(window.innerHeight - 100);
-    });
+  const handleResizeListener = () => {
+    setCanvasWidth(window.innerWidth - 50);
+    setCanvasHeight(window.innerHeight - 100);
+  };
 
+  useEffect(() => {
+    window.addEventListener("resize", handleResizeListener);
     return () => {
-      window.removeEventListener("resize", () => {});
+      window.removeEventListener("resize", handleResizeListener);
     };
   });
 
+  // useEffect(() => {
+  //     console.log("canvasStateAt: ", canvasStateAt);
+  //     console.log("canvasStates: ", canvasStates);
+  // }, [canvasStateAt, canvasStates])
+
   function hexToRGB(hex) {
     let r = 0,
       g = 0,
@@ -111,14 +118,7 @@ function Canvas() {
 
     if (type === "pen") {
       logicDown(point);
-    } else if (
-      type === "line" ||
-      type === "square" ||
-      type === "circle" ||
-      type === "triangle" ||
-      type === "arrow" ||
-      type === "diamond"
-    ) {
+    } else if (["line", "square", "circle", "triangle", "arrow", "diamond"].includes(type)) {
       setTypeState(context.getImageData(0, 0, canvasWidth, canvasHeight));
       logicDown(point);
       setDownPoint({ x: point.x, y: point.y });
@@ -159,20 +159,30 @@ function Canvas() {
       return;
     }
 
-    if (type === "pen") {
-      penMove(point);
-    } else if (type === "line") {
-      lineMove(point);
-    } else if (type === "square") {
-      squareMove(point);
-    } else if (type === "circle") {
-      circleMove(point);
-    } else if (type === "triangle") {
-      triangleMove(point);
-    } else if (type === "arrow") {
-      arrow(point);
-    } else if (type === "diamond") {
-      diamondMove(point);
+    switch (type) {
+      case "pen":
+        penMove(point);
+        break;
+      case "line":
+        lineMove(point);
+        break;
+      case "square":
+        squareMove(point);
+        break;
+      case "circle":
+        circleMove(point);
+        break;
+      case "triangle":
+        triangleMove(point);
+        break;
+      case "arrow":
+        arrow(point);
+        break;
+      case "diamond":
+        diamondMove(point);
+        break;
+      default:
+        break;
     }
 
     event.preventDefault();
@@ -398,11 +408,23 @@ function Canvas() {
     Mousetrap.bind("ctrl+z", () => undo());
     Mousetrap.bind("ctrl+y", () => redo());
   }, [redo, undo]);
+
+  useEffect(() => {
+    if (context) {
+      context.beginPath();
+      context.rect(0, 0, canvasWidth, canvasHeight);
+      context.fillStyle = background;
+      context.fill();
+    }
+  }, [background, context, canvasWidth, canvasHeight]);
+
   return (
     <>
       <Toolbox
         color={color}
         setColor={setColor}
+        background={background}
+        setBackground={setBackground}
         width={width}
         setWidth={setWidth}
         opacity={opacity}