From 9d679a594c9ff19c267f885417f8222f137eedb3 Mon Sep 17 00:00:00 2001
From: Nisar Hassan Naqvi <syednisarhassan12@gmail.com>
Date: Wed, 18 Nov 2020 12:47:57 +0000
Subject: [PATCH] wip.

---
 src/components/MinimalFooter.tsx |  41 +++++++++++
 src/components/Nav.tsx           | 121 ++++++++++++++++---------------
 src/layouts/index.tsx            |   9 ++-
 src/pages/deletion.tsx           |  10 +++
 src/styles/variables.ts          |   3 +-
 5 files changed, 122 insertions(+), 62 deletions(-)
 create mode 100644 src/components/MinimalFooter.tsx
 create mode 100644 src/pages/deletion.tsx

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 = () => (
+    <StyledMinimalFooter role="footer">
+        <div className="row">
+            <p>Copyright TypeFox All Right Reserved</p>
+            <div>
+                <Link to="/imprint">Imprint</Link>
+                <Link to="/terms">Terms of Service</Link>
+                <Link to="/privacy">Privacy Policy</Link>
+            </div>
+        </div>
+    </StyledMinimalFooter>
+)
+
+export default MinimalFooter
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 00393ad1b..5c22e4475 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 = () => {
@@ -242,66 +242,71 @@ const Nav = () => {
                 <StyledNav role="navigation" className="nav">
                     <div className="nav__burger-container">
                         <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
+                        }
+                        {
+                            isAFlowPage ? <a className="btn">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='/self-hosted/' className="link">Self-Hosted</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
-                        <li className="nav__item">
-                            <DropDown
-                                title="Resources"
-                                links={[
-                                    {
-                                        text: 'Docs',
-                                        to: '/docs/'
-                                    },
-                                    {
-                                        text: 'Blog',
-                                        to: '/blog/'
-                                    },
-                                    {
-                                        text: 'Community',
-                                        to: 'https://community.gitpod.io/',
-                                        target: true
-                                    }
-                                ]}
-                            />
-                        </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='/self-hosted/' className="link">Self-Hosted</Link></li>
+                            <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
+                            <li className="nav__item">
+                                <DropDown
+                                    title="Resources"
+                                    links={[
+                                        {
+                                            text: 'Docs',
+                                            to: '/docs/'
+                                        },
+                                        {
+                                            text: 'Blog',
+                                            to: '/blog/'
+                                        },
+                                        {
+                                            text: 'Community',
+                                            to: 'https://community.gitpod.io/',
+                                            target: true
+                                        }
+                                    ]}
+                                />
+                            </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>
         </div>
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;
               <meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
             </Helmet>
             {/* <AnnoucementBanner /> */}
-            <Nav />
+            <Nav isAFlowPage={this.props.isAFlowPage}/>
             <LayoutMain>
               <CookieConsent
                 buttonClasses="primary"
@@ -123,7 +124,9 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
               </CookieConsent>
               {children}
             </LayoutMain>
-            <Footer />
+            {  
+                !this.props.isAFlowPage ? <Footer /> : <MinimalFooter />
+            }
           </LayoutRoot>
         )}
       />
diff --git a/src/pages/deletion.tsx b/src/pages/deletion.tsx
new file mode 100644
index 000000000..63e671d92
--- /dev/null
+++ b/src/pages/deletion.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import IndexLayout from '../layouts'
+
+const DeletionPage = () => (
+    <IndexLayout isAFlowPage={true}>
+        
+    </IndexLayout>
+)
+
+export default DeletionPage
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index b4292d985..238c92314 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -13,7 +13,8 @@ export const colors = {
   offWhite2: '#e5e5e5',
   offWhite3: '#dbdbdb',
   offWhite4: '#e6e6e6',
-  offWhite5: '#C4C4C4'
+  offWhite5: '#C4C4C4',
+  lightGrey: '#9f9f9f',
 }
 
 export const sizes = {