Showing
1 changed file
with
79 additions
and
8 deletions
... | @@ -2,22 +2,86 @@ import React, { useState } from "react"; | ... | @@ -2,22 +2,86 @@ import React, { useState } from "react"; |
2 | import styled from "styled-components"; | 2 | import styled from "styled-components"; |
3 | import Input from "../Components/Input"; | 3 | import Input from "../Components/Input"; |
4 | import Button from "../Components/Button"; | 4 | import Button from "../Components/Button"; |
5 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
6 | +import { | ||
7 | + faFacebook, | ||
8 | + faTwitter, | ||
9 | + faGithub, | ||
10 | + faGoogle, | ||
11 | +} from "@fortawesome/free-brands-svg-icons"; | ||
5 | 12 | ||
6 | -const Wrapper = styled.div``; | 13 | +const Wrapper = styled.div` |
14 | + width: 100%; | ||
15 | + display: flex; | ||
16 | + flex-direction: column; | ||
17 | + justify-content: center; | ||
18 | + align-items: center; | ||
19 | +`; | ||
7 | 20 | ||
8 | -const Box = styled.div``; | 21 | +const Box = styled.div` |
22 | + display: flex; | ||
23 | +`; | ||
9 | 24 | ||
10 | -const StateChanger = styled(Box)``; | 25 | +const TitleContainer = styled(Box)` |
26 | + margin-bottom: 20px; | ||
27 | +`; | ||
11 | 28 | ||
12 | -const Link = styled.span``; | 29 | +const Title = styled.span` |
30 | + font-size: 30px; | ||
31 | + font-family: "Raleway", sans-serif; | ||
32 | +`; | ||
13 | 33 | ||
14 | -const Form = styled(Box)``; | 34 | +const StateChanger = styled(Box)` |
35 | + margin-bottom: 15px; | ||
36 | +`; | ||
37 | + | ||
38 | +const Link = styled.span` | ||
39 | + cursor: pointer; | ||
40 | + color: #0652dd; | ||
41 | +`; | ||
42 | + | ||
43 | +const Form = styled(Box)` | ||
44 | + form { | ||
45 | + display: flex; | ||
46 | + flex-direction: column; | ||
47 | + padding: 5px 5px; | ||
48 | + margin-bottom: 15px; | ||
49 | + input { | ||
50 | + font-size: 15px; | ||
51 | + margin-bottom: 10px; | ||
52 | + &:focus { | ||
53 | + outline: none; | ||
54 | + } | ||
55 | + } | ||
56 | + button { | ||
57 | + background-color: #1b9cfc; | ||
58 | + color: white; | ||
59 | + border-radius: 10px; | ||
60 | + padding: 10px 5px; | ||
61 | + font-size: 15px; | ||
62 | + } | ||
63 | + } | ||
64 | +`; | ||
65 | + | ||
66 | +const SocialLogin = styled(Box)` | ||
67 | + display: flex; | ||
68 | + svg { | ||
69 | + &:not(:last-child) { | ||
70 | + margin-right: 20px; | ||
71 | + } | ||
72 | + } | ||
73 | + font-size: 30px; | ||
74 | + opacity: 0.8; | ||
75 | +`; | ||
15 | 76 | ||
16 | export default () => { | 77 | export default () => { |
17 | const [action, setAction] = useState("logIn"); | 78 | const [action, setAction] = useState("logIn"); |
18 | 79 | ||
19 | return ( | 80 | return ( |
20 | <Wrapper> | 81 | <Wrapper> |
82 | + <TitleContainer> | ||
83 | + <Title>KhuChat</Title> | ||
84 | + </TitleContainer> | ||
21 | <Form> | 85 | <Form> |
22 | {action === "logIn" ? ( | 86 | {action === "logIn" ? ( |
23 | <form> | 87 | <form> |
... | @@ -28,9 +92,10 @@ export default () => { | ... | @@ -28,9 +92,10 @@ export default () => { |
28 | ) : ( | 92 | ) : ( |
29 | <form> | 93 | <form> |
30 | <Input placeholder={"Email"} type="email" /> | 94 | <Input placeholder={"Email"} type="email" /> |
95 | + <Input placeholder={"UserName"} /> | ||
96 | + <Input placeholder={"PhoneNumber"} /> | ||
31 | <Input placeholder={"Password"} type="password" /> | 97 | <Input placeholder={"Password"} type="password" /> |
32 | <Input placeholder={"Password for validation"} type="password" /> | 98 | <Input placeholder={"Password for validation"} type="password" /> |
33 | - <Input placeholder={"UserName"} /> | ||
34 | <Button text={"Sign Up"} /> | 99 | <Button text={"Sign Up"} /> |
35 | </form> | 100 | </form> |
36 | )} | 101 | )} |
... | @@ -39,15 +104,21 @@ export default () => { | ... | @@ -39,15 +104,21 @@ export default () => { |
39 | {action === "logIn" ? ( | 104 | {action === "logIn" ? ( |
40 | <> | 105 | <> |
41 | Don't you have an account ? | 106 | Don't you have an account ? |
42 | - <Link onClick={() => setAction("signUp")}> </Link> | 107 | + <Link onClick={() => setAction("signUp")}> Sign Up </Link> |
43 | </> | 108 | </> |
44 | ) : ( | 109 | ) : ( |
45 | <> | 110 | <> |
46 | Did you have an account ? | 111 | Did you have an account ? |
47 | - <Link onClick={() => setAction("logIn")}> </Link> | 112 | + <Link onClick={() => setAction("logIn")}> Log in </Link> |
48 | </> | 113 | </> |
49 | )} | 114 | )} |
50 | </StateChanger> | 115 | </StateChanger> |
116 | + <SocialLogin> | ||
117 | + <FontAwesomeIcon icon={faFacebook} /> | ||
118 | + <FontAwesomeIcon icon={faGoogle} /> | ||
119 | + <FontAwesomeIcon icon={faTwitter} /> | ||
120 | + <FontAwesomeIcon icon={faGithub} /> | ||
121 | + </SocialLogin> | ||
51 | </Wrapper> | 122 | </Wrapper> |
52 | ); | 123 | ); |
53 | }; | 124 | }; | ... | ... |
-
Please register or login to post a comment