update auth style

@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { Helmet } from "react-helmet";
-import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 import Input from "../../Components/Input";
 import Button from "../../Components/Button";
 import Button from "../../Components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -12,6 +11,7 @@ import {
   faGithub,
   faGithub,
   faGoogle,
   faGoogle,
 } from "@fortawesome/free-brands-svg-icons";
 } from "@fortawesome/free-brands-svg-icons";
+import loginBackground from "../../Imgs/login-background4.jpg";
 
 
 const Wrapper = styled.div`
 const Wrapper = styled.div`
   width: 100%;
   width: 100%;
@@ -20,6 +20,19 @@ const Wrapper = styled.div`
   flex-direction: column;
   flex-direction: column;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
+  background-image: url(${loginBackground});
+  background-size: cover;
+`;
+
+const SubWrapper = styled.div`
+  background-color: rgba(57, 65, 74, 0.5);
+  border-radius: 7px;
+  padding: 5%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
 `;
 `;
 
 
 const Box = styled.div`
 const Box = styled.div`
@@ -40,8 +53,9 @@ const StateChanger = styled(Box)`
 `;
 `;
 
 
 const ToggleSpan = styled.span`
 const ToggleSpan = styled.span`
+  margin-left: 5px;
   cursor: pointer;
   cursor: pointer;
-  color: #0652dd;
+  color: #079992;
 `;
 `;
 
 
 const Form = styled(Box)`
 const Form = styled(Box)`
@@ -75,6 +89,10 @@ const SocialLogin = styled(Box)`
   opacity: 0.8;
   opacity: 0.8;
 `;
 `;
 
 
+const StyledLink = styled(Link)`
+  color: white;
+`;
+
 export default ({
 export default ({
   action,
   action,
   setAction,
   setAction,
@@ -86,10 +104,12 @@ export default ({
   onSubmit,
   onSubmit,
 }) => (
 }) => (
   <>
   <>
-    <Header />
     <Wrapper>
     <Wrapper>
+      <SubWrapper>
         <TitleContainer>
         <TitleContainer>
+          <StyledLink to="/">
             <Title>Linker</Title>
             <Title>Linker</Title>
+          </StyledLink>
         </TitleContainer>
         </TitleContainer>
         <Form>
         <Form>
           {action === "logIn" ? (
           {action === "logIn" ? (
@@ -111,13 +131,8 @@ export default ({
               <form onSubmit={onSubmit}>
               <form onSubmit={onSubmit}>
                 <Input placeholder={"Email"} type="email" {...email} />
                 <Input placeholder={"Email"} type="email" {...email} />
                 <Input placeholder={"UserName"} {...username} />
                 <Input placeholder={"UserName"} {...username} />
-              <Input placeholder={"PhoneNumber"} {...phoneNum} />
                 <Input placeholder={"Password"} type="password" {...password} />
                 <Input placeholder={"Password"} type="password" {...password} />
-              <Input
-                placeholder={"Password for validation"}
-                type="password"
-                {...password2}
-              />
+                <Input placeholder={"PhoneNumber"} {...phoneNum} />
                 <Button text={"Sign Up"} />
                 <Button text={"Sign Up"} />
               </form>
               </form>
             </>
             </>
@@ -135,24 +150,28 @@ export default ({
           ) : (
           ) : (
             <>
             <>
               Did you have an account ?
               Did you have an account ?
-            <ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
+              <ToggleSpan onClick={() => setAction("logIn")}>
+                {" "}
+                Log in{" "}
+              </ToggleSpan>
             </>
             </>
           )}
           )}
         </StateChanger>
         </StateChanger>
         <SocialLogin>
         <SocialLogin>
-        <Link to="/facebook">
+          <StyledLink to="/facebook">
             <FontAwesomeIcon icon={faFacebook} />
             <FontAwesomeIcon icon={faFacebook} />
-        </Link>
-        <Link to="/google">
+          </StyledLink>
+          <StyledLink to="/google">
             <FontAwesomeIcon icon={faGoogle} />
             <FontAwesomeIcon icon={faGoogle} />
-        </Link>
-        <Link to="/twitter">
+          </StyledLink>
+          <StyledLink to="/twitter">
             <FontAwesomeIcon icon={faTwitter} />
             <FontAwesomeIcon icon={faTwitter} />
-        </Link>
-        <Link to="/github">
+          </StyledLink>
+          <StyledLink to="/github">
             <FontAwesomeIcon icon={faGithub} />
             <FontAwesomeIcon icon={faGithub} />
-        </Link>
+          </StyledLink>
         </SocialLogin>
         </SocialLogin>
+      </SubWrapper>
     </Wrapper>
     </Wrapper>
   </>
   </>
 );
 );