From cd4e679db79c37d4a2712de1064f952a3ce83585 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 17 Dec 2018 11:58:37 -0800 Subject: apply prettier --- .../ts/@next/components/newsletter_form.tsx | 59 +++++++++++++++++----- 1 file changed, 45 insertions(+), 14 deletions(-) (limited to 'packages/website/ts/@next/components/newsletter_form.tsx') diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx index 6dc4bf678..f7cc43964 100644 --- a/packages/website/ts/@next/components/newsletter_form.tsx +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -3,7 +3,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; interface FormProps { theme: ThemeValuesInterface; @@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref - + ); @@ -39,17 +41,34 @@ class Form extends React.Component { isSubmitted: false, }; public render(): React.ReactNode { - const {isSubmitted} = this.state; - const {theme} = this.props; + const { isSubmitted } = this.state; + const { theme } = this.props; return ( - + - - + + 🎉 Thank you for signing up! @@ -77,7 +96,7 @@ class Form extends React.Component { body: JSON.stringify({ email, referrer }), }); } catch (e) { - // dosomething + // dosomething } } } @@ -92,7 +111,10 @@ const StyledForm = styled.form` margin-top: 27px; `; -const StyledInput = styled.input` +const StyledInput = + styled.input < + InputProps > + ` appearance: none; background-color: transparent; border: 0; @@ -112,7 +134,10 @@ const InputWrapper = styled.div` position: relative; `; -const InnerInputWrapper = styled.div` +const InnerInputWrapper = + styled.div < + ArrowProps > + ` opacity: ${props => props.isSubmitted && 0}; visibility: ${props => props.isSubmitted && 'hidden'}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; @@ -143,7 +168,10 @@ const Text = styled.p` margin-top: 15px; `; -const SuccessText = styled.p` +const SuccessText = + styled.p < + ArrowProps > + ` color: #B1B1B1; font-size: 1rem; font-weight: 300; @@ -154,13 +182,16 @@ const SuccessText = styled.p` top: 0; text-align: left; right: 50px; - opacity: ${props => props.isSubmitted ? 1 : 0}; - visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'}; + opacity: ${props => (props.isSubmitted ? 1 : 0)}; + visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; transition-delay: 0.55s; `; -const Arrow = styled.svg` +const Arrow = + styled.svg < + ArrowProps > + ` transform: ${props => props.isSubmitted && `translateX(44px)`}; transition: transform 0.25s ease-in-out; `; -- cgit