Skip to content

Commit f48b883

Browse files
atapasatapas
authored
Merge pull request #28 from TryShape/Add-a-Landing-Page-#10
Add a landing page #10
2 parents 4591276 + 5381bdd commit f48b883

7 files changed

Lines changed: 520 additions & 161 deletions

File tree

‎components/core/ExportShape.js‎

Lines changed: 154 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,27 @@ import React, { useState, useEffect } from "react";
33
// dynamic from Next.js
44
import dynamic from "next/dynamic";
55

6-
// modal
6+
// Bootstrap
77
import Modal from "react-bootstrap/Modal";
8-
9-
// button
8+
import Container from 'react-bootstrap/Container'
9+
import Row from 'react-bootstrap/Row'
10+
import Col from 'react-bootstrap/Col'
1011
import Button from "react-bootstrap/Button";
12+
import Form from 'react-bootstrap/Form';
13+
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
14+
import ToggleButton from 'react-bootstrap/ToggleButton'
15+
16+
// Styled Component
17+
import styled from "styled-components";
1118

1219
// Clip-Path
1320
const Shape = dynamic(import("react-clip-path"), { ssr: false });
1421

22+
const ShapeContainer = styled.section`
23+
border: solid 1px var(--color-neutral-30);
24+
padding: 1rem;
25+
`;
26+
1527
// Toast
1628
import toast from "react-hot-toast";
1729

@@ -39,8 +51,8 @@ const ExportShape = ({ show, setShow, shape }) => {
3951
setExportData({
4052
'name': shape.name,
4153
'type': 'png',
42-
'width': '300',
43-
'height': '300',
54+
'width': '240',
55+
'height': '240',
4456
'backgroundColor': shape.backgroundColor
4557
});
4658
setLoaded(true);
@@ -130,81 +142,150 @@ const ExportShape = ({ show, setShow, shape }) => {
130142
<Modal.Title>Export {exportData.name} </Modal.Title>
131143
</Modal.Header>
132144
<Modal.Body>
133-
<div>
134-
<Shape
135-
name={exportData.name}
136-
formula={shape.formula}
137-
width={`${exportData.width}px`}
138-
height={`${exportData.height}px`}
139-
backgroundColor={exportData.backgroundColor}
140-
id={getShapeId(exportData.name, true)}
141-
/>
142-
</div>
143-
<form>
144-
<div>
145-
<label htmlFor="export-name">Name</label>
146-
<input
147-
type="text"
148-
name="name"
149-
id="export-name"
150-
value={exportData.name}
151-
onChange={handleChange} />
152-
</div>
153-
154-
<div>
155-
<label htmlFor="export-color">Color</label>
156-
<input
157-
type="color"
158-
name="backgroundColor"
159-
id="export-color"
160-
value={exportData.backgroundColor}
161-
onChange={handleChange} />
162-
</div>
163-
164-
<div>
165-
<label htmlFor="export-width">Set a width(in px)</label>
166-
<input
167-
type="range"
168-
min="100"
169-
max="700"
170-
value={exportData.width}
171-
id="export-width"
172-
name="width"
173-
onChange={handleChange} />
174-
175-
<label htmlFor="export-height">Set a height(in px)</label>
176-
<input
177-
type="range"
178-
min="100"
179-
max="700"
180-
value={exportData.height}
181-
id="export-height"
182-
name="height"
183-
onChange={handleChange} />
184-
</div>
185-
186-
<div>
187-
<Radios
188-
groupName="type"
189-
heading="Export as:"
190-
options={[
191-
{ value: "png", displayValue: "png" },
192-
{ value: "jpeg", displayValue: "jpeg" },
193-
{ value: "svg", displayValue: "svg" },
194-
]}
195-
selectedOption={exportData.type}
196-
onValueChange={handleChange}
197-
/>
198-
</div>
199-
</form>
145+
<Container fluid>
146+
<Row>
147+
<Col>
148+
<Form>
149+
<Form.Group className="mb-3" controlId="export-name">
150+
<Form.Label>Name</Form.Label>
151+
<Form.Control type="text" name="name" value={exportData.name} onChange={handleChange}/>
152+
</Form.Group>
153+
<Form.Group>
154+
<Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
155+
<Form.Control
156+
type="color"
157+
name="backgroundColor"
158+
id="export-color"
159+
value={exportData.backgroundColor}
160+
onChange={handleChange}
161+
className="form-control-color"
162+
/>
163+
</Form.Group>
164+
<Row>
165+
<Form.Group as={Col} controlId="export-width">
166+
<Form.Label>Set a width(in px)</Form.Label>
167+
<Form.Control
168+
type="range"
169+
min="100"
170+
max="700"
171+
value={exportData.width}
172+
id="export-width"
173+
name="width"
174+
onChange={handleChange}/>
175+
</Form.Group>
176+
<Form.Group as={Col} controlId="export-height">
177+
<Form.Label>Set a height(in px)</Form.Label>
178+
<Form.Control
179+
type="range"
180+
min="100"
181+
max="700"
182+
value={exportData.height}
183+
id="export-height"
184+
name="height"
185+
onChange={handleChange}/>
186+
</Form.Group>
187+
</Row>
188+
189+
{/* <div>
190+
<label htmlFor="export-name">Name</label>
191+
<input
192+
type="text"
193+
name="name"
194+
id="export-name"
195+
value={exportData.name}
196+
onChange={handleChange} />
197+
</div> */}
198+
199+
{/* <div>
200+
<label htmlFor="export-color">Color</label>
201+
<input
202+
type="color"
203+
name="backgroundColor"
204+
id="export-color"
205+
value={exportData.backgroundColor}
206+
onChange={handleChange} />
207+
</div> */}
208+
209+
{/* <div>
210+
<label htmlFor="export-width">Set a width(in px)</label>
211+
<input
212+
type="range"
213+
min="100"
214+
max="700"
215+
value={exportData.width}
216+
id="export-width"
217+
name="width"
218+
onChange={handleChange} />
219+
220+
<label htmlFor="export-height">Set a height(in px)</label>
221+
<input
222+
type="range"
223+
min="100"
224+
max="700"
225+
value={exportData.height}
226+
id="export-height"
227+
name="height"
228+
onChange={handleChange} />
229+
</div> */}
230+
231+
<div>
232+
<Form.Group>
233+
<Form.Label>File Format</Form.Label>
234+
<div>
235+
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-dark" size="sm" defaultValue={'png'}>
236+
<ToggleButton id="tbg-radio-1" value={'png'} variant="outline-dark">
237+
PNG
238+
</ToggleButton>
239+
<ToggleButton id="tbg-radio-2" value={'jpeg'} variant="outline-dark">
240+
JPEG
241+
</ToggleButton>
242+
<ToggleButton id="tbg-radio-3" value={'svg'} variant="outline-dark">
243+
SVG
244+
</ToggleButton>
245+
</ToggleButtonGroup>
246+
</div>
247+
</Form.Group>
248+
<Radios
249+
groupName="type"
250+
heading="Export as:"
251+
options={[
252+
{ value: "png", displayValue: "PNG" },
253+
{ value: "jpeg", displayValue: "JPEG" },
254+
{ value: "svg", displayValue: "SVG" },
255+
]}
256+
selectedOption={exportData.type}
257+
onValueChange={handleChange}
258+
/>
259+
</div>
260+
261+
</Form>
262+
</Col>
263+
<Col>
264+
<ShapeContainer>
265+
<Shape
266+
name={exportData.name}
267+
formula={shape.formula}
268+
width={`${exportData.width}px`}
269+
height={`${exportData.height}px`}
270+
backgroundColor={exportData.backgroundColor}
271+
id={getShapeId(exportData.name, true)}
272+
/>
273+
</ShapeContainer>
274+
</Col>
275+
</Row>
276+
</Container>
200277
</Modal.Body>
201278

202279
<Modal.Footer>
203-
<Button
280+
<Button variant="outline-info">
281+
Cancel
282+
</Button>
283+
<Button variant="secondary"
204284
onClick={() => doExport(getShapeId(exportData.name, true), exportData.name)}
205285
>
206286
Export
207287
</Button>
288+
208289
</Modal.Footer>
209290
</Modal>
210291
)}

‎components/core/Landing.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import Col from 'react-bootstrap/Col'
99
import { Header } from '..'
1010

1111
// Images
12-
import BannerBg from '../../public/images/bg-banner.png'
12+
import BannerBg from '../../public/images/bg-banner.png';
13+
import ImgLogo from '../../public/images/img-logo.svg';
1314

1415
// icon
1516
import { AiOutlineGateway, AiOutlineFileImage, AiFillGithub, AiOutlineInstagram, AiOutlineTwitter, AiOutlineLink } from "react-icons/ai";
@@ -54,6 +55,7 @@ const BannerHeader = styled.div`
5455
padding: 0.48rem 1.4rem;
5556
border: solid 1px var(--color-primary-accent);
5657
background-color: var(--color-primary-accent);
58+
font-size: var(--fs-rg);
5759
font-weight: var(--fw-bold);
5860
color: var(--color-neutral-90);
5961
@@ -145,15 +147,11 @@ const BannerBodyActions = styled.div`
145147
`;
146148

147149
const Logo = styled.h1`
148-
display: flex;
149-
grid-gap: 0.6rem;
150-
align-items: flex-start;
151-
font-size: 1.4rem;
152-
color: var(--color-neutral-10);
153-
font-weight: var(--fw-semibold);
150+
width: 152px;
151+
height: 32px;
152+
background-image: url(${ImgLogo});
154153
margin: 0;
155154
line-height: 1;
156-
padding: 0.6rem 0.8rem;
157155
`;
158156

159157
const Navigation = styled.div`
@@ -343,7 +341,7 @@ const Landing = ({ setOpen, user, setUser }) => {
343341
<div>
344342
<LandingBanner>
345343
<BannerHeader>
346-
<Logo><AiOutlineGateway /><div>TryShape</div></Logo>
344+
<Logo><div className="sr-only">TryShape</div></Logo>
347345
<Navigation>
348346
<a data-scroll href="#keyfeatures">Key Features</a>
349347
<a data-scroll href="#filesupport">File Support</a>

‎components/core/SignInModal.js‎

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

33
// icons
44
import { FaGithub, FaGoogle } from "react-icons/fa";
5+
import { FcGoogle } from "react-icons/fc";
56

67
// Button
78
import Button from "react-bootstrap/Button";
@@ -23,7 +24,7 @@ const SignInModal = ({ open, setOpen }) => {
2324
};
2425
return (
2526
<Modal
26-
size="lg"
27+
size="md"
2728
aria-labelledby="contained-modal-title-vcenter"
2829
show={ open }
2930
onHide={() => setOpen(false)}
@@ -35,14 +36,13 @@ const SignInModal = ({ open, setOpen }) => {
3536
</Modal.Title>
3637
</Modal.Header>
3738
<Modal.Body>
38-
<div className="flex">
39-
<Button onClick={() => handleOnClick(googleProvider)}>
40-
Sign In with Google <FaGoogle />
39+
<div className="d-flex flex-column align-items-center">
40+
<Button variant="outline-dark" size="lg" onClick={() => handleOnClick(googleProvider)} className='mt-5 mb-2'>
41+
<FcGoogle size='24px'/> Sign In with Google
4142
</Button>
4243

43-
<Button onClick={() => handleOnClick(githubProvider)}>
44-
Sign In with Github
45-
<FaGithub />
44+
<Button variant="outline-dark" size="lg" onClick={() => handleOnClick(githubProvider)} className='mt-2 mb-5'>
45+
<FaGithub size='24px' /> Sign In with Github
4646
</Button>
4747
</div>
4848
</Modal.Body>

0 commit comments

Comments
 (0)