Skip to content

Commit 9c8b124

Browse files
nirmalkcnirmalkc
committed
cards and others
1 parent 0acae2f commit 9c8b124

3 files changed

Lines changed: 159 additions & 64 deletions

File tree

‎components/utils/Header.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import toast from "react-hot-toast";
1212
// icon
1313
import { FaShapes } from "react-icons/fa";
1414

15-
// Button
15+
// Bootstrap
1616
import Button from "react-bootstrap/Button";
1717
import InputGroup from 'react-bootstrap/InputGroup'
1818
import FormControl from 'react-bootstrap/FormControl'
1919

20+
import { FiSearch } from "react-icons/fi";
21+
2022
// Styled Component
2123
import styled from "styled-components";
2224

@@ -58,9 +60,24 @@ const AppHeader = styled.div`
5860
`;
5961

6062
const NavbarSearchInput = styled(InputGroup)`
61-
width: 60%;
63+
width: 60% !important;
64+
border-radius: 0.4rem;
65+
background-color: rgba(var(--color-neutral-100-rgb), 0.3);
66+
`;
67+
68+
const NavbarSearchInputText = styled(InputGroup.Text)`
69+
background-color: transparent !important;
70+
border: 0 !important;
6271
`;
6372

73+
const NavbarSearchInputControl = styled(FormControl)`
74+
background-color: transparent !important;
75+
border: 0 !important;
76+
color: var(--color-neutral-10) !important;
77+
`;
78+
79+
InputGroup
80+
6481
const Header = ({ setOpen, user, setUser }) => {
6582
// console.log(user);
6683
// sign out function
@@ -88,10 +105,10 @@ const Header = ({ setOpen, user, setUser }) => {
88105
</a>
89106
</Link>
90107
<NavbarSearchInput>
91-
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
92-
<FormControl
93-
placeholder="Username"
94-
aria-label="Username"
108+
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' /></NavbarSearchInputText>
109+
<NavbarSearchInputControl
110+
placeholder="Search a shape"
111+
aria-label="Search a shape"
95112
aria-describedby="basic-addon1"
96113
/>
97114
</NavbarSearchInput>

‎components/utils/ShapeList.js‎

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

33
// Bootstrap
44
import Container from 'react-bootstrap/Container'
5+
import Button from "react-bootstrap/Button";
56

67
// Styled Component
78
import styled from "styled-components";
@@ -37,7 +38,7 @@ import { formatRelative } from "date-fns";
3738

3839
// Shape Listing Styled-Componentns
3940
const ShapeCards = styled.div`
40-
padding: 4rem 0 2rem 0;
41+
padding: 5rem 0 2rem 0;
4142
display: grid;
4243
grid-template-columns: repeat(3, minmax(240px, 1fr));
4344
grid-gap: 2rem;
@@ -49,22 +50,99 @@ const ShapeCards = styled.div`
4950
`;
5051

5152
const ShapeCard = styled.div`
52-
padding: 1rem 1.6rem;
5353
border-radius: 0.6rem;
5454
background-color: var(--color-neutral-10);
55+
overflow: hidden;
5556
5657
&:hover {
57-
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 16%);
58+
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 26%);
59+
60+
.shape-actions {
61+
opacity: 1;
62+
}
5863
}
5964
`;
6065

66+
const ShapeActionsContainer = styled.div`
67+
padding: 2rem;
68+
display: flex;
69+
grid-gap: 1rem;
70+
justify-content: center;
71+
`;
72+
6173
const ShapeActions = styled.div`
62-
float: right;
74+
opacity: 0;
75+
background: rgba(var(--color-neutral-100-rgb), 0.5);
76+
transition: all .3s ease-in-out;
77+
position: absolute;
78+
top: 0;
79+
right: 0;
80+
bottom: 0;
81+
left: 0;
82+
display: flex;
83+
flex-direction: column;
84+
justify-content: center;
85+
`;
86+
87+
const ShapeName = styled.h4`
88+
margin: 0 0 0.8rem 0;
89+
font-weight: var(--fw-bold);
90+
font-size: var(--fs-rg);
91+
color: var(--color-neutral-100);
92+
`;
93+
94+
const ShapeNameHeader = styled.div`
95+
display: flex;
96+
justify-content: space-between;
97+
`;
98+
99+
const ShapeLikes = styled.div`
100+
display: flex;
101+
align-items: center;
102+
height: 1.6rem;
103+
104+
svg {
105+
margin-right: 0.3rem;
106+
}
107+
`;
108+
109+
const ShapeLikesCount = styled.div`
110+
font-size: var(--fs-sm);
111+
color: var(--color-neutral-60);
112+
`;
113+
114+
const ShapeCredits = styled.div`
115+
display: flex;
116+
align-items: center;
117+
border-top: solid 1px var(--color-neutral-20);
118+
padding-top: 1rem;
119+
`;
120+
121+
const ShapeCreditsOwner = styled.div`
122+
display: flex;
123+
flex-direction: column;
124+
font-weight: var(--fs-md);
63125
`;
64126

65-
const ShapeName = styled.span`
66-
font-weight: bold;
67-
font-size: 20px;
127+
const ShapeCreditsDate = styled.small`
128+
margin-top: 0.3rem;
129+
font-size: var(--fs-sm);
130+
color: var(--color-neutral-50);
131+
line-height: 1;
132+
`;
133+
134+
const ShapeCreditsOwnerName = styled.div`
135+
font-size: var(--fs-sm);
136+
font-weight: var(--fw-semibold);
137+
color: var(--color-neutral-60);
138+
line-height: 1;
139+
`;
140+
141+
const ShapeCreditsThumb = styled.img`
142+
border-radius: 50%;
143+
height: 32px;
144+
width: 32px;
145+
margin-right: 0.4rem;
68146
`;
69147

70148
const Playground = styled.div`
@@ -86,43 +164,35 @@ const ShapeCardsContainer = styled.div`
86164
background-color: var(--color-neutral-20);
87165
`;
88166

167+
const ShapeCardBody = styled.div`
168+
position: relative;
169+
padding: 1rem 1.6rem;
170+
`;
171+
89172
const ShapeCardHeader = styled.div`
90-
padding: 5px;
91-
margin: 5px;
173+
margin: 0;
174+
padding: 0 1.8rem 1.6rem 1.8rem;
92175
`;
93176

94177
const ShapeCardSwitch = styled.div`
178+
display: none;
95179
margin: 5px auto auto 9px;
96180
`;
97181

98182
const CopyIcon = styled(FiCopy)`
99183
cursor: pointer;
100-
&:hover {
101-
color: #f71b76;
102-
}
103184
`;
104185

105186
const ExportIcon = styled(BiExport)`
106187
cursor: pointer;
107-
&:hover {
108-
color: #f71b76;
109-
}
110188
`;
111189

112190
const LikeIcon = styled(BsHeart)`
113191
cursor: pointer;
114-
color: red;
115-
&:hover {
116-
color: #f71b6f;
117-
}
118192
`;
119193

120194
const LikeFilledIcon = styled(BsFillHeartFill)`
121195
cursor: pointer;
122-
color: red;
123-
&:hover {
124-
color: #f71b6f;
125-
}
126196
`;
127197

128198
const ShapeList = ({ setOpen, user, data }) => {
@@ -253,7 +323,6 @@ const ShapeList = ({ setOpen, user, data }) => {
253323
<ShapeCardsContainer>
254324
<Container>
255325
<ShapeCards>
256-
257326
{ shapeToExport && <ExportShape
258327
show={ showExportModal }
259328
setShow={ setShowExportModal }
@@ -262,49 +331,53 @@ const ShapeList = ({ setOpen, user, data }) => {
262331
{shapes.map((shape, index) => (
263332
<React.Fragment key={index}>
264333
<ShapeCard>
265-
<ShapeCardHeader>
266-
<ShapeName>{shape.name}</ShapeName>
267-
{shape.private && <FiLock />}
268-
<ShapeActions>
334+
<ShapeCardBody>
335+
<ShapeNameHeader>
336+
<ShapeName>{shape.name}{shape.private && <FiLock />}</ShapeName>
337+
<ShapeLikes><LikeFilledIcon size='16px' color='var(--color-neutral-40)'/><ShapeLikesCount>{shape.likes}</ShapeLikesCount></ShapeLikes>
338+
</ShapeNameHeader>
339+
<Shape
340+
width="240px"
341+
height="240px"
342+
name={shape.name}
343+
id={getShapeId(shape.name)}
344+
formula={shape.formula}
345+
backgroundColor= {shape.backgroundColor || "#eb3d86"}
346+
showShadow={shape.showAdvanced}
347+
/>
348+
<ShapeActions className="shape-actions">
349+
<ShapeActionsContainer>
269350
<span title="Like">
270351
{
271352
shape.liked ?
272-
(<LikeFilledIcon
353+
(<Button variant="outline-light"><LikeFilledIcon
273354
size={24}
274-
onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/>)
355+
onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/></Button>)
275356
:
276-
(<LikeIcon
357+
(<Button variant="outline-light"><LikeIcon
277358
size={24}
278-
onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/>)
359+
onClick={(event, shapeId) => performLike(event, shape['shape_id'])}/></Button>)
279360
}
280-
{shape.likes}
361+
281362
</span>{" "}
282-
<span title="Export">
363+
<Button title="Export" variant="outline-light">
283364
<ExportIcon
284365
size={24}
285366
onClick={() => performExport(shape)}
286367
/>
287-
</span>
368+
</Button>
369+
</ShapeActionsContainer>
288370
</ShapeActions>
371+
</ShapeCardBody>
372+
<ShapeCardHeader>
373+
<ShapeCredits>
374+
<ShapeCreditsThumb src={shape.photoURL} alt={shape.name1} />
375+
<ShapeCreditsOwner>
376+
<ShapeCreditsOwnerName>{shape.name1}</ShapeCreditsOwnerName>
377+
<ShapeCreditsDate>at {formatRelative(shape['__createdtime__'], new Date())}</ShapeCreditsDate>
378+
</ShapeCreditsOwner>
379+
</ShapeCredits>
289380
</ShapeCardHeader>
290-
<Shape
291-
width="300px"
292-
height="300px"
293-
name={shape.name}
294-
id={getShapeId(shape.name)}
295-
formula={shape.formula}
296-
backgroundColor= {shape.backgroundColor || "#eb3d86"}
297-
showShadow={shape.showAdvanced}
298-
/>
299-
300-
<div>
301-
<span>
302-
Created By
303-
<img src={shape.photoURL} alt={shape.name1} height='30px' width='30px' />
304-
{shape.name1} at {formatRelative(shape['__createdtime__'], new Date())}
305-
</span>
306-
</div>
307-
308381
<ShapeCardSwitch>
309382
<label htmlFor={`${getShapeFileName(shape.name)}-form`}>
310383
<span>Show Clip-Path Info</span>{" "}

‎styles/global.css‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,17 @@
1212
/* Neutral */
1313
--color-neutral-10: #ffffff;
1414
--color-neutral-20: #f6f6f9;
15-
--color-neutral-30: #f6f7fa;
16-
--color-neutral-40: #ffffff;
17-
--color-neutral-50: #ffffff;
18-
--color-neutral-60: #ffffff;
19-
--color-neutral-70: #ffffff;
15+
--color-neutral-30: #E0E0E6;
16+
--color-neutral-40: #B0AFB6;
17+
--color-neutral-50: #8D8C95;
18+
--color-neutral-60: #6A6973;
19+
--color-neutral-70: #474552;
2020
--color-neutral-80: #242230;
2121
--color-neutral-90: #040222;
2222
--color-neutral-100: #000000;
2323

2424
--color-neutral-10-rgb: 255, 255, 255;
25+
--color-neutral-100-rgb: 0, 0, 0;
2526

2627
/* Font Weight */
2728
--fw-light: 300;
@@ -126,4 +127,8 @@ code {
126127
background-color: var(--color-primary-accent);
127128
font-weight: var(--fw-bold);
128129
color: var(--color-neutral-90);
130+
}
131+
132+
.btn-outline-light {
133+
padding: 0.8rem 1.4rem;
129134
}

0 commit comments

Comments
 (0)