From 1414789e5da6f43d3c668573cc076aa6612a4b24 Mon Sep 17 00:00:00 2001 From: Anna Pawl Date: Tue, 8 Oct 2019 10:47:33 -0700 Subject: [PATCH 1/4] checkout form skeleton, no functionality yet --- client/CheckoutForm/CheckoutForm.jsx | 89 +++++++++++++++++++++++++++ client/CheckoutForm/CheckoutForm.scss | 38 ++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 client/CheckoutForm/CheckoutForm.jsx create mode 100644 client/CheckoutForm/CheckoutForm.scss diff --git a/client/CheckoutForm/CheckoutForm.jsx b/client/CheckoutForm/CheckoutForm.jsx new file mode 100644 index 0000000..f236dd1 --- /dev/null +++ b/client/CheckoutForm/CheckoutForm.jsx @@ -0,0 +1,89 @@ +import React, { Component } from 'react' +import './CheckoutForm.scss' +import Navbar from '../Navbar/Navbar' + +class CheckoutForm extends Component { + constructor(props) { + super(props) + this.state = { + name: '', + id: '', + email: '', + phoneNumber: '', + checkoutDuration: '', + date: '', + reasonForCheckout: '', + + } + } + + render() { + return ( +
+
+
+

Checkout Form

+
+ + {/* Name Field */} + + + {/* Company ID Field */} + + + {/* Email Address Field */} + + + {/* Phone Number Field */} + + + {/* Duration of Checkout Field */} + + + {/* Date Field */} {/* TODO - make dropdown calendar */} + + + {/* Reason for Checkout Field */} + + +
+ + +
+
+
+ ) + } +} + + +export default CheckoutForm \ No newline at end of file diff --git a/client/CheckoutForm/CheckoutForm.scss b/client/CheckoutForm/CheckoutForm.scss new file mode 100644 index 0000000..f668a1c --- /dev/null +++ b/client/CheckoutForm/CheckoutForm.scss @@ -0,0 +1,38 @@ +.checkout_square { + background-color:rgb(229,229,229); + width: 500px; + height: 60vw; + border-radius: 5px; + margin:15vh; +} + +.checkout_form_container { + + display: flex; + justify-content: center; + align-items: center; + +} + +.checkout_form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +} + +.input_field { + border-radius: 5px; + width:300px; + height:30px; + margin:10px; +} + +h1 { + font-family: 'Open Sans', sans-serif; + font-size: 1.5em; + font-weight:400; + text-transform: uppercase; + margin-top:15px; +} \ No newline at end of file From 7407f4ceda28cd4bcb3ef6e05358bd5bcb7d24d0 Mon Sep 17 00:00:00 2001 From: Anna Pawl Date: Tue, 8 Oct 2019 11:00:45 -0700 Subject: [PATCH 2/4] removed login --- client/Login/Login.css | 151 ----------------------------------------- client/Login/Login.jsx | 97 -------------------------- 2 files changed, 248 deletions(-) delete mode 100644 client/Login/Login.css delete mode 100644 client/Login/Login.jsx diff --git a/client/Login/Login.css b/client/Login/Login.css deleted file mode 100644 index a6380fc..0000000 --- a/client/Login/Login.css +++ /dev/null @@ -1,151 +0,0 @@ -body { - background: #f9fbfd; - /* font-family: 'Quicksand', sans-serif; */ -} - -.blackbg { - width: 100%; - height: 200px; - background: #333333; - z-index: 5; - position: absolute; - bottom: 0px; -} -.orangebg { - width: 100%; - height: 340px; - background: #f26522; - z-index: 1; - position: absolute; -} -.logo { - padding-left: 0px; -} - -#signup { - padding-top: 200px; - padding-right: 680px; - padding-left: 680px; - padding-bottom: 20px; - z-index: 3; - position: relative; -} -#signup .card { - background-color: #fff; - border-radius: 25px; - box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0); - z-index: 3; - position: relative; -} -#signup .card .card-title { - padding: 2rem 1.2rem 0; - margin-bottom: 0; - text-align: center; - z-index: 3; - position: relative; -} -#signup .card .card-title h2 { - position: relative; - font-size: 1.2rem; - letter-spacing: 0.5px; - font-weight: bold; - text-transform: uppercase; - margin-bottom: 20px; -} -#signup .card .card-title h2:after { - position: absolute; - content: ""; - bottom: -10px; - left: 50%; - transform: translateX(-50%); - height: 2px; - width: 50px; - background: #21253d; -} -.img-holder { - display: block; - margin-left: auto; - margin-right: auto; - width: 50%; -} -img.logo { - display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: 20px; - height: 80px; -} -.form { - background: #fff; - border-radius: 25px; - padding: 20px 30px; - padding-left: 40px; - padding-right: 60px; - - margin-top: 10px; -} - -.c-input { - width: 100%; - - margin-bottom: 15px; - padding: 10px; - font-size: 14px; - border: 1px solid grey; - border-radius: 8px; -} - -.c-button { - width: 100%; - padding: 10px 10px; - - font-size: 15px; - color: #fff; - text-transform: uppercase; - border: 1px solid transparent; - border-radius: 8px; - background-color: #f26522; - cursor: pointer; -} - -a:link { - text-decoration: none; - color: #000; - padding-top: 25px; - padding-left: 25px; - text-align: center; -} - -a:visited { - text-decoration: none; - color: #000; - text-align: center; -} - -a:hover { - text-decoration: underline; - color: rgb(85, 85, 85); - text-align: center; -} - -a:active { - text-decoration: underline; - text-align: center; -} - -.plsgod { - padding-bottom: 20px; - padding-left: 90px; - padding-right: 85px; - padding-bottom: 40px; -} -.plsbutton { - padding-top: 20px; - padding-left: 40px; -} -.navbar__link { - padding-bottom: 40px; -} -a { - font-size: 10px; -} diff --git a/client/Login/Login.jsx b/client/Login/Login.jsx deleted file mode 100644 index ee5ae76..0000000 --- a/client/Login/Login.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { Component } from "react"; -import "./Login.css"; -import { Link } from "react-router-dom"; - -const Input = props => ( - -); - -const Button = props => ( - -); - -class Login extends Component { - constructor(props) { - super(props); - this.state = { - email: { value: "" }, - password: { value: "" } - }; - } - - handleInput = (param, e) => { - const { value } = e.target; - - console.log(param); - - if (param === "name") { - } - }; - - render() { - return ( -
-
-
- -
-
-
- {/*
*/} - {/*
*/} -
- {/*
*/} - - {/*
*/} -
-

LOGIN

-
-
-
- this.handleInput("email", e)} - /> - this.handleInput("password", e)} - /> -
-
-
-
- - Don't have an account? Register Now - -
-
-
-
- {/*
{" "} */} - {/* End of card */} - {/*
*/} - {/*
*/} - {/*
*/} -
-
- ); - } -} - -export default Login; From 043c2dc46dff5f38290c9673626d97a611a2d1fb Mon Sep 17 00:00:00 2001 From: Anna Pawl Date: Mon, 4 Nov 2019 10:21:14 -0800 Subject: [PATCH 3/4] Restyled checkout form --- client/CheckoutForm/CheckoutForm.css | 61 ++++++++++++++++++++++++ client/CheckoutForm/CheckoutForm.css.map | 9 ++++ client/CheckoutForm/CheckoutForm.jsx | 19 ++++---- client/CheckoutForm/CheckoutForm.scss | 57 ++++++++++++++-------- client/styles/styles.css | 5 ++ client/styles/styles.css.map | 9 ++++ 6 files changed, 129 insertions(+), 31 deletions(-) create mode 100644 client/CheckoutForm/CheckoutForm.css create mode 100644 client/CheckoutForm/CheckoutForm.css.map create mode 100644 client/styles/styles.css create mode 100644 client/styles/styles.css.map diff --git a/client/CheckoutForm/CheckoutForm.css b/client/CheckoutForm/CheckoutForm.css new file mode 100644 index 0000000..0f9c114 --- /dev/null +++ b/client/CheckoutForm/CheckoutForm.css @@ -0,0 +1,61 @@ +.checkout_form_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.checkout_square { + background-color: #e2e2e2; + width: 500px; + height: 610px; + border-radius: 5px; + margin: 10vh; +} + +.checkout_input_field { + border-radius: 5px; + width: 330px; + height: 42px; + margin: 10px; + font-size: 14px; + text-indent: 10px; + -webkit-box-shadow: 0 0 2px #666 inset; + box-shadow: 0 0 2px #666 inset; + border: none; +} + +.checkout_input_field:hover { + background-color: #abdbff; +} + +h1.checkout_title { + font-family: 'Open Sans', sans-serif; + font-size: 1.5em; + font-weight: 400; + text-transform: uppercase; + margin-top: 25px; +} + +.checkout_form_button { + background-color: #50AEF4; + border-radius: 5px; + text-transform: uppercase; + font-weight: 500; + font-size: 12px; + color: #242424; + height: 50px; + width: 100px; + margin: 15px; +} + +.checkout_form_button:hover { + background-color: #505050; + color: white; +} +/*# sourceMappingURL=CheckoutForm.css.map */ \ No newline at end of file diff --git a/client/CheckoutForm/CheckoutForm.css.map b/client/CheckoutForm/CheckoutForm.css.map new file mode 100644 index 0000000..a2c6fa8 --- /dev/null +++ b/client/CheckoutForm/CheckoutForm.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,wBAAwB,CAAC;EACvB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;CACpB;;AAED,AAAA,gBAAgB,CAAC;EACf,gBAAgB,EAAC,OAAkB;EACnC,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,GAAG;EAClB,MAAM,EAAC,IAAI;CACZ;;AAED,AAAA,qBAAqB,CAAC;EACpB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,IAAI;EACX,MAAM,EAAC,IAAI;EACX,SAAS,EAAC,IAAI;EACd,WAAW,EAAE,IAAI;EACjB,UAAU,EAAC,kBAAkB;EAC7B,MAAM,EAAC,IAAI;CACZ;;AAED,AAAA,qBAAqB,AAAA,MAAM,CAAC;EAC1B,gBAAgB,EAAC,OAAO;CACzB;;AAED,AAAA,EAAE,AAAA,eAAe,CAAC;EAChB,WAAW,EAAE,uBAAuB;EACpC,SAAS,EAAE,KAAK;EAChB,WAAW,EAAC,GAAG;EACf,cAAc,EAAE,SAAS;EACzB,UAAU,EAAC,IAAI;CAChB;;AAED,AAAA,qBAAqB,CAAC;EACpB,gBAAgB,EAAC,OAAO;EACxB,aAAa,EAAE,GAAG;EAClB,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAChB,SAAS,EAAC,IAAI;EACd,KAAK,EAAC,OAAe;EACrB,MAAM,EAAC,IAAI;EACX,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,IAAI;CACZ;;AAED,AAAA,qBAAqB,AAAA,MAAM,CAAC;EAC1B,gBAAgB,EAAE,OAAe;EACjC,KAAK,EAAC,KAAK;CACZ", + "sources": [ + "CheckoutForm.scss" + ], + "names": [], + "file": "CheckoutForm.css" +} \ No newline at end of file diff --git a/client/CheckoutForm/CheckoutForm.jsx b/client/CheckoutForm/CheckoutForm.jsx index f236dd1..ca2af10 100644 --- a/client/CheckoutForm/CheckoutForm.jsx +++ b/client/CheckoutForm/CheckoutForm.jsx @@ -1,6 +1,5 @@ import React, { Component } from 'react' import './CheckoutForm.scss' -import Navbar from '../Navbar/Navbar' class CheckoutForm extends Component { constructor(props) { @@ -22,19 +21,19 @@ class CheckoutForm extends Component {
-

Checkout Form

+

Checkout Form

{/* Name Field */} {/* Company ID Field */} {/* Phone Number Field */} {/* Duration of Checkout Field */} {/* Date Field */} {/* TODO - make dropdown calendar */} {/* Reason for Checkout Field */}
- +
diff --git a/client/CheckoutForm/CheckoutForm.scss b/client/CheckoutForm/CheckoutForm.scss index f668a1c..459a54b 100644 --- a/client/CheckoutForm/CheckoutForm.scss +++ b/client/CheckoutForm/CheckoutForm.scss @@ -1,38 +1,53 @@ -.checkout_square { - background-color:rgb(229,229,229); - width: 500px; - height: 60vw; - border-radius: 5px; - margin:15vh; -} - .checkout_form_container { - display: flex; justify-content: center; align-items: center; - } -.checkout_form { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - +.checkout_square { + background-color:rgb(226, 226, 226); + width: 500px; + height: 610px; + border-radius: 5px; + margin:10vh; } -.input_field { +.checkout_input_field { border-radius: 5px; - width:300px; - height:30px; + width:330px; + height:42px; margin:10px; + font-size:14px; + text-indent: 10px; + box-shadow:0 0 2px #666 inset; + border:none; } -h1 { +.checkout_input_field:hover { + background-color:#abdbff; +} + +h1.checkout_title { font-family: 'Open Sans', sans-serif; font-size: 1.5em; font-weight:400; text-transform: uppercase; - margin-top:15px; + margin-top:25px; +} + +.checkout_form_button { + background-color:#50AEF4; + border-radius: 5px; + text-transform: uppercase; + font-weight: 500; + font-size:12px; + color:rgb(36, 36, 36); + height:50px; + width:100px; + margin:15px; +} + +.checkout_form_button:hover { + background-color: rgb(80, 80, 80); + color:white; } \ No newline at end of file diff --git a/client/styles/styles.css b/client/styles/styles.css new file mode 100644 index 0000000..cd594ad --- /dev/null +++ b/client/styles/styles.css @@ -0,0 +1,5 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, Arial, sans-serif; + color: brown; +} +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/client/styles/styles.css.map b/client/styles/styles.css.map new file mode 100644 index 0000000..db142a1 --- /dev/null +++ b/client/styles/styles.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,mFACM;EACnB,KAAK,EAAE,KAAK;CACb", + "sources": [ + "styles.scss" + ], + "names": [], + "file": "styles.css" +} \ No newline at end of file From fcd4e7c3525de2517d22c91263af8861c1b67220 Mon Sep 17 00:00:00 2001 From: Anna Pawl Date: Wed, 6 Nov 2019 23:54:22 -0800 Subject: [PATCH 4/4] linting checkout form --- client/App/App.jsx | 10 +--- client/App/App.test.jsx | 9 ---- client/CheckoutForm/CheckoutForm.jsx | 71 +++++++++++++++++++++------- client/index.jsx | 2 +- 4 files changed, 57 insertions(+), 35 deletions(-) delete mode 100644 client/App/App.test.jsx diff --git a/client/App/App.jsx b/client/App/App.jsx index 105e04e..5b52ef0 100644 --- a/client/App/App.jsx +++ b/client/App/App.jsx @@ -1,17 +1,9 @@ import React from "react"; -import logo from "../static/logo.svg"; import "./App.css"; -import Login from "../Login/Login.jsx"; -import { BrowserRouter, Route } from "react-router-dom"; function App() { return ( -
- - - - -
+
); } diff --git a/client/App/App.test.jsx b/client/App/App.test.jsx deleted file mode 100644 index 23c181f..0000000 --- a/client/App/App.test.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; - -it("renders without crashing", () => { - const div = document.createElement("div"); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/client/CheckoutForm/CheckoutForm.jsx b/client/CheckoutForm/CheckoutForm.jsx index ca2af10..7e6be32 100644 --- a/client/CheckoutForm/CheckoutForm.jsx +++ b/client/CheckoutForm/CheckoutForm.jsx @@ -12,8 +12,31 @@ class CheckoutForm extends Component { checkoutDuration: '', date: '', reasonForCheckout: '', - } + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + // handleChange(event) { + // this.setState({value: event.target.value}); + // } + + handleChange = (e) => { + const newState = {} + newState[e.target.name] = e.target.value, + newState[e.target.id] = e.target.value, + newState[e.target.email] = e.target.value, + newState[e.target.phoneNumber] = e.target.value, + newState[e.target.checkoutDuration] = e.target.value, + newState[e.target.date] = e.target.value, + newState[e.target.reasonForCheckout] = e.target.value, + + this.setState(newState) + } + + handleSubmit = (e) => { + e.preventDefault() + } render() { @@ -22,20 +45,23 @@ class CheckoutForm extends Component {

Checkout Form

-
+ this.setState(state)}> {/* Name Field */} + value={this.name} + onChange={this.handleChange} + placeholder='Name' + /> {/* Company ID Field */} @@ -43,36 +69,48 @@ class CheckoutForm extends Component { + value={this.email} + onChange={this.handleChange} + placeholder='Email Address' + /> {/* Phone Number Field */} + value={this.phoneNumber} + onChange={this.handleChange} + placeholder='Phone Number' + /> {/* Duration of Checkout Field */} + value={this.checkoutDuration} + onChange={this.handleChange} + placeholder='Duration of Checkout' + /> - {/* Date Field */} {/* TODO - make dropdown calendar */} + {/* Date Field */} + {' '} + {/* TODO - make dropdown calendar */} + value={this.date} + onChange={this.handleChange} + placeholder='Date' + /> {/* Reason for Checkout Field */} + value={this.reasonForCheckout} + onChange={this.handleChange} + placeholder='Reason for Checkout' + />
@@ -85,4 +123,5 @@ class CheckoutForm extends Component { } + export default CheckoutForm \ No newline at end of file diff --git a/client/index.jsx b/client/index.jsx index 120caaa..31615bc 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; -import App from "./App/App.jsx"; +import App from './App/App' import * as serviceWorker from "./serviceWorker"; ReactDOM.render(, document.getElementById("root"));