diff options
| author |  ks129 <[email protected]> | 2021-01-21 20:13:51 +0200 |
|---|---|---|
| committer | ks129 <[email protected]> | 2021-01-21 20:13:51 +0200 |
| commit | 8d3469e69d1030b5d83108c6e967bffbb9e1d9a9 (patch) | |
| tree | 4d7454671f805f07d6c6861318311dac5970196a /src | |
| parent | Implement dynamic showing of form submitted text (diff) | |
Use relative units
Diffstat (limited to 'src')
| -rw-r--r-- | src/commonStyles.tsx | 4 | ||||
| -rw-r--r-- | src/components/ErrorMessage.tsx | 6 | ||||
| -rw-r--r-- | src/pages/FormPage.tsx | 3 |
3 files changed, 7 insertions, 6 deletions
diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index cbfc40a..2caa77e 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -54,8 +54,8 @@ const textInputs = css` const invalidStyles = css` .invalid-box { -webkit-appearance: none; - -webkit-box-shadow: 0 0 10px ${colors.error}; - box-shadow: 0 0 10px ${colors.error}; + -webkit-box-shadow: 0 0 0.6rem ${colors.error}; + box-shadow: 0 0 0.6rem ${colors.error}; border: none; } `; diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index 55e3759..1cf3cbc 100644 --- a/src/components/ErrorMessage.tsx +++ b/src/components/ErrorMessage.tsx @@ -9,9 +9,9 @@ interface ErrorMessageProps { const styles = css` color: ${colors.error}; - font-size: 18px; - line-height: 15px; - margin: 15px 0 0; + font-size: 1.15rem; + line-height: 1.1rem; + margin: 1rem 0 0; `; export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null { diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index 72b073f..21303ab 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -107,11 +107,12 @@ function FormPage(): JSX.Element { useEffect(() => { getForm(id).then(form => { setForm(form); + setSent(true); }); }, []); if (form && sent) { - const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`; + const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 15.5rem;`; const divStyle = css`width: 80%;`; return ( <div> |