Skip to content
This repository has been archived by the owner on Apr 19, 2021. It is now read-only.

Commit

Permalink
wip.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nisarhassan12
nisarhassan12 committed Nov 19, 2020
1 parent 645c594 commit 31d62e4
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 63 deletions.
41 changes: 41 additions & 0 deletions src/components/MinimalFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
123 changes: 64 additions & 59 deletions src/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ const StyledNav = styled.nav`
}
`

const Nav = () => {
const Nav = ({ isAFlowPage }: { isAFlowPage?: boolean }) => {
const [isNavRendered, setIsNavRendered] = useState(false)

const unLock = () => {
Expand Down Expand Up @@ -240,68 +240,73 @@ 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
}
{
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>
Expand Down
9 changes: 6 additions & 3 deletions src/layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -123,7 +124,9 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
</CookieConsent>
{children}
</LayoutMain>
<Footer />
{
!this.props.isAFlowPage ? <Footer /> : <MinimalFooter />
}
</LayoutRoot>
)}
/>
Expand Down
45 changes: 45 additions & 0 deletions src/pages/deletion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react'
import IndexLayout from '../layouts'

import styled from '@emotion/styled'
import { colors } from '../styles/variables'

const StyledDeletionPage = styled.div`
.intro {
text-align: center;
padding: 5rem 0;
}
.content {
display: flex;
padding: 5rem 0;
}
.text {
background: ${colors.offWhite};
}
`

const DeletionPage = () => (
<IndexLayout isAFlowPage={true}>
<StyledDeletionPage>
<div className="row pattern">
<div className="intro">
<h1><strong>How Can We Improve?</strong></h1>
</div>
</div>
<div className="row">
<div className="content">
<blockquote className="text">
<p>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,</p>
</blockquote>
<form className="form">
<h3>Why did you uninstall the browser extension?</h3>
</form>
</div>
</div>
</StyledDeletionPage>
</IndexLayout>
)

export default DeletionPage
3 changes: 2 additions & 1 deletion src/styles/variables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export const colors = {
offWhite2: '#e5e5e5',
offWhite3: '#dbdbdb',
offWhite4: '#e6e6e6',
offWhite5: '#C4C4C4'
offWhite5: '#C4C4C4',
lightGrey: '#9f9f9f',
}

export const sizes = {
Expand Down

0 comments on commit 31d62e4

Please sign in to comment.