feat(view-sign-up-static-page): create static signup page

- create small screen view
- create big screen view
- add styles
- write snapshot test for the component

[Finishes #162380294]

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "start": "npm run clean && npm run build && node index",
+    "start:dev": "webpack-dev-server --mode development --open",
     "build": "webpack --mode production",
     "clean": "rm -rf dist",
     "dev": "webpack-dev-server --mode development --open",
@@ -68,6 +69,7 @@
     "express": "^4.16.4",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "mini-css-extract-plugin": "^0.4.5",
     "node-sass": "^4.10.0",
@@ -78,9 +80,9 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-redux": "^5.1.1",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.7",
     "redux-logger": "^3.0.6",

public/assets/styles/index.scss

@@ -0,0 +1,210 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans|Zilla+Slab);
+
+$bluecolor: #b7daf72d;
+$color-bg: #f4f1f4;
+$color-bg-light-blue:#007FFF;
+$color-black: #000000;
+$color-blue: #1a1aff;
+$color-facebook: #3b5998;
+$color-twitter: #1da1f2;
+$nav-item-black: #3a3a3a;
+$nav-red: #ff0000;
+
+//color variables
+$color-bg: #f4f1f4;
+$color-bg-light-blue:#007FFF;
+$color-black: #000000;
+$color-facebook: #3b5998;
+$color-google: rgba(255, 0, 0, 0.952);
+$color-input-bg: #f1f1f1;
+$color-twitter: #1da1f2;
+$color-white: #ffffff;
+
+// font variable
+$font-general: 'Open Sans', serif;
+$font-welcome: 'Zilla Slab', serif;
+
+//height variable
+$height-section: 650px;
+
+body {
+  background: $bluecolor;
+  font-family: $font-general;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+
+  nav .nav-item {
+    color: $nav-item-black;
+    margin: 0 0.5em;
+    text-decoration: none;
+  }
+
+  nav .nav-item:hover {
+    color: $nav-red;
+  }
+}
+
+h1 {
+  text-align: center;
+}
+
+.section {
+  background-color: $color-bg;
+  border-radius: 10px;
+  color: $color-bg-light-blue;
+  height: $height-section;
+  margin-top: 100px;
+  text-align: center;
+
+  h1#Welcome {
+    font-family: $font-welcome;
+    font-size: 35px;
+    font-weight: 900;
+  }
+
+  .blue-section{
+    border-radius: 10px 0 0 10px;
+    color: $color-white;
+    background-color: $color-bg-light-blue;
+    height: $height-section;
+  }
+  @mixin btn-rounded-basic(){
+    border-radius: 30px;
+    text-align: center;
+    width:150px;
+  }
+
+  .btn-rounded{
+    border: 2px solid $color-white;
+    color: $color-white;
+    @include btn-rounded-basic();
+  }
+
+  .btn-rounded-blue{
+    border: 2px solid $color-bg-light-blue;
+    color: $color-bg-light-blue;
+    @include btn-rounded-basic();
+  }
+
+  input[type=text], input[type=password] {
+    background: $color-input-bg;
+    border: none;
+    color: $color-black;
+    display: inline-block;
+    padding: 15px;
+    width: 100%;
+  }
+
+  input[type=text]:focus{
+    background-color: $color-bg;
+    border: 0;
+    outline: none;
+  }
+
+  .icon {
+    background:$color-bg;
+    color: $color-black;
+    min-width: 50px;
+    padding: 10px;
+    text-align: center;
+  }
+
+  .input-container {
+    border-bottom: 1px solid gray;
+    display: -ms-flexbox; 
+    display: flex;
+    margin-bottom: 15px;
+    width: 100%;
+  }
+  .form-signup {
+    margin:auto;
+    max-width: 50%;
+  }
+  .form-signup > h4 {
+    margin-bottom: 50px;
+  }
+  @mixin btn-social-basic {
+    border-radius: 5px;
+    color: $color-white;
+    margin:3px;
+    padding: 10px;
+    width: 200px;
+  }
+  .btn-google {
+    background-color: $color-google;
+    @include btn-social-basic();
+  }
+  .btn-facebook {
+    background-color: $color-facebook;
+    @include btn-social-basic();
+  }
+  .btn-twitter {
+    background-color: $color-twitter;
+    @include btn-social-basic();
+  }
+  .pale-section {
+    padding-top: 60px;
+  }
+  .social-button-group {
+    margin-bottom: 120px;
+    margin-top:30px;
+  }
+  .blue-section .body{
+    margin-top: 150px;
+  }
+  .blue-section .header{
+    margin-top: 130px;
+  } 
+}
+
+@media screen and (max-width: 767px) {
+  /* phones */
+  .section {
+    background-color: #f4f1f4;
+    color: #007FFF;
+    height: auto;
+    margin-top: 0;
+    text-align: center;
+  }
+
+  .section .blue-section {
+    background-color: #007FFF;
+    border-radius: 0;
+    color: #ffffff;
+    height: 21em;
+  }
+
+  .section .blue-section .header {
+    margin-top: 1.5em;
+  }
+
+  .pale-section h3{
+    font-size: 1em;
+  }
+
+  .section .social-button-group {
+    margin-bottom: 0.8em;
+    margin-top: 0.8em;
+  }
+  .section .form-signup > h4 {
+    font-size: 1em;
+    margin-bottom: 0;
+    margin-top: 1em;
+  } 
+  .section .form-signup {
+    margin: auto;
+    max-width: 80%;
+  }
+  .section .blue-section .body {
+    margin-top: 50px;
+  }
+  .section .pale-section {
+    padding-top: 20px;
+  }
+}
+
+

src/components/signup/Form.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Button from './Button';
+
+
+const Form = () => (
+  <div>
+    <form className="form-signup">
+      <h4>Signup with your email</h4>
+      <div className="form-group input-container">
+        <i className="fa fa-user prefix icon" />
+        <input type="text" className="form-control" id="formGroupExampleInput" placeholder="FULLNAME" />
+      </div>
+      <div className="form-group input-container">
+        <i className="fas fa-envelope icon" />
+        <input type="text" className="form-control" id="formGroupExampleInput" placeholder="EMAIL" />
+      </div>
+      <Button text="Signup" btnClass="btn-rounded-blue" />
+    </form>
+  </div>
+);
+
+export default Form;

src/components/signup/Section.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Button from './Button';
+import SocialButton from './SocialButton';
+import Form from './Form';
+
+const Section = () => (
+  <div className="container section">
+    <div className="row justify-content-md-center">
+      <div className="col-sm-12 col-md-4 blue-section">
+        <div className="header">
+          <h1 id="Welcome">Welcome to Author's Haven!</h1>
+          <p>Enter your personal details to start sharing your exciting ideas.</p>
+        </div>
+
+        <div className="body">
+          <p>Already have an account?</p>
+          <Button text="Login" btnClass="btn-rounded" />
+        </div>
+      </div>
+      <div className="col-sm-12 col-md-8 pale-section">
+        <h3>Create account with your social media</h3>
+        <div className="social-button-group">
+          <SocialButton text="Login with google" btnClass="btn-google" faClass="fab fa-google" />
+          <SocialButton text="Login with facebook" btnClass="btn-facebook" faClass="fab fa-facebook" />
+          <SocialButton text="Login with twitter" btnClass="btn-twitter" faClass="fab fa-twitter" />
+        </div>
+        <Form />
+      </div>
+    </div>
+  </div>
+);
+
+export default Section;

src/components/signup/SignUpPage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Header from '../common/Header';
+import Section from './Section';
+
+
+const SignUp = () => (
+  <div>
+    <Header />
+    <Section />
+  </div>
+);
+
+export default SignUp;

src/components/signup/SocialButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Button = ({
+  btnClass, text, faClass
+}) => (
+  <button type="button" className={btnClass}>
+    <i className={faClass} />
+    {' '}
+    {text}
+  </button>
+);
+Button.propTypes = {
+  text: PropTypes.string.isRequired,
+  btnClass: PropTypes.string.isRequired,
+  faClass: PropTypes.string.isRequired,
+};
+export default Button;

src/components/signup/button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Button = ({
+  btnClass, text
+}) => (
+  <button type="button" className={`btn btn-outline-primary ${btnClass}`}>{text}</button>
+);
+Button.propTypes = {
+  text: PropTypes.string.isRequired,
+  btnClass: PropTypes.string.isRequired,
+};
+export default Button;

src/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <title>Author's Haven</title>
 </head>
 <body>

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './styles/index.scss';
 import App from './App';
+import '../public/assets/styles/index.scss';
 
 render(<App />, document.getElementById('app'));

src/routes.js

@@ -1,5 +1,6 @@
 import Home from './components/home/HomePage';
 import Login from './components/login/LoginPage';
+import SignUp from './components/signup/SignUpPage';
 
 const routes = [
   {
@@ -11,7 +12,12 @@ const routes = [
     path: '/login',
     component: Login,
     exact: true
-  }
+  },
+  {
+    path: '/signup',
+    component: SignUp,
+    exact: false
+  },
 ];
 
 export default routes;