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

…to icon-pack3

package.json

@@ -12,7 +12,7 @@
     "@testing-library/user-event": "^12.6.0",
     "bootstrap": "^4.5.1",
     "dom-to-image": "^2.6.0",
-    "jspdf": "^2.3.0",
+    "jspdf": "^2.3.1",
     "leaflet": "^1.7.1",
     "mousetrap": "^1.6.5",
     "node-sass": "^4.14.1",

src/components/Header/Header.js

@@ -5,7 +5,7 @@ import styles from './Header.module.css';
 import logo from './../../assets/logo/logo.webp';
 import {ImInfo} from "react-icons/im";
 import {RiTeamLine, RiContactsLine} from "react-icons/ri";
-import {BiDonateHeart, BiMenu} from "react-icons/bi";
+import {BiDonateHeart} from "react-icons/bi";
 
 const quickLinks = [
     {
@@ -33,6 +33,9 @@ const quickLinks = [
 function Header() {
     let navLinkRef = useRef(null);
     let headerRef = useRef(null);
+    let btn1Ref = useRef(null);
+    let btn2Ref = useRef(null);
+    let btn3Ref = useRef(null);
     const history = useHistory();
 
     const [location, setLocation] = useState(window.location.pathname);
@@ -46,6 +49,9 @@ function Header() {
     function drop() {
         navLinkRef.current.classList.toggle(styles.rightDrop);
         headerRef.current.classList.toggle(styles.HeaderOpen);
+        btn1Ref.current.classList.toggle(styles.btn1);
+        btn2Ref.current.classList.toggle(styles.btn2);
+        btn3Ref.current.classList.toggle(styles.btn3);
     }
 
     return (
@@ -67,8 +73,12 @@ function Header() {
                         Sketch
                     </NavLink>
                 </div>
-                <div className={styles.hamburger} onClick={()=>drop()}>
-                    <BiMenu size={30}/>
+                <div className={styles.hamburger} onClick={() => drop()}>
+                    <div className={styles.menu_btn}>
+                        <div ref={btn1Ref} className={styles.btn_line}></div>
+                        <div ref={btn2Ref} className={styles.btn_line}></div>
+                        <div ref={btn3Ref} className={styles.btn_line}></div>
+                    </div>
                 </div>
             </header>
             <div className={styles.quick_box}>

src/components/Header/Header.module.css

@@ -33,6 +33,19 @@
     right: 10px;
 }
 
+.menu_btn{
+    width: 27px;
+    height: 18px;
+}
+
+.btn_line{
+    width: 100%;
+    height: 5px;
+    background: white;
+    margin-bottom: 2px;
+    transition: all 0.3s ease-in-out;
+}
+
 .header_links {
     padding: 0.3rem 0.5rem;
     margin: 0 0.1rem;
@@ -92,7 +105,7 @@
     transform: translateX(0);
 }
 
-@media only screen and (max-width: 460px) {
+@media only screen and (max-width: 550px) {
 
     .HeaderDrop{
         flex-wrap: wrap;
@@ -118,4 +131,15 @@
     .hamburger {
         display: block;
     }
-}
+    .btn1{
+
+        transform: rotate(45deg) translate(9px, 3px);
+    }      
+    .btn2 {
+        opacity: 0;
+    }
+    .btn3 {
+
+        transform: rotate(-45deg) translate(7px, -1px);
+    }
+}

src/pages/Editor/containers/editContext.js

@@ -15,7 +15,7 @@ const EditContextProvider = props => {
   const aImagePrefix = "";
   const [pageSrc, setPageSrc] = useState(`${aImagePrefix}blank1.png`);
   const [isBody, setIsBody] = useState(true);
-  
+
 
   const [headValues, setHeadValues] = useState({
     headSize: null,
@@ -158,7 +158,9 @@ const EditContextProvider = props => {
     e.preventDefault();
 
     if (window.File && window.FileReader && window.FileList && window.Blob) {
+
       let textarea = document.querySelector("#show-text");
+      textarea.value = "";
       var file = document.querySelector("input[type=file]").files[0];
       var reader = new FileReader();
 
@@ -209,8 +211,8 @@ const EditContextProvider = props => {
     >
       {props.children}
 
-      
-      
+
+
       <ReactSnackBar Icon={<img style={svgStyles} src={checkBox} alt="" />} Show={show}>
         Generating PDF! Please wait...
       </ReactSnackBar>

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

@@ -80,4 +80,18 @@
     font-size: 1.5rem;
     padding: 1rem;
     margin: 3rem 0;
-}
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 8px rgba(12, 11, 11, 0.7); 
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 13px rgba(31, 113, 180, 5); 
+}

src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx

@@ -4,29 +4,33 @@ import styles from "./EmojiRating.module.css";
 function EmojiRating() {
   return (
     <div className={styles.emojis}>
+
+    {/*MODIFIED the emojis in the experience form*/}
+
+
       <label>
         <input className={styles.radio} type="radio" value="1" name="feedback" />
-        <span className={styles.emoji}>&#128553;</span>
+        <span className={styles.emoji}>&#128077;</span>
       </label>
 
       <label>
         <input className={styles.radio} type="radio" value="2" name="feedback" />
-        <span className={styles.emoji}>&#128542;</span>
+        <span className={styles.emoji}>&#128078;</span>
       </label>
 
       <label>
         <input className={styles.radio} type="radio" value="3" name="feedback" />
-        <span className={styles.emoji}>&#128528;</span>
+        <span className={styles.emoji}>&#128079;</span>
       </label>
 
       <label>
         <input className={styles.radio} type="radio" value="4" name="feedback" />
-        <span className={styles.emoji}>&#128522;</span>
+        <span className={styles.emoji}>&#128147;</span>
       </label>
 
       <label>
         <input className={styles.radio} type="radio" value="5" name="feedback" />
-        <span className={styles.emoji}>&#128516;</span>
+        <span className={styles.emoji}>&#129327;</span>
       </label>
     </div>
   );

src/pages/Home/sections/Contact/components/ExperienceForm/ExperienceForm.jsx

@@ -20,11 +20,14 @@ function ExperienceForm() {
             <div className={styles.circle}>
               <div className={styles.circle2}></div>
             </div>
+            {/*modified the fields of the experience form*/}
+
             <div className={styles.fieldsWrap}>
               <div className={styles.inputDiv}>
-                <input type="text" placeholder="Your Name" required />
-                <input type="email" placeholder="Email" required />
-                <input type="tel" placeholder="Phone (optional)" />
+                <input type="text" pattern="[a-z]*" placeholder="Your Name (only text)" required />
+                <input type="email" placeholder="Email(eg : yourname@domain)" required />
+               {/* <input type="tel" placeholder="Phone (optional)" />*/}
+               <input type="text" pattern="[0-9]*" placeholder="Phone (only numeric)(optional)" />
               </div>
               <div className={styles.experience}>
                 <span>Rate your experience:</span>

src/pages/Sketch/components/IconLibrary/IconsLibrary.jsx

@@ -3,7 +3,8 @@ import style from "./icon-lib.module.css";
 
 // Put you icon pack import here
 const iconPack1SVGs = importAll(require.context("./icon-pack1", false, /\.svg$/));
-const iconPack2SVGs = importAll(require.context("./icon-pack2", false, /\.svg$/));
+const iconPack21SVGs = importAll(require.context("./icon-pack2.1", false, /\.svg$/));
+const iconPack22SVGs = importAll(require.context("./icon-pack2.2", false, /\.svg$/));
 const iconPack3SVGs = importAll(require.context("./icon-pack3", false, /\.svg$/));
 const iconPack4SVGs = importAll(require.context("./icon-pack4", false, /\.svg$/));
 
@@ -44,8 +45,11 @@ function IconsLibrary(props) {
       <div className={style.panel}>{/* search bar */}</div>
       <div className={style.iconLib}>
         <IconPreview iconPackSVGs={iconPack1SVGs} categoryTitle="Tech Stack Icons" />
-        <IconPreview iconPackSVGs={iconPack2SVGs} categoryTitle="Tech Stack Icons" />
+        <IconPreview iconPackSVGs={iconPack21SVGs} categoryTitle="Stick Figure Icons - Light" />
+        <IconPreview iconPackSVGs={iconPack22SVGs} categoryTitle="Stick Figure Icons - Bold" />
+        {/* https://svgsilh.com/tag/stickman-1.html */}
         <IconPreview iconPackSVGs={iconPack3SVGs} categoryTitle="Speech Bubble Icons" />
+        {/* https://drwn.io/ */}
         {/* https://freesvg.org/search/ */}
         {/* https://www.flaticon.com/free-icons/hand-drawn-speech-bubble */}
         {/* https://www.flaticon.com/packs/speech-bubbles-2 */}