From 819d8249df8189e68a708cf11c28f69710583d6f Mon Sep 17 00:00:00 2001
From: imkpandey <imkpandey31@gmail.com>
Date: Sat, 25 Dec 2021 14:55:54 +0530
Subject: [PATCH 1/2] Added form layout

---
 src/App.js    |  2 +-
 src/Home.js   | 51 +++++++++++++++++++++++++++++++++----------------
 src/index.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index b5270bb..7f0fd44 100644
--- a/src/App.js
+++ b/src/App.js
@@ -79,7 +79,7 @@ function Handwrite() {
       <img src={logo} alt="handwrite logo" className="Handwrite-Logo" />
       <Navbar />
       <Home />
-      <br/>
+      <br/><br/>
       <About />
       <hr className="divider"/>
       <br />
diff --git a/src/Home.js b/src/Home.js
index 402ea26..f795072 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -5,6 +5,7 @@ import { CloudUploadOutlined } from '@material-ui/icons';
 import Grid from '@material-ui/core/Grid';
 import { Button } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
+import Switch from '@material-ui/core/Switch';
 import { HighlightOffOutlined } from '@material-ui/icons';
 
 function Home(props) {
@@ -167,13 +168,13 @@ function Home(props) {
         <div className="spinner"></div>
       </div>
       <div className="loader" style={{ display: currentState === 6 ? "" : "none" }}>
-        <font color = "red"> {error.current} </font>
+        <font color="red"> {error.current} </font>
       </div>
       <div className="grid">
         <form onSubmit={(e) => sendImage(e)}>
           <Grid container direction="row" justify="space-around" alignItems="center">
             <div><br />
-              <div {...getRootProps({className: 'dropzone'})} className="image-container"> <input {...getInputProps()} />
+              <div {...getRootProps({ className: 'dropzone' })} className="image-container"> <input {...getInputProps()} />
                 {image[0] ?
                   <div className="input-image">
                     <img src={image[0]} alt="Selected Form" />
@@ -192,20 +193,38 @@ function Home(props) {
                   <HighlightOffOutlined />
                 </IconButton></h6></center> : ""}
             </div>
-            <div className="submit-button">
-              <Button variant="outlined" href="https://github.com/builtree/handwrite/raw/dev/handwrite_sample.pdf">Download Sample Form</Button><br /><br />
-              <Button type="submit" variant="outlined" disabled={loading() || currentState === 0}>
-                CREATE FONT
-              </Button>
-              <br /><br />
-              <div className="form-check">
-                <input className="form-check-input" type="checkbox" id="researchOption" defaultChecked></input>
-                <label className="form-check-label" htmlFor="flexCheckChecked">
-                  Opt-in for research use.
-                </label>
-              </div>
-              <br /><br />
-              <Button variant="outlined" href={font} download="font.ttf" style={{ display: Boolean(font) ? "" : "none" }}>Download your font</Button>
+            <div className="settings-wrap">
+              <h2>Font Settings</h2>
+              <form>
+                <div className="input-wrap">
+                  <label className="form-label" for="file-name">File name</label>
+                  <input className="form-input" type="text" id="file-name" placeholder="" autoComplete='off' />
+                </div>
+                <div className="input-wrap">
+                  <label className="form-label" for="font-family">Font family</label>
+                  <input className="form-input" type="text" id="font-family" autoComplete='off' />
+                </div>
+                <div className="input-wrap">
+                  <label className="form-label" for="font-style">Font style</label>
+                  <input className="form-input" type="text" id="font-style" autoComplete='off' />
+                </div>
+                <br />
+                <div className="form-check">
+                  <input className="form-check-input" type="checkbox" id="researchOption" defaultChecked></input>
+                  <label className="form-check-label" htmlFor="flexCheckChecked">
+                    Opt-in for research use.
+                  </label>
+                </div>
+                <br /><br />
+                <div className="submit-button">
+                  <Button variant="outlined" href="https://github.com/cod-ed/handwrite/raw/dev/handwrite_sample.pdf">Download Sample Form</Button><br /><br />
+                  <Button type="submit" variant="outlined" disabled={loading() || currentState === 0}>
+                    CREATE FONT
+                  </Button>
+                  <br /><br />
+                  <Button variant="outlined" href={font} download="font.ttf" style={{ display: Boolean(font) ? "" : "none" }}>Download your font</Button>
+                </div>
+              </form>
             </div>
           </Grid>
         </form>
diff --git a/src/index.css b/src/index.css
index 8573fd7..7595644 100644
--- a/src/index.css
+++ b/src/index.css
@@ -159,6 +159,59 @@ code {
     border-color: hsl(0, 0%, 21%);
 }
 
+.settings-wrap{
+    margin: 20px;
+    background-color: #fff;
+    width: 400px;
+    border-radius: 5px;
+    /* box-shadow:  0 10px 10px -5px rgba(0, 0, 0, 0.2); */
+}
+
+.settings-wrap h2{
+    margin-top: 10px;
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: 500;
+    color: black;
+    margin-bottom: 32px;
+}
+
+.input-wrap{
+    display: flex;
+    flex-direction: column;
+    margin: 15px 0;
+}
+
+.form-label{
+    font-size: 20px;
+    margin-bottom: 3px;
+}
+
+.form-input{
+    border: none;
+    background-color: #f3f9fa;;
+    border-radius: 5px;
+    padding: 12px;
+    font-family: inherit;
+    color: inherit;
+    outline: none;
+    border: 1px solid rgba(0, 0, 0, 0);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0);
+    transition: 250ms all ease-in;
+}
+
+.form-input:hover {
+    border: 1px solid rgba(203, 235, 242, 0.987);
+    box-shadow: 0 0 5px rgba(203, 235, 242, 0.987);
+    background: white;
+  }
+  
+  .form-input:focus {
+    border: 1px solid rgba(173, 217, 226, 0.987);
+    box-shadow: 0 0 5px rgba(97, 212, 238, 0.987);
+    background: white;
+  }
+
 .divider {
     color: rgb(61, 61, 61);
     background-color: rgb(61, 61, 61);

From fcc0249dd4069eceee277268d943b39028cb4962 Mon Sep 17 00:00:00 2001
From: imkpandey <imkpandey31@gmail.com>
Date: Mon, 27 Dec 2021 13:51:59 +0530
Subject: [PATCH 2/2] Added Toggle switch to Font Settings

---
 src/Home.js   | 16 ++++++++--------
 src/index.css | 52 +++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/Home.js b/src/Home.js
index f795072..d9727b2 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -5,7 +5,6 @@ import { CloudUploadOutlined } from '@material-ui/icons';
 import Grid from '@material-ui/core/Grid';
 import { Button } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
-import Switch from '@material-ui/core/Switch';
 import { HighlightOffOutlined } from '@material-ui/icons';
 
 function Home(props) {
@@ -197,27 +196,28 @@ function Home(props) {
               <h2>Font Settings</h2>
               <form>
                 <div className="input-wrap">
-                  <label className="form-label" for="file-name">File name</label>
-                  <input className="form-input" type="text" id="file-name" placeholder="" autoComplete='off' />
+                  <label className="form-label" for="file-name">Filename</label>
+                  <input className="form-input" type="text" id="file-name" placeholder="Rickroll" autoComplete='off' />
                 </div>
                 <div className="input-wrap">
-                  <label className="form-label" for="font-family">Font family</label>
-                  <input className="form-input" type="text" id="font-family" autoComplete='off' />
+                  <label className="form-label" for="font-family">Font Family</label>
+                  <input className="form-input" type="text" id="font-family" placeholder="Times" autoComplete='off' />
                 </div>
                 <div className="input-wrap">
-                  <label className="form-label" for="font-style">Font style</label>
-                  <input className="form-input" type="text" id="font-style" autoComplete='off' />
+                  <label className="form-label" for="font-style">Font Style</label>
+                  <input className="form-input" type="text" id="font-style" placeholder="Regular" autoComplete='off' />
                 </div>
                 <br />
                 <div className="form-check">
                   <input className="form-check-input" type="checkbox" id="researchOption" defaultChecked></input>
+                  <label className="form-check-toggle" for="researchOption">Toggle</label>&nbsp;&nbsp;
                   <label className="form-check-label" htmlFor="flexCheckChecked">
                     Opt-in for research use.
                   </label>
                 </div>
                 <br /><br />
                 <div className="submit-button">
-                  <Button variant="outlined" href="https://github.com/cod-ed/handwrite/raw/dev/handwrite_sample.pdf">Download Sample Form</Button><br /><br />
+                  {/* <Button variant="outlined" href="https://github.com/cod-ed/handwrite/raw/dev/handwrite_sample.pdf">Download Sample Form</Button><br /><br /> */}
                   <Button type="submit" variant="outlined" disabled={loading() || currentState === 0}>
                     CREATE FONT
                   </Button>
diff --git a/src/index.css b/src/index.css
index 7595644..7477dc2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -118,8 +118,8 @@ code {
 
 .image-container {
     display: flex;
-    height: 500px;
-    width: 390px;
+    height: 600px;
+    width: 400px;
     align-items: center;
     text-align: center;
     border-width: 1px;
@@ -169,7 +169,6 @@ code {
 
 .settings-wrap h2{
     margin-top: 10px;
-    text-transform: uppercase;
     text-align: center;
     font-weight: 500;
     color: black;
@@ -206,12 +205,57 @@ code {
     background: white;
   }
   
-  .form-input:focus {
+.form-input:focus {
     border: 1px solid rgba(173, 217, 226, 0.987);
     box-shadow: 0 0 5px rgba(97, 212, 238, 0.987);
     background: white;
   }
 
+.form-check-input {
+	height: 0;
+	width: 0;
+	visibility: hidden;
+}
+
+.form-check-toggle {
+	cursor: pointer;
+	text-indent: 9999px;
+	width: 40px;
+	height: 25px;
+	background: grey;
+	border-radius: 100px;
+	position: relative;
+}
+
+.form-check-toggle:after {
+	content: '';
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	width: 15px;
+	height: 15px;
+	background: #fff;
+	border-radius: 90px;
+	transition: 0.3s;
+}
+
+.form-check-input:checked + .form-check-toggle {
+	background: #33a9e9;
+}
+
+.form-check-input:checked + .form-check-toggle:after {
+	left: calc(100% - 5px);
+	transform: translateX(-100%);
+}
+
+.form-check-toggle:active:after {
+	width: 22px;
+}
+
+.form-check {
+    text-align: right;
+}
+
 .divider {
     color: rgb(61, 61, 61);
     background-color: rgb(61, 61, 61);