add browser extension flow pages.

gatsby-config.js

@@ -36,7 +36,7 @@ module.exports = {
     {
       // Exclude pages from the page build -- https://www.gatsbyjs.org/packages/gatsby-plugin-exclude/
       resolve: 'gatsby-plugin-exclude',
-      options: { paths: ['/docs/README'] }
+      options: { paths: ['/docs/README', '/extension-uninstall'] }
     },
     {
       resolve: 'gatsby-transformer-remark',

src/components/Footer.tsx

@@ -216,7 +216,7 @@ const Footer: React.SFC<{}> = () => (
                 </ul>
             </div>
             <div className="info">
-                <p>Copyright © <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
+                <p>Copyright &copy; <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
                 <div><Link to="/imprint/">Imprint</Link>&nbsp;|&nbsp;<Link to="/terms/">Terms of Service</Link>&nbsp;|&nbsp;<Link to="/privacy/">Privacy Policy</Link></div>
             </div>
         </div>

src/components/MinimalFooter.tsx

@@ -0,0 +1,45 @@
+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,
+    .link {
+        color: inherit;
+        font-weight: 400;
+    }
+
+    .link {
+        padding: 0 1rem;
+
+        &:not(:last-child) {
+            border-right: 1px solid;
+        }
+    }
+`
+
+const MinimalFooter = () => (
+    <StyledMinimalFooter role="footer">
+        <div className="row">
+            <p>Copyright &copy; <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
+            <div>
+                <Link className="link" to="/imprint">Imprint</Link>
+                <Link className="link" to="/terms">Terms of Service</Link>
+                <Link className="link" to="/privacy">Privacy Policy</Link>
+            </div>
+        </div>
+    </StyledMinimalFooter>
+)
+
+export default MinimalFooter

src/components/MoreInfo.tsx

@@ -5,6 +5,12 @@ import { borders, sizes } from '../styles/variables'
 import { Link } from 'gatsby'
 import MapGrey from '../resources/map-grey.svg'
 
+const StyledMoreInfo = styled.div<{negativeSpaceTop?: string}>`
+    @media(min-width: calc(${sizes.breakpoints.md} + 1px)) {
+        margin-top: ${({negativeSpaceTop}) => negativeSpaceTop };
+    }   
+`
+
 const StyledPricingLinks = styled.section`
   max-width: 850px;
   display: flex;
@@ -62,9 +68,10 @@ export interface PricingLinksProps {
   text?: JSX.Element
   links?: JSX.Element
   backgroundShouldBeWhite?: boolean
+  negativeSpaceTop?: string
 }
 
-const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: PricingLinksProps) => {
+const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, negativeSpaceTop }: PricingLinksProps) => {
   let Img = img
   let Title = title
   let Text = text
@@ -89,9 +96,10 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
     )
   }
   return (
-    <div
+    <StyledMoreInfo
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : ''}}
+      negativeSpaceTop={negativeSpaceTop}
     >
       <div className="row">
         <StyledPricingLinks>
@@ -103,7 +111,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
           </div>
         </StyledPricingLinks>
       </div>
-    </div>
+    </StyledMoreInfo>
   )
 }
 

src/components/Nav.tsx

@@ -5,6 +5,8 @@ import { Link } from 'gatsby'
 import GitpodLogoDark from '../resources/gitpod-logo-dark.svg'
 import { colors, sizes, borders } from '../styles/variables'
 import { Global, css } from '@emotion/core'
+import { getBrowser } from '../utils/helpers'
+import { getBrowserString } from './gitpod-vs-codespaces/Difference'
 
 const StyledNav = styled.nav`
     display: flex;
@@ -207,8 +209,9 @@ const StyledNav = styled.nav`
     }
 `
 
-const Nav = () => {
+const Nav = ({ isAFlowPage, showReInstallExtensionButton }: { isAFlowPage?: boolean; showReInstallExtensionButton?: boolean }) => {
     const [isNavRendered, setIsNavRendered] = useState(false)
+    const [browser, setBrowser] = useState<any>()
 
     const unLock = () => {
         if (window.innerWidth >= 1040) {
@@ -218,6 +221,8 @@ const Nav = () => {
 
     useEffect(() => {
         window.addEventListener('resize', unLock)
+        let usersBrowser = getBrowser(window.navigator.userAgent)
+        setBrowser(getBrowserString(usersBrowser))
 
         return () => {
             window.removeEventListener('resize', unLock)
@@ -239,51 +244,70 @@ const Nav = () => {
             />
             <div className="row">
                 <StyledNav role="navigation" className="nav">
-                    <div className="nav__burger-container">
+                    <div className="nav__burger-container" style={isAFlowPage ? { width: '100%' } : {}}>
                         <Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
-                        <div className="btns">
-                            <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
-                            <div className="nav__btn-container" aria-live="assertive">
-                                <button
-                                    className="nav__btn"
-                                    aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
-                                    onClick={toggleNavigation}
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
-                                        className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
-                                        aria-hidden={isNavRendered ? false : true}
-                                        id="multiply"
+                        {
+                            !isAFlowPage ? <div className="btns">
+                                <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
+                                <div className="nav__btn-container" aria-live="assertive">
+                                    <button
+                                        className="nav__btn"
+                                        aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
+                                        onClick={toggleNavigation}
                                     >
-                                        <title>close menu icon</title>
-                                        <path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
-                                    </svg>
-                                    <svg
-                                        className={isNavRendered ? 'is-hidden' : 'is-shown'}
-                                        aria-hidden={isNavRendered ? true : false}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 26 18"
-                                        id="hamburger"
-                                    >
-                                        <title>hamburger menu icon</title>
-                                        <g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
+                                            className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
+                                            aria-hidden={isNavRendered ? false : true}
+                                            id="multiply"
+                                        >
+                                            <title>close menu icon</title>
+                                            <path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
+                                        </svg>
+                                        <svg
+                                            className={isNavRendered ? 'is-hidden' : 'is-shown'}
+                                            aria-hidden={isNavRendered ? true : false}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 26 18"
+                                            id="hamburger"
+                                        >
+                                            <title>hamburger menu icon</title>
+                                            <g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div> : null
+                        }
+                        {
+                            showReInstallExtensionButton ? <a
+                                className="btn"
+                                href={
+                                    browser === 'Firefox'
+                                        ? 'https://addons.mozilla.org/en-GB/firefox/addon/gitpod/'
+                                        : 'https://chrome.google.com/webstore/detail/gitpod-dev-environments-i/dodmmooeoklaejobgleioelladacbeki'
+                                }
+                                target="_blank"
+                            >
+                                Reinstall Extension
+                            </a> : null
+                        }
                     </div>
 
 
-                    <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
-                        <li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/screencasts/' className="link">Screencasts</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Install</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/docs/' className="link">Docs</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/blog/' className="link">Blog</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='https://community.gitpod.io/' target='true' className="link">Community</Link></li>
-                        <li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
-                    </ul>
+                    {
+                        !isAFlowPage ? (
+                            <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
+                                <li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/screencasts/' className="link">Screencasts</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Install</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/docs/' className="link">Docs</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/blog/' className="link">Blog</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='https://community.gitpod.io/' target='true' className="link">Community</Link></li>
+                                <li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
+                            </ul>
+                        ) : null
+                    }
 
                 </StyledNav>
             </div>

src/components/extension-uninstall/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<HTMLInputElement>) => {
+        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<HTMLTextAreaElement>) => {
+        setState({
+            ...state,
+            [e.target.name]: e.target.value
+        })
+    }
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        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 (
+        <StyledForm
+            method="POST"
+            name="Extension Deletion"
+            onSubmit={handleSubmit}
+        >
+            {
+                !state.messageSent ? (
+                <>
+                    <input type="hidden" name="form-name" value="extension-deletion" />
+                    <h3>Why did you uninstall the browser extension?</h3>
+                    <p>Check all that apply:</p>
+                    <div>
+                        <label>
+                            <input type="checkbox" onChange={handleChange} name="usage" data-text="I never used it" />
+                                I never used it
+                        </label>
+                        <label>
+                            <input type="checkbox" onChange={handleChange} name="configuring" data-text="I have problems configuring my projects" />
+                                I have problems configuring my projects
+                        </label>
+                        <label>
+                            <input type="checkbox" onChange={handleChange} name="local" data-text="I prefer my local development" />
+                                I prefer my local development
+                        </label>
+                        <label>
+                            <input type="checkbox" onChange={handleChange} name="expected" data-text="Gitpod isn’t what I expected" />
+                                Gitpod isn’t what I expected
+                        </label>
+                        <textarea onChange={handleTextAreaChange} aria-label="Do you have any other feedback?" placeholder="Do you have any other feedback?" name="otherFeedback"></textarea>
+                        <button className="btn" disabled={!state.feedback && !state.otherFeedback}>Send</button>
+                    </div>
+                </>) : ( 
+                <div className="sucess">
+                    <img src={tick} className="tick" alt="Tick" />
+                    <h3>Thanks for your Feedback</h3>
+                </div> 
+                )
+            }
+        </StyledForm>
+    )
+}
+
+export default Form