Skip to content

Commit bde09aa

Browse files
nirmalkcnirmalkc
committed
copy modal styling
1 parent 20c5175 commit bde09aa

3 files changed

Lines changed: 115 additions & 39 deletions

File tree

‎components/core/CopyShapeSource.js‎

Lines changed: 74 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,43 @@ import { FiCopy } from 'react-icons/fi';
3333
// misc utilities
3434
import { getShapeId } from "../../utils/misc";
3535

36-
const CSSDisplay = styled.span`
36+
const CSSDisplayContainer = styled.div`
37+
position: relative;
38+
background-color: var(--color-neutral-80);
39+
padding: 0 0 2rem 0;
40+
height: 240px;
41+
overflow: hidden;
42+
`;
43+
44+
const CSSDisplay = styled.pre`
3745
white-space: pre-line;
46+
color: #f5d67b;
47+
max-height: 180px;
48+
overflow: auto;
49+
margin: 1rem 0.4rem 1rem 1rem;
50+
padding-right: 0.4rem;
51+
`;
52+
53+
const CopyButton = styled(Button)`
54+
position: absolute;
55+
display: flex !important;
56+
align-items: center;
57+
justify-content: center;
58+
grid-gap: 0.4rem;
59+
color: var(--color-neutral-10) !important;
60+
left: 0.4rem;
61+
bottom: 0.4rem;
62+
width: calc(100% - 0.8rem);
63+
padding: 0.3rem 0.6rem !important;
64+
font-size: var(--fs-sm) !important;
65+
background-color: var(--color-brand) !important;
66+
cursor: pointer;
67+
68+
&:hover,
69+
&:focus {
70+
background-color: var(--color-brand-light) !important;
71+
text-decoration: none !important;
72+
}
3873
`;
3974

4075
const CopyIcon = styled(FiCopy)`
@@ -97,17 +132,29 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
97132
<Modal.Body>
98133
<Container fluid>
99134
<Row>
135+
<Col>
136+
<ShapeContainer>
137+
<Shape
138+
name={shape.name}
139+
formula={shape.formula}
140+
width="300px"
141+
height="300px"
142+
backgroundColor={shape.backgroundColor}
143+
id={getShapeId(shape.name, true)}
144+
/>
145+
</ShapeContainer>
146+
</Col>
100147
<Col>
101148
<Form>
102149
<div>
103150
<Form.Group>
104151
<Form.Label>Export As</Form.Label>
105152
<div>
106-
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-dark" size="sm" defaultValue={type}>
107-
<ToggleButton id="tbg-radio-1" value={'css'} variant="outline-dark" onClick={() => setType('css')}>
153+
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-info" size="sm" defaultValue={type}>
154+
<ToggleButton id="tbg-radio-1" value={'css'} variant="outline-info" onClick={() => setType('css')}>
108155
Show CSS
109156
</ToggleButton>
110-
<ToggleButton id="tbg-radio-2" value={'clip-path'} variant="outline-dark" onClick={() => setType('clip-path')}>
157+
<ToggleButton id="tbg-radio-2" value={'clip-path'} variant="outline-info" onClick={() => setType('clip-path')}>
111158
Show Clip-Path
112159
</ToggleButton>
113160
</ToggleButtonGroup>
@@ -125,44 +172,48 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
125172
<div>
126173
{type === 'css' &&
127174
<>
175+
<hr/>
128176
<h3>CSS Snippet</h3>
129-
<CSSDisplay>
130-
<code>{getCSS(shape.formula)}</code>
131-
</CSSDisplay>
132-
<CopyIcon size={20} onClick={() => copy(shape.formula, true)}/>
177+
<CSSDisplayContainer >
178+
<CSSDisplay rel='css'>
179+
<code>{getCSS(shape.formula)}</code>
180+
</CSSDisplay>
181+
<CopyButton onClick={() => copy(shape.formula, true)} variant="link" className="btn-icon">
182+
<CopyIcon color='var(--color-neutral-10' size="16px"/>
183+
<div>Copy to Clipboard</div>
184+
</CopyButton>
185+
</CSSDisplayContainer>
133186
</>
134187
}
135188
{type === 'clip-path' &&
136189
<div>
190+
<hr/>
137191
<h3>Clip-Path Value</h3>
138-
<code>{shape.formula}</code>
139-
<CopyIcon size={20} onClick={() => copy(shape.formula, false)}/>
192+
<CSSDisplayContainer >
193+
<CSSDisplay rel='css'>
194+
<code>{shape.formula}</code>
195+
</CSSDisplay>
196+
<CopyButton onClick={() => copy(shape.formula, false)} variant="link" className="btn-icon">
197+
<CopyIcon color='var(--color-neutral-10' size="16px"/>
198+
<div>Copy to Clipboard</div>
199+
</CopyButton>
200+
</CSSDisplayContainer>
140201
</div>
202+
141203
}
142204
</div>
143205
)
144206
}
145207
</Form>
146208
</Col>
147-
<Col>
148-
<ShapeContainer>
149-
<Shape
150-
name={shape.name}
151-
formula={shape.formula}
152-
width="300px"
153-
height="300px"
154-
backgroundColor={shape.backgroundColor}
155-
id={getShapeId(shape.name, true)}
156-
/>
157-
</ShapeContainer>
158-
</Col>
209+
159210
</Row>
160211
</Container>
161212
</Modal.Body>
162213

163214
<Modal.Footer>
164215
<Button variant="outline-info" onClick={() => setShow(false)}>
165-
Cancel
216+
Close
166217
</Button>
167218
</Modal.Footer>
168219
</Modal>

‎components/core/ExportShape.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,18 @@ const ExportShape = ({ show, setShow, shape }) => {
148148
<Modal.Body>
149149
<Container fluid>
150150
<Row>
151+
<Col>
152+
<ShapeContainer>
153+
<Shape
154+
name={exportData.name}
155+
formula={shape.formula}
156+
width={`${exportData.width}px`}
157+
height={`${exportData.height}px`}
158+
backgroundColor={exportData.backgroundColor}
159+
id={getShapeId(exportData.name, true)}
160+
/>
161+
</ShapeContainer>
162+
</Col>
151163
<Col>
152164
<Form>
153165
<Form.Group className="mb-3" id="export-name">
@@ -170,6 +182,7 @@ const ExportShape = ({ show, setShow, shape }) => {
170182
<Form.Label>Set a width({exportData.width}px)</Form.Label>
171183
<Form.Control
172184
type="range"
185+
className="range-slider"
173186
min="100"
174187
max="700"
175188
value={exportData.width}
@@ -181,6 +194,7 @@ const ExportShape = ({ show, setShow, shape }) => {
181194
<Form.Label>Set a height({exportData.height}px)</Form.Label>
182195
<Form.Control
183196
type="range"
197+
className="range-slider"
184198
min="100"
185199
max="700"
186200
value={exportData.height}
@@ -210,18 +224,7 @@ const ExportShape = ({ show, setShow, shape }) => {
210224
</div>
211225
</Form>
212226
</Col>
213-
<Col>
214-
<ShapeContainer>
215-
<Shape
216-
name={exportData.name}
217-
formula={shape.formula}
218-
width={`${exportData.width}px`}
219-
height={`${exportData.height}px`}
220-
backgroundColor={exportData.backgroundColor}
221-
id={getShapeId(exportData.name, true)}
222-
/>
223-
</ShapeContainer>
224-
</Col>
227+
225228
</Row>
226229
</Container>
227230
</Modal.Body>

‎styles/global.css‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ code {
164164
background-color: var(--color-brand-light);
165165
}
166166

167-
.btn-secondary:active {
167+
.btn-secondary:active,
168+
.btn-secondary.focus {
168169
border-color: var(--color-brand-dark) !important;
169170
background-color: var(--color-brand-dark) !important;
170171
}
@@ -181,6 +182,7 @@ code {
181182
.btn-outline-info:focus {
182183
border-color: var(--color-brand);
183184
background-color: rgba(var(--color-brand-rgb), 0.1) !important;
185+
box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-rgb), 0.3);
184186
color: var(--color-brand);
185187
}
186188

@@ -190,6 +192,16 @@ code {
190192
color: var(--color-brand) !important;
191193
}
192194

195+
.btn-outline-info.active {
196+
border-color: var(--color-brand-dark) !important;
197+
background-color: var(--color-brand-dark) !important;
198+
color: var(--color-neutral-10) !important;
199+
}
200+
201+
.btn-outline-info.active {
202+
box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-rgb), 0.3);
203+
}
204+
193205
.btn-danger {
194206
padding: 0.8rem 1.4rem;
195207
border: solid 1px var(--color-primary-pink);
@@ -223,7 +235,8 @@ code {
223235
box-shadow: 0 0 0 0 rgba(0,0,0,0);
224236
}
225237

226-
.btn-outline-secondary:active {
238+
.btn-outline-secondary:active,
239+
.btn-outline-secondary.focus {
227240
box-shadow: 0 0 0 0 rgba(0,0,0,0);
228241
background-color: rgba(var(--color-neutral-10-rgb), 100%) !important;
229242
color: var(--color-brand) !important;
@@ -254,9 +267,17 @@ code {
254267
.btn-outline-dark:active {
255268
box-shadow: 0 0 0 0 rgba(0,0,0,0);
256269
background-color: rgba(var(--color-neutral-100-rgb), 100%) !important;
257-
color: var(--color-brand) !important;
270+
color: var(--color-neutral-20) !important;
258271
}
259272

273+
274+
/* Button Group */
275+
.btn-group-toggle .btn {
276+
font-weight: var(--fw-normal);
277+
font-size: var(--fs-sm);
278+
}
279+
280+
260281
/* Button Sizes */
261282
.btn {
262283
padding: 0.64rem 1.4rem;
@@ -339,4 +360,5 @@ code {
339360
width: 5rem;
340361
height: 3rem;
341362
padding: 0.1rem 0.2rem;
342-
}
363+
}
364+

0 commit comments

Comments
 (0)