Skip to content

Commit dfcacd7

Browse files
atapasatapas
authored
Merge pull request #41 from TryShape/Add-a-Landing-Page-#10
Add a landing page #10
2 parents 762cf7a + da5d8ef commit dfcacd7

13 files changed

Lines changed: 293 additions & 107 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/CreateShape.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -334,19 +334,20 @@ const CreateShape = (props) => {
334334
<Container fluid>
335335
<Row lg={2} md={1} sm={1} xs={1}>
336336
<Col>
337-
<ShapeForm
337+
<ShapePreview
338338
shapeInformation={shapeInformation}
339339
handleChange={handleChange}
340-
handleSubmit={handleSubmit}
341-
validated={validated}
342340
/>
343341
</Col>
344342
<Col>
345-
<ShapePreview
343+
<ShapeForm
346344
shapeInformation={shapeInformation}
347345
handleChange={handleChange}
346+
handleSubmit={handleSubmit}
347+
validated={validated}
348348
/>
349349
</Col>
350+
350351
</Row>
351352
</Container>
352353
</Modal.Body>

‎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>

0 commit comments

Comments
 (0)