create signup page UI only

package.json

@@ -11,6 +11,7 @@
  "react-bootstrap": "^1.3.0",
  "react-dom": "^16.13.1",
  "react-redux": "^7.2.1",
+ "react-router": "^5.2.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "3.4.3",
  "redux": "^4.0.5",

src/Routes.js

@@ -3,13 +3,17 @@ import { BrowserRouter, Route } from "react-router-dom";
 import { AuthProvider } from "./utils/Auth";
 import PrivateRoute from "./utils/PrivateRoute.js";
 import Login from "./containers/shared/Login/Login";
+import Signup from "./containers/buyer/signup/Signup"
 
 const Routes = () => {
  return (
  <AuthProvider>
  <BrowserRouter>
  <div className="bg-primary flex min-h-screen max-h-full">
  <Route exact path="/" component={Login} />
+ <Route exact path="/buyer/signup" component={Signup} />
+ <Route exact path="/seller/signup" component={Signup} />
+
  {/* <PrivateRoute exact path="" component={} /> */}
  </div>
  </BrowserRouter>

src/containers/buyer/signup/Signup.jsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import "./signup.css";
+import { Row, Col, Container, Button, Form, Tabs, Tab } from "react-bootstrap";
+import logo from "../../../assets/logo.svg";
+
+function Signup(props) {
+ const [user, setUser] = useState("buyer");
+
+ useEffect(() => {
+ setUser(props.location.params);
+ }, []);
+
+ return (
+ <Container fluid>
+ <Row className="frame">
+ <Col sm={5} className="side">
+ <Row className="hero-text">
+ Break borders, order farm produce from markets all over Africa, and pay in your currency
+ </Row>
+ <Row className="hero"></Row>
+ </Col>
+ <Col sm={5} className=" d-flex flex-column flex-start main-content">
+ <Row className="logo">
+ <img src={logo} style={{ width: "9em", height: "1.6em" }} />
+ </Row>
+ <Row className="header justify-content-start">
+ <p>Sign up on Farmex</p>
+ </Row>
+ <Row className="btn-row">
+ <Button className="btn justify-content-center align-items-center" size="md" active>
+ <span className="facebook">f</span>Sign up with facebook
+ </Button>
+ </Row>
+ <Row>
+ <Tabs
+ id="controlled-tab-example"
+ activeKey={user}
+ onSelect={(k) => setUser(k)}
+ variant="pills"
+ >
+ <Tab eventKey="seller" title="Seller"></Tab>
+ <Tab eventKey="buyer" title="Buyer"></Tab>
+ </Tabs>
+ </Row>
+ <Row>
+ <Form>
+ <Form.Row>
+ <Form.Group as={Col} className="input-container" controlId="formGridEmail">
+ <Form.Control className="input-field" type="text" placeholder="First Name" />
+ </Form.Group>
+ <Form.Group as={Col} controlId="formGridPassword">
+ <Form.Control className="input-field" type="text" placeholder="Last Name" />
+ </Form.Group>
+ </Form.Row>
+ <Form.Row>
+ <Form.Group as={Col} className="input-container" controlId="formGridEmail">
+ <Form.Control className="input-field" type="text" placeholder="Company Name" />
+ </Form.Group>
+ <Form.Group as={Col} className="input-container" controlId="formGridEmail">
+ <Form.Control className="input-field" type="email" placeholder="Email" />
+ </Form.Group>
+ </Form.Row>
+ <Form.Row>
+ <Form.Group as={Col} controlId="formGridPassword">
+ <Form.Control className="input-field" type="password" placeholder="Password" />
+ </Form.Group>
+ <Form.Group as={Col} className="input-container" controlId="formGridEmail">
+ <Form.Control className="input-field" type="number" placeholder="Phone Number" />
+ </Form.Group>
+ </Form.Row>
+ <Form.Group>
+ <Form.Check
+ id="customControlAutosizing"
+ className="check-field"
+ required
+ label="Creating an account means you're okay with our Terms of Service, privacy policy, and our default Notification Settings."
+ feedback="You must agree before submitting."
+ custom
+ />
+ </Form.Group>
+ <Row className="action-btn-row">
+ <Button className="login-btn" variant="primary" type="submit">
+ Create acount
+ </Button>
+ <span className="sign-in">
+ Already have an account ?{" "}
+ <Link to={{ pathname: "/", params: `${user}` }} className="signin-link">
+ {" "}
+ Login
+ </Link>
+ </span>
+ </Row>
+ </Form>
+ </Row>
+ </Col>
+ </Row>
+ </Container>
+ );
+}
+export default Signup;

src/containers/buyer/signup/signup.css

@@ -0,0 +1,183 @@
+.container-fluid {
+ background-color: white;
+ }
+
+ .side {
+ background-color: #CEEBB3;
+ height: 100vh;
+ }
+
+ .hero {
+ height: 30vh;
+ width: 80%;
+ margin-top: 45vh;
+ margin-left: auto;
+ margin-right: auto;
+ background-image: url("../../../assets/signup-img.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+
+ .hero-text {
+ height:20vh;
+ font-size: 1.8em;
+ margin-left: auto;
+ margin-right: auto;
+ width: 85%;
+ color: rgba(94, 125, 49, 1);
+ padding-top: 64px;
+ font-family: semibold;
+ }
+
+ .header {
+ font-family: semibold;
+ color: rgba(94, 125, 49, 1);
+ font-size: 1.7em;
+ }
+
+ .btn {
+ color: rgba(59, 100, 183, 1);
+ color: white;
+ margin-bottom: 2em;
+ width: 15em;
+ height: 3rem;
+ font-family: semibold;
+ font-weight: 600;
+ font-size: 1em;
+ text-align: center;
+ }
+ .facebook {
+ font-weight: bolder;
+ margin-right: 10px;
+ font-size: 1.25em;
+ font-family: font-bold;
+ }
+
+
+ #formGridEmail, #formGridPassword{
+ width: 15em;
+ height: 3rem;
+ background: rgba(232, 232, 232, 0.21) 0% 0% no-repeat padding-box;
+ border: 2px solid rgba(112, 112, 112, 0.16);
+ border-radius: 10px;
+ }
+
+ #formGridPassword::placeholder, #formGridEmail::placeholder{
+ color:#9B9B9B;
+ opacity: 0.7;
+
+ }
+
+ .main-content {
+ margin-top: 64px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .logo {
+ margin-bottom: 7vh;
+ width: 9em;
+ }
+
+ .action-btn-row{
+ margin-top: 2em; 
+ margin-bottom: 2em;
+ font-size: 1em;
+ min-width: 100%;
+
+ }
+
+
+ .login-btn{
+ background-color: #FFB73B;
+ border: 1px solid #FFB73B;
+ color: white;
+ outline: none;
+ width: 165px;
+ height: 3rem;
+ border-radius: 15px;
+ margin-right: 2.5em;
+
+ }
+
+ .login-btn:hover{
+ background-color: #FFB73B;
+ border: 1px solid #FFB73B;
+ outline: none;
+ }
+
+ .check-field {
+ color: #9B9B9B;
+ font-size: 0.88em;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .custom-control-label::before, 
+.custom-control-label::after {
+ height: 1.5em;
+ width: 1.5em;
+ }
+
+ .nav-pills .nav-link.active {
+ width: 50%;
+ text-align: center;
+ background: #FFB73B;
+ border-radius: 28px;
+ }
+
+ .nav-pills .nav-link {
+ color: #ACACAC;
+ text-align: center;
+ outline: none;
+ font-size: 1em;
+ }
+
+ .nav-pills:hover, .nav-pills:focus {
+ outline: none;
+
+ }
+
+ .nav {
+ width: 25vw;
+ display: flex;
+ border-radius: 28px;
+ justify-content: space-between;
+ text-align: center;
+ margin-bottom: 2em;
+ background: #E8E8E836;
+
+
+ }
+ .nav-item {
+ font-family: regular;
+ color: #ACACAC;
+ font-size: 1.125em;
+ margin: auto;
+ width: 50%;
+
+ }
+
+ .sign-in{
+ color: #9B9B9B;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .signin-link {
+ color: #5E7D31;
+ margin-left: 8px;
+ }
+
+ input {
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px #E8E8E836 !important;
+
+ }
+
+ .row{
+ margin-left: 0px;
+ }

src/containers/shared/Login/Login.jsx

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
+import {Link} from 'react-router-dom'
 import './Login.css'
 import {Row, Col, Container, Button, Form, Tabs, Tab} from 'react-bootstrap'
 import logo from '../../../assets/logo.svg'
 
 function Login() {
- const [key, setKey] = useState('buyer');
+ const [user, setUser] = useState('buyer');
 
  return(
  <Container fluid >
@@ -28,8 +29,8 @@ function Login() {
  <Row>
  <Tabs
  id="controlled-tab-example"
- activeKey={key}
- onSelect={(k) => setKey(k)}
+ activeKey={user}
+ onSelect={(k) => setUser(k)}
  variant= "pills"
  >
  <Tab eventKey="seller" title="Seller" >
@@ -53,7 +54,9 @@ function Login() {
 </Form>
  </Row>
  <Row className="sign-up">
- Don't have an account yet? <a className="signup-link"> Sign Up</a>
+ Don't have an account yet? <span className="signup-link">
+ <Link to={{pathname: `/${user}/signup`,params: `${user}` }}>Sign Up</Link>
+ </span>
  </Row>
  </Col>