update Auth.js

@@ -2,22 +2,86 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 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 {
+  faFacebook,
+  faTwitter,
+  faGithub,
+  faGoogle,
+} from "@fortawesome/free-brands-svg-icons";
 
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
 
 
-const Box = styled.div``;
+const Box = styled.div`
+  display: flex;
+`;
 
 
-const StateChanger = styled(Box)``;
+const TitleContainer = styled(Box)`
+  margin-bottom: 20px;
+`;
 
 
-const Link = styled.span``;
+const Title = styled.span`
+  font-size: 30px;
+  font-family: "Raleway", sans-serif;
+`;
 
 
-const Form = styled(Box)``;
+const StateChanger = styled(Box)`
+  margin-bottom: 15px;
+`;
+
+const Link = styled.span`
+  cursor: pointer;
+  color: #0652dd;
+`;
+
+const Form = styled(Box)`
+  form {
+    display: flex;
+    flex-direction: column;
+    padding: 5px 5px;
+    margin-bottom: 15px;
+    input {
+      font-size: 15px;
+      margin-bottom: 10px;
+      &:focus {
+        outline: none;
+      }
+    }
+    button {
+      background-color: #1b9cfc;
+      color: white;
+      border-radius: 10px;
+      padding: 10px 5px;
+      font-size: 15px;
+    }
+  }
+`;
+
+const SocialLogin = styled(Box)`
+  display: flex;
+  svg {
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+  font-size: 30px;
+  opacity: 0.8;
+`;
 
 
 export default () => {
 export default () => {
   const [action, setAction] = useState("logIn");
   const [action, setAction] = useState("logIn");
 
 
   return (
   return (
     <Wrapper>
     <Wrapper>
+      <TitleContainer>
+        <Title>KhuChat</Title>
+      </TitleContainer>
       <Form>
       <Form>
         {action === "logIn" ? (
         {action === "logIn" ? (
           <form>
           <form>
@@ -28,9 +92,10 @@ export default () => {
         ) : (
         ) : (
           <form>
           <form>
             <Input placeholder={"Email"} type="email" />
             <Input placeholder={"Email"} type="email" />
+            <Input placeholder={"UserName"} />
+            <Input placeholder={"PhoneNumber"} />
             <Input placeholder={"Password"} type="password" />
             <Input placeholder={"Password"} type="password" />
             <Input placeholder={"Password for validation"} type="password" />
             <Input placeholder={"Password for validation"} type="password" />
-            <Input placeholder={"UserName"} />
             <Button text={"Sign Up"} />
             <Button text={"Sign Up"} />
           </form>
           </form>
         )}
         )}
@@ -39,15 +104,21 @@ export default () => {
         {action === "logIn" ? (
         {action === "logIn" ? (
           <>
           <>
             Don't you have an account ?
             Don't you have an account ?
-            <Link onClick={() => setAction("signUp")}> </Link>
+            <Link onClick={() => setAction("signUp")}> Sign Up </Link>
           </>
           </>
         ) : (
         ) : (
           <>
           <>
             Did you have an account ?
             Did you have an account ?
-            <Link onClick={() => setAction("logIn")}> </Link>
+            <Link onClick={() => setAction("logIn")}> Log in </Link>
           </>
           </>
         )}
         )}
       </StateChanger>
       </StateChanger>
+      <SocialLogin>
+        <FontAwesomeIcon icon={faFacebook} />
+        <FontAwesomeIcon icon={faGoogle} />
+        <FontAwesomeIcon icon={faTwitter} />
+        <FontAwesomeIcon icon={faGithub} />
+      </SocialLogin>
     </Wrapper>
     </Wrapper>
   );
   );
 };
 };