finish log in styled

src/components/HomePage.js

@@ -94,7 +94,6 @@ export default function HomePage() {
   return (
 
     <div className="HomePage">
-      <NavBar />
 
       <ColoredSection >
 
@@ -229,6 +228,7 @@ export default function HomePage() {
       
       </ColoredSection>
       <Sidebar />
+      <NavBar />
 
       <div id="footer">
         <Footer />

src/components/Register.js

@@ -4,7 +4,31 @@ import UserContext from "../context/UserContext";
 import Axios from "axios";
 import { Link } from "react-router-dom";
 import ErrorNotice from "./ErrorNotice";
+import styled from 'styled-components';
+import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink  } from './miscellaneous/Styles'
 
+const CheckBoxLabel = styled.label`
+
+  color: #646F7D;
+  font-size: .9em;
+
+`;
+const CheckBox = styled.input`
+
+  position: relative;
+  top: 1.5px;
+`;
+const TermsLink = styled.a`
+
+  color: #646F7D;
+  border-bottom: 1px solid #199087;
+  text-decoration: none;
+  display: inline-block;
+  padding-bottom: 2px;
+  margin-left: 5px;
+
+
+`;
  const Register = () => {
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
@@ -38,34 +62,33 @@ import ErrorNotice from "./ErrorNotice";
 
 
   return (
-    <div className="FormCenter">
+    <FormCenter>
       {error && (
         <ErrorNotice message={error} clearError={() => setError(undefined)} />
       )}
       <form className="FormFields" onSubmit={submit}>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="name">UserName</label>
-          <input 
+        <FormField>
+          <FormLabel htmlFor="name">UserName</FormLabel>
+          <FormInput 
           type="text" 
           id="name" 
-          className="FormField__Input" 
           placeholder="Enter your full name" 
           onChange= { (e) => setUsername(e.target.value)}
           />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="password">Password</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="password">Password</FormLabel>
+          <FormInput 
           type="password" 
           id="password" 
           className="FormField__Input" 
           placeholder="Enter your password"
           onChange= { (e) => setPassword(e.target.value)}
           />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="email">E-Mail Address</FormLabel> 
+          <FormInput
           type="email" 
           id="email" 
           className="FormField__Input" 
@@ -73,29 +96,37 @@ import ErrorNotice from "./ErrorNotice";
           onChange= { (e) => setEmail(e.target.value)}
           
           />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="phone">Phone number</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="phone">Phone number</FormLabel>
+          <FormInput
           type="number" 
           id="phonenumber" 
           className="FormField__Input" 
           placeholder="Enter your Phone no. (+91)"
           onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))}
             />
-        </div>
+        </FormField>
 
-        <div className="FormField">
-          <label className="FormField__CheckboxLabel">
-            <input className="FormField__Checkbox" type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
-          </label>
-        </div>
+        <FormField>
+          <CheckBoxLabel>
+            <CheckBox type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
+          </CheckBoxLabel>
+        </FormField>
 
-        <div className="FormField">
-          <button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link>
-        </div>
+        <FormField>
+          <Button
+            type="submit"
+             radiuscolor="#009578"
+             textcolor="#009578"
+             hovercolor="#009578"
+             hovertextcolor="white"
+          
+          >Sign Up</Button>
+          <FormLink to="/login">already a member?</FormLink>
+        </FormField>
       </form>
-    </div>
+    </FormCenter>
   );
 }
 

src/components/miscellaneous/Styles.js

@@ -1,7 +1,50 @@
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+const FormCenter = styled.div`
+  margin-bottom: 100px;
 
+`;
+const FormField = styled.div`
 
-const Button = styled.a`
+margin-bottom: 40px;
+`;
+const FormLabel = styled.div`
+  display: block;
+  text-transform: uppercase;
+  font-size: 1.25em;
+  color: #4C5D72;
+  text-align: start;
+
+`;
+const FormInput = styled.input`
+
+  width: 85%;
+  background-color: transparent;
+  border: none;
+  color: #4C5D72;
+  outline: none;
+  border-bottom: 1px solid #445366;
+  font-size: .9em;
+  font-weight: 300;
+  padding-bottom: 10px;
+  margin-top: 10px;
+
+  &:placeholder {
+    color: #616E7F;
+  }
+`;
+
+const FormLink = styled(Link)`
+
+  color: #66707D;
+  text-decoration: none;
+  display: inline-block;
+  padding-bottom: 5px;
+  margin-left: 12px;
+
+`;
+
+const Button = styled.button`
 
     display: inline-block;
     margin: 15px auto;
@@ -26,4 +69,4 @@ const Button = styled.a`
 
 
 `;
-export { Button };
+export { Button, FormCenter, FormField, FormLabel, FormInput, FormLink };

src/login_reg.css

@@ -1,8 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
 .Apper {
-  display: flex;
-  color: white;
-  height:100vh;
 }
 
 .Apper__Aside {
@@ -36,69 +33,35 @@
 }
 
 .PageSwitcher__Item:first-child {
-  border-top-left-radius: 25px;
-  border-bottom-left-radius: 25px;
 }
 .PageSwitcher__Item:last-child {
-  border-top-right-radius: 25px;
-  border-bottom-right-radius: 25px;
 }
 
 .FormCenter {
-  margin-bottom: 100px;
 }
 
 .FormTitle {
-  color: #000000;
-  font-weight: 300;
-  margin-bottom: 50px;
 }
 
 .FormTitle__Link {
-  color: #707C8B;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 1.7em;
-  margin: 0 10px;
-  padding-bottom: 5px;
 }
 
 .FormTitle__Link:first-child {
-  margin-left: 0;
 }
 
 .FormTitle__Link--Active {
-  color: #707c8b;
-  border-bottom: 1px solid #199087;
 }
 
 .FormField {
-  margin-bottom: 40px;
 }
 
 .FormField__Label {
-  display: block;
-  text-transform: uppercase;
-  font-size: 1.25em;
-  color: #4C5D72;
-  text-align: start;
   
 }
 .FormField__Input {
-  width: 85%;
-  background-color: transparent;
-  border: none;
-  color: #4C5D72;
-  outline: none;
-  border-bottom: 1px solid #445366;
-  font-size: .9em;
-  font-weight: 300;
-  padding-bottom: 10px;
-  margin-top: 10px;
 }
 
 .FormField__Input::placeholder {
-  color: #616E7F;
 }
 
 .FormField__Button {
@@ -113,29 +76,14 @@
 }
 
 .FormField__Link {
-  color: #66707D;
-  text-decoration: none;
-  display: inline-block;
-  padding-bottom: 5px;
-  margin-left: 12px;
 }
 
 .FormField__CheckboxLabel {
-  color: #646F7D;
-  font-size: .9em;
 }
 
 .FormField__Checkbox {
-  position: relative;
-  top: 1.5px;
 }
 
 .FormField__TermsLink {
-  color: #646F7D;
-  border-bottom: 1px solid #199087;
-  text-decoration: none;
-  display: inline-block;
-  padding-bottom: 2px;
-  margin-left: 5px;
 }