From ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 11 Dec 2018 15:02:56 +0100 Subject: Rename form file --- packages/website/ts/@next/components/footer.tsx | 2 +- .../website/ts/@next/components/newsletterForm.tsx | 156 -------------------- .../ts/@next/components/newsletter_form.tsx | 160 +++++++++++++++++++++ 3 files changed, 161 insertions(+), 157 deletions(-) delete mode 100644 packages/website/ts/@next/components/newsletterForm.tsx create mode 100644 packages/website/ts/@next/components/newsletter_form.tsx diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 4c6adfae8..9c2ed1ea8 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -7,7 +7,7 @@ import { colors } from 'ts/style/colors'; import { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; -import { NewsletterForm } from 'ts/@next/components/newsletterForm'; +import { NewsletterForm } from 'ts/@next/components/newsletter_form'; interface FooterInterface { } diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx deleted file mode 100644 index ab962f046..000000000 --- a/packages/website/ts/@next/components/newsletterForm.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -interface Props { -} - -interface InputProps { - isSubmitted: boolean; - name: string; - label: string; - type: string; -} - -interface ArrowProps { - isSubmitted: boolean; -} - -const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => { - const { name, label, type } = props; - const id = `input-${name}`; - - return ( - - - - - ); -}; - -export class NewsletterForm extends React.Component { - public emailInput = React.createRef(); - public state = { - isSubmitted: false, - }; - public render(): React.ReactNode { - const {isSubmitted} = this.state; - - return ( - - - - - - - - - - 🎉 Thank you for signing up! - - Subscribe to our newsletter for updates in the 0x ecosystem - - ); - } - - private async _onSubmit(e) { - e.preventDefault(); - - const email = this.emailInput.current.value; - - this.setState({ isSubmitted: true }); - - try { - const response = await fetch('/email', { - method: 'post', - headers: { - 'content-type': 'application/json; charset=utf-8', - }, - body: JSON.stringify({ email }), - }); - const json = await response.json(); - - console.log(response.json()); - } catch (e) { - console.log(e); - } - } -} - -const StyledForm = styled.form` - appearance: none; - border: 0; - color: ${colors.white}; - padding: 13px 0 14px; - margin-top: 27px; -`; - -const StyledInput = styled.input` - appearance: none; - background-color: transparent; - border: 0; - border-bottom: 1px solid #393939; - color: #B1B1B1; // #9D9D9D on light theme - font-size: 1.294117647rem; - padding: 15px 0; - outline: none; - width: 100%; -`; - -const InputWrapper = styled.div` - position: relative; -`; - -const InnerInputWrapper = styled.div` - opacity: ${props => props.isSubmitted && 0}; - visibility: ${props => props.isSubmitted && 'hidden'}; - transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; - transition-delay: 0.30s; -`; - -const SubmitButton = styled.button` - width: 44px; - height: 44px; - background-color: transparent; - border: 0; - position: absolute; - right: 0; - top: calc(50% - 22px); - overflow: hidden; - outline: 0; - - &:focus-within { - background-color: #eee; - } -`; - -const Text = styled.p` - color: #656565; - font-size: 0.833333333rem; - font-weight: 300; - line-height: 1.2em; - margin-top: 15px; -`; - -const SuccessText = styled.p` - color: #B1B1B1; - font-size: 1rem; - font-weight: 300; - line-height: 1.2em; - padding-top: 25px; - position: absolute; - left: 0; - top: 0; - text-align: center; - right: 50px; - 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` - transform: ${props => props.isSubmitted && `translateX(44px)`}; - transition: transform 0.25s ease-in-out; -`; diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx new file mode 100644 index 000000000..3277f7f2e --- /dev/null +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -0,0 +1,160 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +interface Props { +} + +interface InputProps { + isSubmitted: boolean; + name: string; + label: string; + type: string; +} + +interface ArrowProps { + isSubmitted: boolean; +} + +const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => { + const { name, label, type } = props; + const id = `input-${name}`; + + return ( + + + + + ); +}; + +export class NewsletterForm extends React.Component { + public emailInput = React.createRef(); + public state = { + isSubmitted: false, + }; + public render(): React.ReactNode { + const {isSubmitted} = this.state; + + return ( + + + + + + + + + + 🎉 Thank you for signing up! + + Subscribe to our newsletter for updates in the 0x ecosystem + + ); + } + + private async _onSubmit(e) { + e.preventDefault(); + + const email = this.emailInput.current.value; + + this.setState({ isSubmitted: true }); + + try { + const response = await fetch('/email', { + method: 'post', + headers: { + 'content-type': 'application/json; charset=utf-8', + }, + body: JSON.stringify({ email }), + }); + const json = await response.json(); + + console.log(response.json()); + } catch (e) { + console.log(e); + } + } +} + +const StyledForm = styled.form` + appearance: none; + border: 0; + color: ${colors.white}; + padding: 13px 0 14px; + margin-top: 27px; +`; + +const StyledInput = styled.input` + appearance: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid #393939; + color: #fff; + font-size: 1.294117647rem; + padding: 15px 0; + outline: none; + width: 100%; + + &::placeholder { + color: #B1B1B1; // #9D9D9D on light theme + } +`; + +const InputWrapper = styled.div` + position: relative; +`; + +const InnerInputWrapper = styled.div` + opacity: ${props => props.isSubmitted && 0}; + visibility: ${props => props.isSubmitted && 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.30s; +`; + +const SubmitButton = styled.button` + width: 44px; + height: 44px; + background-color: transparent; + border: 0; + position: absolute; + right: 0; + top: calc(50% - 22px); + overflow: hidden; + outline: 0; + + &:focus-within { + //background-color: #eee; + } +`; + +const Text = styled.p` + color: #656565; + font-size: 0.833333333rem; + font-weight: 300; + line-height: 1.2em; + margin-top: 15px; +`; + +const SuccessText = styled.p` + color: #B1B1B1; + font-size: 1rem; + font-weight: 300; + line-height: 1.2em; + padding-top: 25px; + position: absolute; + left: 0; + top: 0; + text-align: left; + right: 50px; + 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` + transform: ${props => props.isSubmitted && `translateX(44px)`}; + transition: transform 0.25s ease-in-out; +`; -- cgit