Skip to content

Commit d36d893

Browse files
nirmalkcnirmalkc
committed
logo, app header, search, login info
1 parent d8d081f commit d36d893

5 files changed

Lines changed: 194 additions & 66 deletions

File tree

‎components/core/Landing.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import Col from 'react-bootstrap/Col'
99
import { Header } from '..'
1010

1111
// Images
12-
import BannerBg from '../../public/images/bg-banner.png'
12+
import BannerBg from '../../public/images/bg-banner.png';
13+
import ImgLogo from '../../public/images/img-logo.svg';
1314

1415
// icon
1516
import { AiOutlineGateway, AiOutlineFileImage, AiFillGithub, AiOutlineInstagram, AiOutlineTwitter, AiOutlineLink } from "react-icons/ai";
@@ -54,6 +55,7 @@ const BannerHeader = styled.div`
5455
padding: 0.48rem 1.4rem;
5556
border: solid 1px var(--color-primary-accent);
5657
background-color: var(--color-primary-accent);
58+
font-size: var(--fs-rg);
5759
font-weight: var(--fw-bold);
5860
color: var(--color-neutral-90);
5961
@@ -145,15 +147,11 @@ const BannerBodyActions = styled.div`
145147
`;
146148

147149
const Logo = styled.h1`
148-
display: flex;
149-
grid-gap: 0.6rem;
150-
align-items: flex-start;
151-
font-size: 1.4rem;
152-
color: var(--color-neutral-10);
153-
font-weight: var(--fw-semibold);
150+
width: 152px;
151+
height: 32px;
152+
background-image: url(${ImgLogo});
154153
margin: 0;
155154
line-height: 1;
156-
padding: 0.6rem 0.8rem;
157155
`;
158156

159157
const Navigation = styled.div`
@@ -343,7 +341,7 @@ const Landing = ({ setOpen, user, setUser }) => {
343341
<div>
344342
<LandingBanner>
345343
<BannerHeader>
346-
<Logo><AiOutlineGateway /><div>TryShape</div></Logo>
344+
<Logo><div className="sr-only">TryShape</div></Logo>
347345
<Navigation>
348346
<a data-scroll href="#keyfeatures">Key Features</a>
349347
<a data-scroll href="#filesupport">File Support</a>

‎components/core/SignInModal.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22

33
// icons
44
import { FaGithub, FaGoogle } from "react-icons/fa";
5+
import { FcGoogle } from "react-icons/fc";
56

67
// Button
78
import Button from "react-bootstrap/Button";
@@ -23,7 +24,7 @@ const SignInModal = ({ open, setOpen }) => {
2324
};
2425
return (
2526
<Modal
26-
size="lg"
27+
size="md"
2728
aria-labelledby="contained-modal-title-vcenter"
2829
show={ open }
2930
onHide={() => setOpen(false)}
@@ -35,14 +36,13 @@ const SignInModal = ({ open, setOpen }) => {
3536
</Modal.Title>
3637
</Modal.Header>
3738
<Modal.Body>
38-
<div className="flex">
39-
<Button onClick={() => handleOnClick(googleProvider)}>
40-
Sign In with Google <FaGoogle />
39+
<div className="d-flex flex-column align-items-center">
40+
<Button variant="outline-dark" size="lg" onClick={() => handleOnClick(googleProvider)} className='mt-5 mb-2'>
41+
<FcGoogle size='24px'/> Sign In with Google
4142
</Button>
4243

43-
<Button onClick={() => handleOnClick(githubProvider)}>
44-
Sign In with Github
45-
<FaGithub />
44+
<Button variant="outline-dark" size="lg" onClick={() => handleOnClick(githubProvider)} className='mt-2 mb-5'>
45+
<FaGithub size='24px' /> Sign In with Github
4646
</Button>
4747
</div>
4848
</Modal.Body>

‎components/utils/Header.js‎

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { auth } from "../../utils/firebase";
1010
import toast from "react-hot-toast";
1111

1212
// icon
13-
import { FaShapes } from "react-icons/fa";
13+
import { FiPower, FiX } from "react-icons/fi";
14+
import ImgLogo from '../../public/images/img-logo.svg'
1415

1516
// Bootstrap
1617
import Button from "react-bootstrap/Button";
@@ -32,51 +33,82 @@ const AppHeader = styled.div`
3233
width: 100%;
3334
padding: 0.6rem 0.8rem;
3435
background-color: var(--color-brand);
36+
`;
3537

36-
.navbar-action--primary {
37-
padding: 0.3rem 1rem;
38-
border: solid 1px var(--color-primary-accent);
39-
background-color: var(--color-primary-accent);
40-
font-size: var(--fs-sm);
41-
font-weight: var(--fw-bold);
42-
color: var(--color-neutral-90);
43-
44-
svg {
45-
margin: -2px 0.6rem 0 0;
46-
}
47-
48-
&:hover,
49-
&:focus {
50-
border: solid 1px var(--color-neutral-10);
51-
background-color: var(--color-neutral-10);
52-
color: var(--color-brand);
53-
}
54-
55-
&:active {
56-
background-color: rgba(var(--color-neutral-10-rgb), 90%) !important;
57-
color: var(--color-brand) !important;
58-
}
59-
}
38+
const Logo = styled.h1`
39+
width: 140px;
40+
height: 32px;
41+
background-image: url(${ImgLogo});
42+
background-repeat: no-repeat;
43+
background-size: contain;
44+
background-position: center;
45+
padding: 0;
46+
margin: 2px 0 0 -8px;
47+
line-height: 1;
48+
cursor: pointer;
6049
`;
6150

6251
const NavbarSearchInput = styled(InputGroup)`
52+
position: relative;
6353
width: 60% !important;
6454
border-radius: 0.4rem;
6555
background-color: rgba(var(--color-neutral-100-rgb), 0.3);
56+
57+
&:focus-within {
58+
box-shadow: 0 0 0 0.1rem rgba(var(--color-neutral-10-rgb), 40%);
59+
background-color: rgba(var(--color-neutral-100-rgb), 0.4);
60+
}
6661
`;
6762

6863
const NavbarSearchInputText = styled(InputGroup.Text)`
64+
position: absolute;
65+
top: 3px;
66+
left: 0;
6967
background-color: transparent !important;
7068
border: 0 !important;
7169
`;
7270

7371
const NavbarSearchInputControl = styled(FormControl)`
74-
background-color: transparent !important;
72+
border-radius: 0.4rem !important;
7573
border: 0 !important;
74+
background-color: transparent !important;
7675
color: var(--color-neutral-10) !important;
76+
padding-left: 2.4rem !important;
77+
font-size: var(--fs-rg) !important;
78+
::placeholder {
79+
color: rgba(var(--color-neutral-10-rgb), 0.6) !important;
80+
}
81+
`;
82+
83+
const CloseIcon = styled(FiX)`
84+
margin: 0.36rem;
7785
`;
7886

79-
InputGroup
87+
const UserThumb = styled.div`
88+
display: flex;
89+
grid-gap: 0.4rem;
90+
align-items: center;
91+
92+
img {
93+
width: 28px;
94+
height: 28px;
95+
border-radius: 50%;
96+
}
97+
`;
98+
99+
const UserThumbName = styled.div`
100+
font-size: var(--fs-sm);
101+
color: var(--color-neutral-10);
102+
line-height: 1;
103+
`;
104+
105+
const LogoutButton = styled(Button)`
106+
color: var(--color-neutral-10);
107+
`;
108+
109+
const LoginBar = styled.div`
110+
display: flex;
111+
`;
80112

81113
const Header = ({ setOpen, user, setUser }) => {
82114
// console.log(user);
@@ -97,41 +129,42 @@ const Header = ({ setOpen, user, setUser }) => {
97129
return (
98130
<AppHeader>
99131
<Link href="/">
100-
<a>
101-
TryShape
102-
<span>
103-
<FaShapes />
104-
</span>
105-
</a>
132+
<Logo>
133+
<div className="sr-only">TryShape</div>
134+
</Logo>
106135
</Link>
107136
<NavbarSearchInput>
108-
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' /></NavbarSearchInputText>
137+
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' size='18px' /></NavbarSearchInputText>
109138
<NavbarSearchInputControl
110139
placeholder="Search a shape"
111140
aria-label="Search a shape"
112141
aria-describedby="basic-addon1"
113142
/>
143+
<CloseIcon color='#ffffff' size='24px' />
114144
</NavbarSearchInput>
115145
{(user.email || user.displayName) ? (
116146
<>
117-
<div>
118-
<img
119-
src={
120-
user.photoURL
121-
? user.photoURL
122-
: `https://unavatar.vercel.app/${user.email}`
123-
}
124-
alt="profile"
125-
/>
126-
{user.displayName ? user.displayName : "User"}
127-
</div>
128-
129-
<Button onClick={signOut}>
130-
<div>Sign Out</div>
131-
</Button>
147+
<LoginBar>
148+
<UserThumb>
149+
<img
150+
src={
151+
user.photoURL
152+
? user.photoURL
153+
: `https://unavatar.vercel.app/${user.email}`
154+
}
155+
alt="profile"
156+
/>
157+
<UserThumbName>{user.displayName ? user.displayName : "User"}</UserThumbName>
158+
</UserThumb>
159+
160+
<LogoutButton onClick={signOut} variant="link" className="btn-icon">
161+
<FiPower color='var(--color-neutral-10' size="18px"/>
162+
<div className="sr-only">Sign Out</div>
163+
</LogoutButton>
164+
</LoginBar>
132165
</>
133166
) : (
134-
<Button onClick={() => setOpen(true)} className="navbar-action--primary">
167+
<Button variant="outline-secondary" size="sm" onClick={() => setOpen(true)}>
135168
<div>Sign In</div>
136169
</Button>
137170
)}

‎public/img-logo.svg‎

Lines changed: 24 additions & 0 deletions
Loading

‎styles/global.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,79 @@ code {
129129
color: var(--color-neutral-90);
130130
}
131131

132+
/* Button Outline Secondary */
133+
.btn-outline-secondary {
134+
border: solid 1px var(--color-neutral-10);
135+
font-weight: var(--fw-bold);
136+
color: var(--color-neutral-10);
137+
}
138+
139+
.btn-outline-secondary:hover,
140+
.btn-outline-secondary:focus {
141+
border: solid 1px var(--color-neutral-10);
142+
background-color: rgba(var(--color-neutral-10-rgb), 15%);
143+
box-shadow: 0 0 0 0 rgba(0,0,0,0);
144+
}
145+
146+
.btn-outline-secondary:active {
147+
box-shadow: 0 0 0 0 rgba(0,0,0,0);
148+
background-color: rgba(var(--color-neutral-10-rgb), 100%) !important;
149+
color: var(--color-brand) !important;
150+
}
151+
152+
/* Button Outline Secondary */
153+
.btn-outline-dark {
154+
padding: 0.48rem 1.4rem;
155+
border: solid 1px var(--color-neutral-70);
156+
font-size: var(--fs-rg);
157+
font-weight: var(--fw-bold);
158+
color: var(--color-neutral-70);
159+
}
160+
161+
.btn-outline-dark:hover,
162+
.btn-outline-dark:focus {
163+
border: solid 1px var(--color-neutral-70);
164+
background-color: rgba(var(--color-neutral-100-rgb), 5%);
165+
color: var(--color-neutral-70);
166+
box-shadow: 0 0 0 0 rgba(0,0,0,0);
167+
}
168+
169+
.btn-outline-dark:active {
170+
box-shadow: 0 0 0 0 rgba(0,0,0,0);
171+
background-color: rgba(var(--color-neutral-100-rgb), 100%) !important;
172+
color: var(--color-brand) !important;
173+
}
174+
175+
/* Small Button */
176+
.btn-sm {
177+
padding: 0.3rem 1rem;
178+
font-size: var(--fs-sm);
179+
}
180+
181+
.btn-lg {
182+
padding: 0.8rem 1.4rem;
183+
font-size: var(--fs-rg);
184+
}
185+
186+
187+
.btn svg {
188+
margin: -2px 0.6rem 0 0;
189+
}
190+
191+
132192
.btn-outline-light {
133193
padding: 0.8rem 1.4rem;
194+
}
195+
196+
/* Modal Title */
197+
.modal-title {
198+
margin-left: 0.6rem;
199+
font-family: Inter, -apple-system, Roboto, Helvetica Neue, sans-serif;
200+
font-size: var(--fs-md);
201+
font-weight: var(--fw-bold);
202+
color: var(--color-neutral-90);
203+
}
204+
205+
.btn-icon svg {
206+
margin-right: 0;
134207
}

0 commit comments

Comments
 (0)