Skip to content

Commit 81fcd1a

Browse files
nirmalkcnirmalkc
committed
dropdown and add shape
1 parent d36d893 commit 81fcd1a

3 files changed

Lines changed: 109 additions & 32 deletions

File tree

‎components/utils/Header.js‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import ImgLogo from '../../public/images/img-logo.svg'
1515

1616
// Bootstrap
1717
import Button from "react-bootstrap/Button";
18-
import InputGroup from 'react-bootstrap/InputGroup'
19-
import FormControl from 'react-bootstrap/FormControl'
18+
import InputGroup from 'react-bootstrap/InputGroup';
19+
import FormControl from 'react-bootstrap/FormControl';
20+
import DropdownButton from 'react-bootstrap/DropdownButton';
21+
import Dropdown from 'react-bootstrap/Dropdown'
2022

21-
import { FiSearch } from "react-icons/fi";
23+
import { FiSearch, FiPlus } from "react-icons/fi";
2224

2325
// Styled Component
2426
import styled from "styled-components";
@@ -30,6 +32,7 @@ const AppHeader = styled.div`
3032
right: 0;
3133
display: flex;
3234
justify-content: space-between;
35+
align-items: flex-start;
3336
width: 100%;
3437
padding: 0.6rem 0.8rem;
3538
background-color: var(--color-brand);
@@ -48,9 +51,15 @@ const Logo = styled.h1`
4851
cursor: pointer;
4952
`;
5053

54+
const NavbarSearchInputContainer = styled.div`
55+
display: flex;
56+
align-items: center;
57+
max-width: 560px;
58+
width: 60% !important;
59+
`;
60+
5161
const NavbarSearchInput = styled(InputGroup)`
5262
position: relative;
53-
width: 60% !important;
5463
border-radius: 0.4rem;
5564
background-color: rgba(var(--color-neutral-100-rgb), 0.3);
5665
@@ -81,7 +90,7 @@ const NavbarSearchInputControl = styled(FormControl)`
8190
`;
8291

8392
const CloseIcon = styled(FiX)`
84-
margin: 0.36rem;
93+
margin: 0.37rem;
8594
`;
8695

8796
const UserThumb = styled.div`
@@ -100,6 +109,10 @@ const UserThumbName = styled.div`
100109
font-size: var(--fs-sm);
101110
color: var(--color-neutral-10);
102111
line-height: 1;
112+
max-width: 64px;
113+
white-space: nowrap;
114+
overflow: hidden;
115+
text-overflow: ellipsis;
103116
`;
104117

105118
const LogoutButton = styled(Button)`
@@ -108,8 +121,11 @@ const LogoutButton = styled(Button)`
108121

109122
const LoginBar = styled.div`
110123
display: flex;
124+
align-items: center;
111125
`;
112126

127+
128+
113129
const Header = ({ setOpen, user, setUser }) => {
114130
// console.log(user);
115131
// sign out function
@@ -133,18 +149,29 @@ const Header = ({ setOpen, user, setUser }) => {
133149
<div className="sr-only">TryShape</div>
134150
</Logo>
135151
</Link>
136-
<NavbarSearchInput>
137-
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' size='18px' /></NavbarSearchInputText>
138-
<NavbarSearchInputControl
139-
placeholder="Search a shape"
140-
aria-label="Search a shape"
141-
aria-describedby="basic-addon1"
142-
/>
143-
<CloseIcon color='#ffffff' size='24px' />
144-
</NavbarSearchInput>
152+
<NavbarSearchInputContainer>
153+
<NavbarSearchInput>
154+
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' size='18px' /></NavbarSearchInputText>
155+
<NavbarSearchInputControl
156+
placeholder="Search a shape"
157+
aria-label="Search a shape"
158+
aria-describedby="basic-addon1"
159+
/>
160+
<CloseIcon color='#ffffff' size='24px' />
161+
</NavbarSearchInput>
162+
<DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title="View by Popularity" className="border-0">
163+
<Dropdown.Item href="#/action-1">Likes</Dropdown.Item>
164+
<Dropdown.Item href="#/action-2" active>Popularity</Dropdown.Item>
165+
<Dropdown.Item href="#/action-3">Newly Added</Dropdown.Item>
166+
</DropdownButton>
167+
</NavbarSearchInputContainer>
145168
{(user.email || user.displayName) ? (
146169
<>
147-
<LoginBar>
170+
<LoginBar>
171+
<Button variant="primary" size="sm" className="mr-3">
172+
<FiPlus />
173+
Add Shape
174+
</Button>
148175
<UserThumb>
149176
<img
150177
src={
@@ -156,8 +183,7 @@ const Header = ({ setOpen, user, setUser }) => {
156183
/>
157184
<UserThumbName>{user.displayName ? user.displayName : "User"}</UserThumbName>
158185
</UserThumb>
159-
160-
<LogoutButton onClick={signOut} variant="link" className="btn-icon">
186+
<LogoutButton onClick={signOut} variant="link" className="btn-icon p-0 ml-2">
161187
<FiPower color='var(--color-neutral-10' size="18px"/>
162188
<div className="sr-only">Sign Out</div>
163189
</LogoutButton>

‎components/utils/ShapeList.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,14 @@ const ShapeCards = styled.div`
4141
padding: 5rem 0 2rem 0;
4242
display: grid;
4343
grid-template-columns: repeat(3, minmax(240px, 1fr));
44-
grid-gap: 2rem;
45-
// display: flex;
46-
// flex-wrap: wrap;
47-
// justify-content: center;
48-
// align-items: center;
49-
44+
grid-gap: 2rem;
5045
`;
5146

5247
const ShapeCard = styled.div`
5348
border-radius: 0.6rem;
5449
background-color: var(--color-neutral-10);
5550
overflow: hidden;
51+
box-shadow: 3px 10px 18px 0 rgb(111 118 138 / 6%);
5652
5753
&:hover {
5854
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 26%);
@@ -353,20 +349,20 @@ const ShapeList = ({ setOpen, user, data }) => {
353349
{
354350
shape.liked ?
355351
(
356-
<Button variant="outline-light">
352+
<Button variant="danger" className="btn-icon">
357353
<LikeFilledIcon size={24} />
358354
</Button>
359355
)
360356
:
361357
(
362-
<Button variant="outline-light">
358+
<Button variant="outline-light" className="btn-icon">
363359
<LikeIcon size={24} />
364360
</Button>
365361
)
366362
}
367363

368364
</span>{" "}
369-
<Button title="Export" variant="outline-light" onClick={() => performExport(shape)}>
365+
<Button title="Export" variant="outline-light" onClick={() => performExport(shape)} className="btn-icon">
370366
<ExportIcon
371367
size={24} />
372368
</Button>

‎styles/global.css‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88

99
/* Primary Colors */
1010
--color-primary-accent: #18ffff;
11+
--color-primary-pink: #f50057;
12+
--color-primary-pink-light: #ff5983;
13+
--color-primary-pink-dark: #c2185b;
1114

1215
/* Neutral */
1316
--color-neutral-10: #ffffff;
@@ -129,6 +132,25 @@ code {
129132
color: var(--color-neutral-90);
130133
}
131134

135+
.btn-danger {
136+
padding: 0.8rem 1.4rem;
137+
border: solid 1px var(--color-primary-pink);
138+
background-color: var(--color-primary-pink);
139+
font-weight: var(--fw-bold);
140+
color: var(--color-neutral-10);
141+
}
142+
143+
.btn-danger:hover,
144+
.btn-danger:focus {
145+
border-color: var(--color-primary-pink);
146+
background-color: var(--color-primary-pink);
147+
}
148+
149+
.btn-danger:active {
150+
border-color: var(--color-primary-pink-dark) !important;
151+
background-color: var(--color-primary-pink-dark) !important;
152+
}
153+
132154
/* Button Outline Secondary */
133155
.btn-outline-secondary {
134156
border: solid 1px var(--color-neutral-10);
@@ -149,6 +171,11 @@ code {
149171
color: var(--color-brand) !important;
150172
}
151173

174+
.show>.btn-outline-secondary.dropdown-toggle {
175+
background-color: rgba(var(--color-neutral-10-rgb), 10%) !important;
176+
color: var(--color-neutral-10) !important;
177+
}
178+
152179
/* Button Outline Secondary */
153180
.btn-outline-dark {
154181
padding: 0.48rem 1.4rem;
@@ -172,9 +199,13 @@ code {
172199
color: var(--color-brand) !important;
173200
}
174201

175-
/* Small Button */
202+
/* Button Sizes */
203+
.btn {
204+
padding: 0.8rem 1.4rem;
205+
}
206+
176207
.btn-sm {
177-
padding: 0.3rem 1rem;
208+
padding: 0.5rem 1rem;
178209
font-size: var(--fs-sm);
179210
}
180211

@@ -189,10 +220,6 @@ code {
189220
}
190221

191222

192-
.btn-outline-light {
193-
padding: 0.8rem 1.4rem;
194-
}
195-
196223
/* Modal Title */
197224
.modal-title {
198225
margin-left: 0.6rem;
@@ -204,4 +231,32 @@ code {
204231

205232
.btn-icon svg {
206233
margin-right: 0;
234+
}
235+
236+
/* Dropdown Menu */
237+
.dropdown-menu {
238+
border-color: transparent;
239+
padding: 0;
240+
box-shadow: 3px 10px 18px 0 rgb(111 118 138 / 26%);
241+
}
242+
243+
.dropdown-menu .dropdown-item {
244+
padding: 0.6rem 1.1rem;
245+
font-family: Inter, -apple-system, Roboto, Helvetica Neue, sans-serif;
246+
font-size: var(--fs-sm);
247+
font-weight: var(--fw-semibold);
248+
color: var(--color-neutral-90);
249+
}
250+
251+
.dropdown-menu .dropdown-item.active {
252+
background-color: rgba(var(--color-brand-rgb), 0.08);
253+
color: var(--color-brand);
254+
}
255+
256+
.dropdown-toggle::after {
257+
margin-left: .8em;
258+
}
259+
260+
.border-0 .dropdown-toggle {
261+
border-color: transparent;
207262
}

0 commit comments

Comments
 (0)