From 85673463388023ea154bae78b11aa70300b83435 Mon Sep 17 00:00:00 2001
From: rheo-chiti <chitransh.326@gmail.com>
Date: Thu, 20 Feb 2020 18:00:34 +0530
Subject: [PATCH 1/2] Icon cutoff fix

---
 client/src/App.js   |  4 ++--
 client/src/Menu.css |  4 ++--
 client/src/Menu.js  | 11 ++++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index dc508e8..9548f4b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import EpicMenu from './EpicMenu';
+import Menu from './Menu';
 
 import logo from './logo.png';
 class App extends Component {
@@ -13,7 +13,7 @@ class App extends Component {
 
     return (
       <div className="container center">
-        <EpicMenu links={links} logo={logo} />
+        <Menu links={links} logo={logo} />
       </div>
     );
   }
diff --git a/client/src/Menu.css b/client/src/Menu.css
index 3b271b6..95f5008 100644
--- a/client/src/Menu.css
+++ b/client/src/Menu.css
@@ -2,8 +2,8 @@
     background-color: white;
     box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
-    width: 752px;
-    height: 80px;
+    width: 800px;
+    height: 120px;
     display: flex;
     justify-content: space-between;
     padding: 0 40px;
diff --git a/client/src/Menu.js b/client/src/Menu.js
index fd1cadb..f0b2c01 100644
--- a/client/src/Menu.js
+++ b/client/src/Menu.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import './EpicMenu.css';
+import './Menu.css';
 import searchIcon from './search-icon.png';
 
 class Menu extends Component {
@@ -28,8 +28,8 @@ class Menu extends Component {
             let linkMarkup = link.active ? (
                 <a className="menu__link menu__link--active" href={link.link}>{link.label}</a>
             ) : (
-                <a className="menu__link" href={link.link}>{link.label}</a>
-            );
+                    <a className="menu__link" href={link.link}>{link.label}</a>
+                );
 
             return (
                 <li key={index} className="menu__list-item">
@@ -41,7 +41,8 @@ class Menu extends Component {
         return (
             <nav className="menu">
                 <h1 style={{
-                backgroundImage: 'url(' + this.props.logo + ')'
+                    backgroundImage: 'url(' + this.props.logo + ')',
+                    width: '120px'
                 }} className="menu__logo">Epic Co.</h1>
 
                 <div className="menu__right">
@@ -50,7 +51,7 @@ class Menu extends Component {
                     </ul>
 
                     <button onClick={this.showForm.bind(this)} style={{
-                    backgroundImage: 'url(' + searchIcon + ')'
+                        backgroundImage: 'url(' + searchIcon + ')'
                     }} className="menu__search-button"></button>
 
                     {searchForm}

From 68554a56cdd1218bb68cea81c45c53f238ae5b06 Mon Sep 17 00:00:00 2001
From: rheo-chiti <chitransh.326@gmail.com>
Date: Fri, 21 Feb 2020 03:52:28 +0530
Subject: [PATCH 2/2] Submit Button Disabled

---
 client/src/pages/SignUpForm.js | 126 ++++++++++++++++++++-------------
 1 file changed, 75 insertions(+), 51 deletions(-)

diff --git a/client/src/pages/SignUpForm.js b/client/src/pages/SignUpForm.js
index 48636c6..d69c2ac 100644
--- a/client/src/pages/SignUpForm.js
+++ b/client/src/pages/SignUpForm.js
@@ -2,66 +2,90 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 
 class SignUpForm extends Component {
-    constructor() {
-        super();
+  constructor() {
+    super();
 
-        this.state = {
-            email: '',
-            password: '',
-            name: '',
-            hasAgreed: false
-        };
+    this.state = {
+      email: '',
+      password: '',
+      name: '',
+      hasAgreed: false,
+      disabledButtonColor: '#9fcfff',
+      disabledTextColor: '#808080'
+    };
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
 
-    handleChange(e) {
-        let target = e.target;
-        let value = target.type === 'checkbox' ? target.checked : target.value;
-        let name = target.name;
+  handleChange(e) {
+    let target = e.target;
+    let value = target.type === 'checkbox' ? target.checked : target.value;
+    let name = target.name;
 
-        this.setState({
-          [name]: value
-        });
-    }
+    this.setState({
+      [name]: value
+    });
+  }
 
-    handleSubmit(e) {
-        e.preventDefault();
+  handleSubmit(e) {
+    e.preventDefault();
 
-        console.log('The form was submitted with the following data:');
-        console.log(this.state);
-    }
+    console.log('The form was submitted with the following data:');
+    console.log(this.state);
+  }
+
+  render() {
 
-    render() {
-        return (
+    let content = null;
+    if (this.state.email.length && this.state.password.length && this.state.name.length && this.state.hasAgreed) {
+      content = <button className="FormField__Button mr-20"
+        onClick={() => { console.log(this.state.isValid) }}
+      >Sign Up</button>
+    }
+    else {
+      content = <button className="FormField__Button mr-20"
+        style={
+          {
+            backgroundColor: this.state.disabledButtonColor,
+            color: this.state.disabledTextColor
+          }
+        }
+        disabled
+      >Sign Up</button>
+    }
+    
+    return (
+      <div className="container">
         <div className="FormCenter">
-            <form onSubmit={this.handleSubmit} className="FormFields">
-              <div className="FormField">
-                <label className="FormField__Label" htmlFor="name">Full Name</label>
-                <input type="text" id="name" className="FormField__Input" placeholder="Enter your full name" name="name" value={this.state.name} onChange={this.handleChange} />
-              </div>
-              <div className="FormField">
-                <label className="FormField__Label" htmlFor="password">Password</label>
-                <input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
-              </div>
-              <div className="FormField">
-                <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
-                <input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
-              </div>
+          <form onSubmit={this.handleSubmit} className="FormFields">
+            <div className="FormField">
+              <label className="FormField__Label" htmlFor="name">Full Name</label>
+              <input type="text" id="name" className="FormField__Input" placeholder="Enter your full name" name="name" value={this.state.name} onChange={this.handleChange} />
+            </div>
+            <div className="FormField">
+              <label className="FormField__Label" htmlFor="password">Password</label>
+              <input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
+            </div>
+            <div className="FormField">
+              <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
+              <input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
+            </div>
 
-              <div className="FormField">
-                <label className="FormField__CheckboxLabel">
-                    <input className="FormField__Checkbox" type="checkbox" name="hasAgreed" value={this.state.hasAgreed} onChange={this.handleChange} /> I agree all statements in <a href="" className="FormField__TermsLink">terms of service</a>
-                </label>
-              </div>
+            <div className="FormField">
+              <label className="FormField__CheckboxLabel">
+                <input className="FormField__Checkbox" type="checkbox" name="hasAgreed" value={this.state.hasAgreed} onChange={this.handleChange} /> I agree all statements in <a href="" className="FormField__TermsLink">terms of service</a>
+              </label>
+            </div>
 
-              <div className="FormField">
-                  <button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">I'm already member</Link>
-              </div>
-            </form>
-          </div>
-        );
-    }
+            <div className="FormField">
+              {content}
+              <Link to="/sign-in" className="FormField__Link">I'm already member</Link>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
 }
 export default SignUpForm;
\ No newline at end of file