Skip to content

Commit 0215c3c

Browse files
nirmalkcnirmalkc
committed
card hover button fixes and other bug fixes
1 parent c691e32 commit 0215c3c

7 files changed

Lines changed: 105 additions & 40 deletions

File tree

‎components/core/CopyShapeSource.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
212212
</Modal.Body>
213213

214214
<Modal.Footer>
215-
<Button variant="outline-info" onClick={() => setShow(false)}>
215+
<Button variant="outline-dark" onClick={() => setShow(false)}>
216216
Close
217217
</Button>
218218
</Modal.Footer>

‎components/core/CreateShape.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -430,12 +430,12 @@ const CreateShape = (props) => {
430430
</Container>
431431
</Modal.Body>
432432
<Modal.Footer>
433-
<Button onClick={() => { setShapeInformation({ ...initialState }); props.handleClose(); }} variant="outline-info">
434-
Close
435-
</Button>
436433
<Button variant="secondary" type="submit" form="createShapeForm" disabled={!shapeInformation.name}>
437434
{props.edit ? "Save Changes" : "Create"}
438435
</Button>
436+
<Button onClick={() => { setShapeInformation({ ...initialState }); props.handleClose(); }} variant="outline-dark">
437+
Cancel
438+
</Button>
439439
</Modal.Footer>
440440
</Modal>
441441
</>

‎components/core/DeleteShape.js‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,42 @@ import toast from "react-hot-toast";
77

88
import { harperFetch } from "../../utils/HarperFetch";
99

10+
// Styled Component
11+
import styled from "styled-components";
12+
13+
// icons
14+
import { FiTrash2 } from 'react-icons/fi';
15+
16+
17+
const ModalHeader = styled.div`
18+
display: flex;
19+
align-items: center;
20+
grid-gap: 0.4rem;
21+
`;
22+
23+
const ModalContent = styled.div`
24+
display: flex;
25+
align-items: flex-start;
26+
grid-gap: 1rem;
27+
padding: 1rem 0 0 0.6rem;
28+
`;
29+
30+
const IconWrapper = styled.div`
31+
padding: 1.2rem 1rem 1rem 1rem;
32+
33+
34+
`;
35+
36+
const ContentWrapper = styled.div`
37+
padding: 1rem 0;
38+
39+
.modal-title {
40+
margin-left: 0;
41+
}
42+
`;
43+
44+
45+
1046
const DeleteShape = ({ show, setShow, shape, shapeAction, setShapeAction }) => {
1147

1248
const handleDelete = async() => {
@@ -43,21 +79,24 @@ const DeleteShape = ({ show, setShow, shape, shapeAction, setShapeAction }) => {
4379
onHide={() => setShow(false)}
4480
centered
4581
>
46-
<Modal.Header closeButton>
47-
<Modal.Title>
48-
Delete Shape
49-
</Modal.Title>
50-
</Modal.Header>
5182
<Modal.Body>
52-
<p>Are you sure you want to delete this shape? </p>
83+
<ModalContent>
84+
<IconWrapper>
85+
<FiTrash2 size="48px" color='var(--color-primary-pink)' />
86+
</IconWrapper>
87+
<ContentWrapper>
88+
<Modal.Title>Delete Shape</Modal.Title>
89+
<p>Are you sure you want to delete this shape? </p>
90+
</ContentWrapper>
91+
</ModalContent>
5392
</Modal.Body>
5493
<Modal.Footer>
55-
<Button onClick={() => setShow(false)}>
56-
Cancel
57-
</Button>
58-
<Button onClick={() => handleDelete()}>
94+
<Button onClick={() => handleDelete()} variant="danger">
5995
Yes
6096
</Button>
97+
<Button onClick={() => setShow(false)} variant="outline-dark">
98+
No
99+
</Button>
61100
</Modal.Footer>
62101
</Modal>
63102
);

‎components/core/ExportShape.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -230,15 +230,14 @@ const ExportShape = ({ show, setShow, shape }) => {
230230
</Modal.Body>
231231

232232
<Modal.Footer>
233-
<Button variant="outline-info" onClick={() => setShow(false)}>
234-
Cancel
235-
</Button>
236233
<Button variant="secondary"
237234
onClick={() => doExport(getShapeId(exportData.name, true), exportData.name)}
238235
>
239236
Export
240237
</Button>
241-
238+
<Button variant="outline-dark" onClick={() => setShow(false)}>
239+
Cancel
240+
</Button>
242241
</Modal.Footer>
243242
</Modal>
244243
)}

‎components/utils/NoShapeFound.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const NoShapeFound = ({
7070
<PageWrapper>
7171
<img src={ImgFeelingSad} width="360"/>
7272
<h2 className="title">Whooops!</h2>
73-
<p className="desc">We couldn't find the shape you are looking for. Why don't you start creating a shape of your own choice? or try to refine your search. </p>
73+
<p className="desc">Sorry, we couldn't find the shape you are looking for. Why don't you start creating a shape of your own choice? or try to refine your search. </p>
7474
<Button variant='secondary' onClick={() => performCreate()}>
7575
<FiPlus />
7676
Create Shape

‎components/utils/ShapeList.js‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Shape = dynamic(import("react-clip-path"), { ssr: false });
2323
import Switch from "react-switch";
2424

2525
// icons
26-
import { FiCopy, FiDownload, FiLock } from 'react-icons/fi';
26+
import { FiCopy, FiDelete, FiDownload, FiEdit2, FiLock, FiTrash2 } from 'react-icons/fi';
2727
import { BiExport } from "react-icons/bi";
2828
import { BsFillHeartFill, BsHeart} from "react-icons/bs";
2929

@@ -65,13 +65,24 @@ const ShapeCard = styled.div`
6565
}
6666
`;
6767

68-
const ShapeActionsContainer = styled.div`
68+
const ShapeActionsPrimary = styled.div`
6969
padding: 2rem;
7070
display: flex;
7171
grid-gap: 1rem;
7272
justify-content: center;
7373
`;
7474

75+
const ShapeActionsSecondary = styled.div`
76+
padding: 2rem;
77+
display: flex;
78+
grid-gap: 1rem;
79+
justify-content: center;
80+
81+
button {
82+
flex: 1;
83+
}
84+
`;
85+
7586
const ShapeActions = styled.div`
7687
opacity: 0;
7788
background: rgba(var(--color-neutral-100-rgb), 0.5);
@@ -83,10 +94,14 @@ const ShapeActions = styled.div`
8394
left: 0;
8495
display: flex;
8596
flex-direction: column;
86-
justify-content: center;
97+
justify-content: space-between;
8798
`;
8899

89100
const ShapeName = styled.h4`
101+
display: flex;
102+
justify-content: flex-start;
103+
align-items: center;
104+
grid-gap: .3rem;
90105
margin: 0 0 0.8rem 0;
91106
font-weight: var(--fw-bold);
92107
font-size: var(--fs-rg);
@@ -435,7 +450,7 @@ const ShapeList = (
435450
<ShapeCard>
436451
<ShapeCardBody>
437452
<ShapeNameHeader>
438-
<ShapeName>{shape.name}{shape.private && <FiLock />}</ShapeName>
453+
<ShapeName>{shape.name}{shape.private && <FiLock color='var(--color-neutral-50)' />}</ShapeName>
439454
<ShapeLikes><LikeFilledIcon size='16px' color='var(--color-neutral-40)'/><ShapeLikesCount>{shape.likes}</ShapeLikesCount></ShapeLikes>
440455
</ShapeNameHeader>
441456
<Shape
@@ -448,7 +463,7 @@ const ShapeList = (
448463
showShadow={shape.showAdvanced}
449464
/>
450465
<ShapeActions className="shape-actions">
451-
<ShapeActionsContainer>
466+
<ShapeActionsPrimary>
452467
<span
453468
onClick={(event, shapeId) => performLike(event, shape['shape_id'])}>
454469
{
@@ -460,32 +475,36 @@ const ShapeList = (
460475
)
461476
:
462477
(
463-
<Button title="Add Like" variant="outline-light" className="btn-icon btn-icon--rounded">
478+
<Button title="Add Like" variant="outline-secondary" className="btn-icon btn-icon--rounded">
464479
<LikeIcon size={24} />
465480
</Button>
466481
)
467482
}
468483

469484
</span>{" "}
470-
<Button title="Export Shape" variant="outline-light" onClick={() => performExport(shape)} className="btn-icon btn-icon--rounded">
485+
<Button title="Export Shape" variant="outline-secondary" onClick={() => performExport(shape)} className="btn-icon btn-icon--rounded">
471486
<ExportIcon
472487
size={24} />
473488
</Button>
474-
<Button title="Copy Source" variant="outline-light" onClick={() => performCopySource(shape)} className="btn-icon btn-icon--rounded">
489+
<Button title="Copy Source" variant="outline-secondary" onClick={() => performCopySource(shape)} className="btn-icon btn-icon--rounded">
475490
<CopyIcon
476491
size={24} />
477492
</Button>
478-
{shape.private ?
479-
<Button title="Edit Shape" vairant="outline-light" onClick={() => {performEdit(shape); console.log(shape)}} className="btn-icon">
480-
Edit
481-
</Button> : null
482-
}
483-
{shape.private ?
484-
<Button title="Delete Shape" vairant="outline-light" onClick={() => {performDelete(shape); console.log(shape)}} className="btn-icon">
485-
Delete
486-
</Button> : null
487-
}
488-
</ShapeActionsContainer>
493+
</ShapeActionsPrimary>
494+
<ShapeActionsSecondary>
495+
{shape.private ?
496+
<Button title="Edit Shape" size='sm' variant="outline-secondary" onClick={() => {performEdit(shape); console.log(shape)}}>
497+
<FiEdit2 />
498+
Edit
499+
</Button> : null
500+
}
501+
{shape.private ?
502+
<Button title="Delete Shape" size='sm' variant="outline-secondary" onClick={() => {performDelete(shape); console.log(shape)}}>
503+
<FiTrash2 />
504+
Delete
505+
</Button> : null
506+
}
507+
</ShapeActionsSecondary>
489508
</ShapeActions>
490509
</ShapeCardBody>
491510
<ShapeCardHeader>

‎styles/global.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,12 @@ code {
164164
background-color: var(--color-brand-light);
165165
}
166166

167+
.btn-secondary:disabled {
168+
border-color: transparent;
169+
background-color: var(--color-neutral-30);
170+
color: var(--color-neutral-50);
171+
}
172+
167173
.btn-secondary:active,
168174
.btn-secondary.focus {
169175
border-color: var(--color-brand-dark) !important;
@@ -231,7 +237,8 @@ code {
231237
.btn-outline-secondary:hover,
232238
.btn-outline-secondary:focus {
233239
border: solid 1px var(--color-neutral-10);
234-
background-color: rgba(var(--color-neutral-10-rgb), 15%);
240+
background-color: rgba(var(--color-neutral-10-rgb), 100%);
241+
color: var(--color-brand);
235242
box-shadow: 0 0 0 0 rgba(0,0,0,0);
236243
}
237244

@@ -286,6 +293,7 @@ code {
286293
.btn-sm {
287294
padding: 0.5rem 1rem;
288295
font-size: var(--fs-sm);
296+
font-weight: var(--fw-bold);
289297
}
290298

291299
.btn-lg {
@@ -317,7 +325,7 @@ code {
317325
padding: 0.6rem;
318326
width: 3.6rem;
319327
height: 3.6rem;
320-
border-width: 0.13rem;
328+
border-width: 0.1rem;
321329
}
322330

323331
/* Dropdown Menu */

0 commit comments

Comments
 (0)