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,73 +104,74 @@ export default ({
   onSubmit,
   onSubmit,
 }) => (
 }) => (
   <>
   <>
-    <Header />
     <Wrapper>
     <Wrapper>
-      <TitleContainer>
-        <Title>Linker</Title>
-      </TitleContainer>
-      <Form>
-        {action === "logIn" ? (
-          <>
-            <Helmet>
-              <title>Log In</title>
-            </Helmet>
-            <form onSubmit={onSubmit}>
-              <Input placeholder={"Email"} type="email" {...email} />
-              <Input placeholder={"Password"} type="password" {...password} />
-              <Button text={"Log In"} />
-            </form>
-          </>
-        ) : (
-          <>
-            <Helmet>
-              <title>Sign Up</title>
-            </Helmet>
-            <form onSubmit={onSubmit}>
-              <Input placeholder={"Email"} type="email" {...email} />
-              <Input placeholder={"UserName"} {...username} />
-              <Input placeholder={"PhoneNumber"} {...phoneNum} />
-              <Input placeholder={"Password"} type="password" {...password} />
-              <Input
-                placeholder={"Password for validation"}
-                type="password"
-                {...password2}
-              />
-              <Button text={"Sign Up"} />
-            </form>
-          </>
-        )}
-      </Form>
-      <StateChanger>
-        {action === "logIn" ? (
-          <>
-            Don't you have an account ?
-            <ToggleSpan onClick={() => setAction("signUp")}>
-              {" "}
-              Sign Up{" "}
-            </ToggleSpan>
-          </>
-        ) : (
-          <>
-            Did you have an account ?
-            <ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
-          </>
-        )}
-      </StateChanger>
-      <SocialLogin>
-        <Link to="/facebook">
-          <FontAwesomeIcon icon={faFacebook} />
-        </Link>
-        <Link to="/google">
-          <FontAwesomeIcon icon={faGoogle} />
-        </Link>
-        <Link to="/twitter">
-          <FontAwesomeIcon icon={faTwitter} />
-        </Link>
-        <Link to="/github">
-          <FontAwesomeIcon icon={faGithub} />
-        </Link>
-      </SocialLogin>
+      <SubWrapper>
+        <TitleContainer>
+          <StyledLink to="/">
+            <Title>Linker</Title>
+          </StyledLink>
+        </TitleContainer>
+        <Form>
+          {action === "logIn" ? (
+            <>
+              <Helmet>
+                <title>Log In</title>
+              </Helmet>
+              <form onSubmit={onSubmit}>
+                <Input placeholder={"Email"} type="email" {...email} />
+                <Input placeholder={"Password"} type="password" {...password} />
+                <Button text={"Log In"} />
+              </form>
+            </>
+          ) : (
+            <>
+              <Helmet>
+                <title>Sign Up</title>
+              </Helmet>
+              <form onSubmit={onSubmit}>
+                <Input placeholder={"Email"} type="email" {...email} />
+                <Input placeholder={"UserName"} {...username} />
+                <Input placeholder={"Password"} type="password" {...password} />
+                <Input placeholder={"PhoneNumber"} {...phoneNum} />
+                <Button text={"Sign Up"} />
+              </form>
+            </>
+          )}
+        </Form>
+        <StateChanger>
+          {action === "logIn" ? (
+            <>
+              Don't you have an account ?
+              <ToggleSpan onClick={() => setAction("signUp")}>
+                {" "}
+                Sign Up{" "}
+              </ToggleSpan>
+            </>
+          ) : (
+            <>
+              Did you have an account ?
+              <ToggleSpan onClick={() => setAction("logIn")}>
+                {" "}
+                Log in{" "}
+              </ToggleSpan>
+            </>
+          )}
+        </StateChanger>
+        <SocialLogin>
+          <StyledLink to="/facebook">
+            <FontAwesomeIcon icon={faFacebook} />
+          </StyledLink>
+          <StyledLink to="/google">
+            <FontAwesomeIcon icon={faGoogle} />
+          </StyledLink>
+          <StyledLink to="/twitter">
+            <FontAwesomeIcon icon={faTwitter} />
+          </StyledLink>
+          <StyledLink to="/github">
+            <FontAwesomeIcon icon={faGithub} />
+          </StyledLink>
+        </SocialLogin>
+      </SubWrapper>
     </Wrapper>
     </Wrapper>
   </>
   </>
 );
 );