From 8b6cabd5f29dbbdcb03eaba57e1457dba54487ff Mon Sep 17 00:00:00 2001 From: Nisar Hassan Naqvi Date: Tue, 1 Dec 2020 15:25:31 +0000 Subject: [PATCH] wip. --- src/components/MinimalFooter.tsx | 41 ++++ src/components/Nav.tsx | 123 +++++----- src/components/extension-deletion/Form.tsx | 142 ++++++++++++ src/components/extension-deletion/Message.tsx | 47 ++++ src/functions/submit-form.ts | 10 +- src/layouts/index.tsx | 9 +- src/pages/extension-activation.tsx | 210 ++++++++++++++++++ src/pages/extension-deletion.tsx | 57 +++++ src/resources/code-together.svg | 1 + src/resources/extension-screenshot.png | Bin 0 -> 73017 bytes src/resources/sven-signature-style-name.svg | 3 + src/resources/sven.png | Bin 0 -> 31845 bytes src/styles/base.ts | 7 +- src/styles/variables.ts | 8 +- 14 files changed, 587 insertions(+), 71 deletions(-) create mode 100644 src/components/MinimalFooter.tsx create mode 100644 src/components/extension-deletion/Form.tsx create mode 100644 src/components/extension-deletion/Message.tsx create mode 100644 src/pages/extension-activation.tsx create mode 100644 src/pages/extension-deletion.tsx create mode 100644 src/resources/code-together.svg create mode 100644 src/resources/extension-screenshot.png create mode 100644 src/resources/sven-signature-style-name.svg create mode 100644 src/resources/sven.png diff --git a/src/components/MinimalFooter.tsx b/src/components/MinimalFooter.tsx new file mode 100644 index 000000000..ac79751fd --- /dev/null +++ b/src/components/MinimalFooter.tsx @@ -0,0 +1,41 @@ +import React from 'react' + +import styled from '@emotion/styled' +import { Link } from 'gatsby' +import { colors } from '../styles/variables' + +const StyledMinimalFooter = styled.footer` + padding: 5rem 0 6rem; + text-align: center; + color: ${colors.lightGrey}; + background: ${colors.offWhite}; + + p { + margin-bottom: 2rem; + } + + a { + padding: 0 1rem; + color: inherit; + font-weight: 400; + + &:not(:last-child) { + border-right: 1px solid; + } + } +` + +const MinimalFooter = () => ( + +
+

Copyright TypeFox All Right Reserved

+
+ Imprint + Terms of Service + Privacy Policy +
+
+ +) + +export default MinimalFooter diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 00393ad1b..ea70813ab 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -208,7 +208,7 @@ const StyledNav = styled.nav` } ` -const Nav = () => { +const Nav = ({ isAFlowPage }: { isAFlowPage?: boolean }) => { const [isNavRendered, setIsNavRendered] = useState(false) const unLock = () => { @@ -240,68 +240,73 @@ const Nav = () => { />
-
+
Gitpod Logo -
- Log In -
- -
-
+ + close menu icon + + + + hamburger menu icon + + + +
+
: null + } + { + isAFlowPage ? Reinstall Extension : null + }
- - - + { + !isAFlowPage ? : null + } diff --git a/src/components/extension-deletion/Form.tsx b/src/components/extension-deletion/Form.tsx new file mode 100644 index 000000000..f91445091 --- /dev/null +++ b/src/components/extension-deletion/Form.tsx @@ -0,0 +1,142 @@ +import React, { useState, useEffect } from 'react' +import styled from '@emotion/styled' +import { borders } from '../../styles/variables' +import { Email } from '../../functions/submit-form' +import tick from '../../resources/tick.svg' + +const StyledForm = styled.form` + p { + margin-bottom: 1.2rem; + } + + label, textarea { + display: flex; + align-items: center; + } + + label { + &:not(:last-of-type) { + margin-bottom: .7rem; + } + } + + textarea { + width: 100%; + min-height: 100px; + margin: 1.5rem 0; + padding: 1rem; + border: ${borders.light2}; + border-radius: 3px; + } + + input { + margin-right: 1rem; + } + + .sucess { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + } + + .tick { + margin-bottom: 3rem; + } +` + +const Form = () => { + const [state, setState] = useState<{ + feedback: string + otherFeedback?: string + messageSent?: boolean + }>({ + feedback: '' + }) + + useEffect(() => { + console.log(state) + }, [state]) + + const handleChange = (e: React.ChangeEvent) => { + const text = e.target.getAttribute('data-text') + setState({ + ...state, + feedback: e.target.checked ? state.feedback + `\n${text}` : state.feedback.replace(`\n${text}`, '') + }) + } + + const handleTextAreaChange = (e: React.ChangeEvent) => { + setState({ + ...state, + [e.target.name]: e.target.value + }) + } + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + + const email: Email = { + subject: 'Why did I uninstall the browser extension?', + feedback: state.feedback, + otherFeedback: state.otherFeedback + } + + fetch('/.netlify/functions/submit-form', { + method: 'POST', + body: JSON.stringify(email) + }) + .then(() => + setState({ + ...state, + messageSent: true + }) + ) + .catch((error) => alert(error)) + } + + return ( + + { + !state.messageSent ? ( + <> + +

Why did you uninstall the browser extension?

+

Check all that apply:

+
+ + + + + + +
+ ) : ( +
+ Tick +

Thanks for your Feedback

+
+ ) + } + + ) +} + +export default Form diff --git a/src/components/extension-deletion/Message.tsx b/src/components/extension-deletion/Message.tsx new file mode 100644 index 000000000..3a0163613 --- /dev/null +++ b/src/components/extension-deletion/Message.tsx @@ -0,0 +1,47 @@ +import React from 'react' +import Sven from '../../resources/sven.png' +import SvenName from '../../resources/sven-signature-style-name.svg' +import styled from '@emotion/styled' +import { colors } from '../../styles/variables' + +const StyledMessage = styled.blockquote` + padding: 4rem 5rem; + background: ${colors.offWhite}; + + @media(min-width: 1001px) { + min-width: 400px; + } + + .sig { + display: block; + margin-top: 1.5rem; + } + + .ceo { + display: flex; + align-items: center; + margin-top: 5rem; + + img { + height: 6rem; + margin-right: 1rem; + } + } +` + +const Message = () => ( + +

Hey there,

+

It’d be great if you could shortly let us know why you uninstalled the browser extension.

+

We’d like your feedback to understand how we can make Gitpod more useful. We’re committed to improving it, and we’re hoping to see you soon again. +

+

Best,

+ Sven +
+ Sven Efftinge +

Co-Founder & CEO

+
+ +) + +export default Message diff --git a/src/functions/submit-form.ts b/src/functions/submit-form.ts index faa1f458b..4cec7894c 100644 --- a/src/functions/submit-form.ts +++ b/src/functions/submit-form.ts @@ -6,17 +6,19 @@ export interface Email { email: string, name?: string }, - from: { + from?: { email: string, name?: string } subject: string, - message: string + message?: string, + feedback?: string, + otherFeedback?: string } async function sendEmail(client: client.MailService, email: Email): Promise<{statusCode: number, errorMessage?: string}> { const data: client.MailDataRequired = { - from: email.from, + from: email.from || '', subject: email.subject, to: [ email.to! @@ -24,7 +26,7 @@ async function sendEmail(client: client.MailService, email: Email): Promise<{sta content: [ { type: "text/plain", - value: email.message + value: `${email.message ? email.message : `${email.feedback}\n${email.otherFeedback}`}` } ] } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 420bd3c6e..ea3c24ba1 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -12,6 +12,7 @@ import LayoutRoot from '../components/LayoutRoot' import LayoutMain from '../components/LayoutMain' import Nav from '../components/Nav' import Footer from '../components/Footer' +import MinimalFooter from '../components/MinimalFooter' // import AnnoucementBanner from '../components/AnnouncementBanner' type StaticQueryProps = { @@ -24,7 +25,7 @@ type StaticQueryProps = { } } -class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string }, {}> { +class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean }, {}> { handleFirstTab = (e: any) => { if (e.key === 'Tab') { // the "I am a keyboard user" key @@ -90,7 +91,7 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string; {/* */} -