finish pricing styled

src/components/LogInContainer.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-d
 import Register from './Register';
 import Login from './Login';
 import Footer from './Footer';
+import styled, {css} from 'styled-components';
 
 import '../login_reg.css';
 const BaseApp = styled.div`
@@ -28,7 +29,7 @@ const AppForm = styled.div`
   overflow: auto;
 
 `;
-const PageSwitcher = styled.div`
+const PageSwitcherContainer = styled.div`
 
   display: flex;
   justify-content: flex-end;
@@ -86,44 +87,81 @@ const PageSwitcher = styled(NavLink)`
   border: none;
   outline: none;
   display: inline-block;
-  text-decoration: none;
+  text-decoration: none !important;
-
-  ${props = props.active ? css`
 
+  &.active{
   background-color: #66bfbf;
   color: white;
-  `: css``}
+  }
 
+  &:first-child {
+  border-top-left-radius: 25px;
+  border-bottom-left-radius: 25px;
+
+  }
+  &:last-child {
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+
+  }
+`;
+
+const FormLink = styled(NavLink)`
+
+  color: #707C8B;
+  text-decoration: none !important;
+  display: inline-block;
+  font-size: 1.7em;
+  margin: 0 10px;
+  padding-bottom: 5px;
+  border: none;
+
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child{
+    color: #707c8b;
+  }
+  &.active{
+    border-bottom: 1px solid #199087;
+  }
 
 
 
 `;
 
+const FormTitle = styled.div`
+  color: #000000;
+  font-weight: 300;
+  margin-bottom: 50px;
+
+
+`;
 const LogInContainer = (props) => {
     return (
         <BrowserRouter basename="user">
-        <div className="Apper">
+        <BaseApp>
-          <div className="Apper__Aside">
+          <AppSide>
-            <div className="Apper_logo">
+            <PlaneContainer>
             <img src="/logo.jpg" alt="plane logo"></img>
-            </div>
+            </PlaneContainer>
-            <div className="Apper__Aside__text">
+            <TextContainer>
-              <h1 className="Apper_heading">locaft</h1>
+              <BannerHeading>locaft</BannerHeading>
-              <p className="Apper_quote">Sit back, let us move you</p>
+              <BannerText>Sit back, let us move you</BannerText>
 
-            </div>
+            </TextContainer>
-             <div className="Apper_Aside_image">
+             <SkyContainer>
                 <img src="/skyscraper.png" alt="skyscraper"></img>
-              </div>
+              </SkyContainer>
-          </div>
+          </AppSide>
-          <div className="Apper__Form">
+          <AppForm>
-              <div className="PageSwitcher">
+              <PageSwitcherContainer>
-                <NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
+                <PageSwitcher to="/login" >Sign In</PageSwitcher>
-                <NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
+                <PageSwitcher to="/register" >Sign Up</PageSwitcher>
-              </div>
+              </PageSwitcherContainer>
-              <div className="FormTitle">
+              <FormTitle>
-                  <NavLink to="/login" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/register" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
+                  <FormLink to="/login" >Sign In</FormLink> or <FormLink  to="/register">Sign Up</FormLink>
-              </div>
+              </FormTitle>
           <Switch>
             <Route path="/register" component={Register} />
             <Route path="/login" component={Login} />
@@ -132,9 +170,9 @@ const LogInContainer = (props) => {
 
           </p>
 
-          </div>
+          </AppForm>
 
-        </div>
+        </BaseApp>
           <Footer background="blue"/>
         </BrowserRouter>
     );

src/components/Login.js

@@ -4,6 +4,7 @@ import Axios from "axios";
 import ErrorNotice from "./ErrorNotice";
 import { Link, useHistory, withRouter } from "react-router-dom";
 
+import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink  } from './miscellaneous/Styles'
 const Login = () => {
     
   const [email, setEmail] = useState();
@@ -34,27 +35,34 @@ const Login = () => {
   }; 
         return (
           
-        <div className="FormCenter">
+        <FormCenter>
           {error && (
         <ErrorNotice message={error} clearError={() => setError(undefined)} />
       )}
             <form  className="FormFields" onSubmit={submit}>
-            <div className="FormField">
+            <FormField>
-                <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
+                <FormLabel htmlFor="email">E-Mail Address</FormLabel>
-                <input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
+                <FormInput type="email" id="email"  value={ email } placeholder="enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
-              </div>
+              </FormField>
 
-              <div className="FormField">
+              <FormField>
-                <label className="FormField__Label" htmlFor="password">Password</label>
+                <FormLabel htmlFor="password">Password</FormLabel>
-                <input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
+                <FormInput type="password" id="password" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
-              </div>
+              </FormField>
 
-              <div className="FormField">
+              <FormField>
-                  <button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
+  
-              </div>
+              <Button
+                  type="submit"
+                  radiuscolor="#009578"
+                  textcolor="#009578"
+                  hovercolor="#009578"
+                  hovertextcolor="white"
+                  >Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
+              </FormField>
             </form>
             
-          </div>
+          </FormCenter>
         );
     }
 

src/components/NavBar.js

@@ -15,7 +15,7 @@ const Header = styled.header`
   justify-content: space-between;
   align-items: center;
   transition: 0.6s;
-  padding: 10px 15px;
+  padding: 5px 15px;
   z-index: 100000;
   font-family: Ubuntu;
 
@@ -126,7 +126,7 @@ export default function NavBar() {
         <List>
           <ListElement><Anchor href="/">Home</Anchor></ListElement>
           <ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
-          <ListElement><Anchor href="/#services">Services</Anchor></ListElement>
+          <ListElement><Anchor href="/pricing">Pricing</Anchor></ListElement>
           <ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
           {userData.user ? (
             <React.Fragment>

src/components/PricingPlan.js

@@ -3,9 +3,9 @@ import NavBar from './NavBar';
 import Footer from './Footer';
 import styled,{css} from 'styled-components';
 import UserContext from "../context/UserContext";
-import Payment from "./Payment";
 import { useHistory } from "react-router-dom";
 import Axios from 'axios';
+import { Button } from './miscellaneous/Styles';
 
 const size = {
   mobileS: '320px',
@@ -165,37 +165,13 @@ const Actions = styled.div`
     display: flex;
     flex-direction: column;
 
-`;
-const Button = styled.a`
-
-    display: inline-block;
-    margin: 15px auto;
-    padding: 8px 20px;
-    color: #009578;
-    background: #ffffff;
-    border-radius: 5px;
-    border: 1px solid #009578;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-    font-weight: bold;
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-
-    background: #009578;
-    color: white !important;
-
-    }
-
-
 `;
 
 const Heading = styled.h1`
-    color: #66bfbf;
+    color: #309975;
     margin-left: 20px;
     margin-top: 100px;
-
+    font-weight: bold;
 
 `;
 
@@ -210,6 +186,7 @@ const submit = async (props) => {
     props.preventDefault();
     try {
         const id = userData.user.id;
+        console.log("Id " + id)
         const pricingRes = await Axios.put(
             "https://server-locaft.herokuapp.com/users/update", {
             id,
@@ -312,7 +289,13 @@ const submit = async (props) => {
 
                 </PricingPlanContainer>
                 <PricingPlanContainer>
-                            <Button onClick={() =>  setPurchased(true) }>Purchase</Button>
+                            <Button
+                                radiuscolor="#009578"
+                                textcolor="#009578"
+                                hovercolor="#009578"
+                                hovertextcolor="white"
+                                onClick={() => setPurchased(true)}
+                            >Purchase</Button>
                 </PricingPlanContainer>
                 </React.Fragment>
              ): (