diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/modals/input.tsx | 13 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/modals/modal_contact.tsx | 62 |
2 files changed, 58 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index eee2d4102..351df105b 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -22,11 +22,12 @@ interface LabelProps { export const Input = React.forwardRef((props: InputProps, ref) => { const { name, label, type } = props; const id = `input-${name}`; + const componentType = type === 'textarea' ? 'textarea' : 'input'; return ( <InputWrapper {...props}> <Label htmlFor={id}>{label}</Label> - <StyledInput ref={ref} id={id} placeholder={label} {...props} /> + <StyledInput as={componentType} ref={ref} id={id} placeholder={label} {...props} /> </InputWrapper> ); }); @@ -41,12 +42,13 @@ const StyledInput = styled.input` border: 1px solid #D5D5D5; color: #000; font-size: 1.294117647rem; - padding: 16px 15px; + padding: 16px 15px 14px; outline: none; width: 100%; + min-height: ${props => props.type === 'textarea' && `120px`}; &::placeholder { - color: #9D9D9D; + color: #C3C3C3; } `; @@ -54,6 +56,11 @@ const InputWrapper = styled.div<InputProps>` position: relative; flex-grow: ${props => props.width === InputWidth.Full && 1}; width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`}; + + @media (max-width: 768px) { + width: 100%; + margin-bottom: 30px; + } `; const Label = styled.label` diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx index a63ab50c0..962a9ab19 100644 --- a/packages/website/ts/@next/components/modals/modal_contact.tsx +++ b/packages/website/ts/@next/components/modals/modal_contact.tsx @@ -34,6 +34,7 @@ export class ModalContact extends React.Component<Props> { public state = { isSubmitting: false, isSuccessful: false, + errors: {}, }; public constructor(props: Props) { super(props); @@ -45,7 +46,7 @@ export class ModalContact extends React.Component<Props> { return ( <> <DialogOverlay - style={{ background: 'rgba(0, 0, 0, 0.75)' }} + style={{ background: 'rgba(0, 0, 0, 0.75)', zIndex: 2 }} isOpen={isOpen} onDismiss={onDismiss} > @@ -85,10 +86,10 @@ export class ModalContact extends React.Component<Props> { <Input name="comments" label="Anything else?" - type="text" + type="textarea" /> </InputRow> - <InputRow> + <ButtonRow> <Button color="#5C5C5C" isNoBorder={true} @@ -99,7 +100,7 @@ export class ModalContact extends React.Component<Props> { Back </Button> <Button>Submit</Button> - </InputRow> + </ButtonRow> </Form> <Confirmation isSuccessful={isSuccessful}> <Icon name="checkmark" size="large" /> @@ -116,33 +117,41 @@ export class ModalContact extends React.Component<Props> { e.preventDefault(); // const email = this.emailInput.current.value; - const email = 'fred@sjelfull.no'; + const email = ''; + const name = ''; + const projectOrCompany = ''; + const link = ''; + const comments = ''; this.setState({ ...this.state, isSubmitting: true }); try { - const response = await fetch('/email', { + const response = await fetch('https://website-api.0xproject.com/leads', { method: 'post', + mode: 'cors', + credentials: 'same-origin', headers: { 'content-type': 'application/json; charset=utf-8', }, - body: JSON.stringify({ email }), + body: JSON.stringify({ email, projectOrCompany, link, comments }), }); const json = await response.json(); - console.log(response.json()); + this.setState({ ...this.state, isSuccessful: true }); + + console.log(response); } catch (e) { + this.setState({ ...this.state, errors: [] }); console.log(e); } - - this.setState({ ...this.state, isSuccessful: true }); } private async _onDone(e): void { e.preventDefault(); this.props.onDismiss(); } -}; +} +// Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]} const StyledWrap = styled(Wrap)` padding-top: 20px; @@ -162,11 +171,30 @@ const StyledWrap = styled(Wrap)` `; const InputRow = styled.div` - display: flex; - justify-content: space-between; - margin-bottom: 30px; width: 100%; flex: 0 0 auto; + + @media (min-width: 768px) { + display: flex; + justify-content: space-between; + margin-bottom: 30px; + } +`; + +const ButtonRow = styled(InputRow)` + @media (max-width: 768px) { + display: flex; + flex-direction: column; + + button:nth-child(1) { + order: 2; + } + + button:nth-child(2) { + order: 1; + margin-bottom: 10px; + } + } `; const StyledDialogContent = styled(DialogContent)` @@ -174,6 +202,12 @@ const StyledDialogContent = styled(DialogContent)` max-width: 800px; background-color: #F6F6F6 !important; padding: 60px 60px !important; + + @media (max-width: 768px) { + width: calc(100vw - 40px) !important; + margin: 40px auto !important; + padding: 30px 30px !important; + } `; const Form = styled.form<FormProps>` |