aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-13 20:35:48 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-13 20:36:01 +0800
commit9fda63cf74ea77e01634d2a91e773d4fa3ed68b7 (patch)
treed299fa03ced0876f43efaba02e889f12b618d4d5
parent4cf900631ce7c5dec9d2d38d2918a2fb6e3b75cc (diff)
downloaddexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar.gz
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar.bz2
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar.lz
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar.xz
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.tar.zst
dexon-sol-tools-9fda63cf74ea77e01634d2a91e773d4fa3ed68b7.zip
Mobile tweaks to contactm modal
-rw-r--r--packages/website/ts/@next/components/modals/input.tsx13
-rw-r--r--packages/website/ts/@next/components/modals/modal_contact.tsx62
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>`