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

update get started section. #820

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update get started section. #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/components/MoreInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -103,7 +111,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
</div>
</StyledPricingLinks>
</div>
</div>
</StyledMoreInfo>
)
}

Expand Down
68 changes: 45 additions & 23 deletions src/components/gitpod-vs-codespaces/Difference.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,65 @@
import React, { useEffect, useState } from 'react'
import styled from '@emotion/styled'
import Chrome from '../../resources/chrome-logo.svg'
import Firefox from '../../resources/firefox-logo.svg'
import { getBrowser } from '../../utils/helpers'

const getBrowser = (userAgent: string) => {
const browsers = ['Opera', 'Chrome', 'Firefox', 'IE']
let browser

browsers.forEach((b) => {
if (userAgent.indexOf(b) !== -1) {
browser = b
}
})

return browser
}

const StyledDifference = styled.section`
const StyledDifference = styled.section<{spacing?: 'small'}>`
padding: ${({spacing}) => spacing === 'small' ? '6rem 0' : ''};
text-align: center;

p {
font-size: 110%;
}

h2 + p {
margin: 3rem 0 2rem;
max-width: 700px;
margin: 3rem auto 2rem;
}

.btn {
margin-bottom: 5rem;
margin: 2.5rem 0 5rem;
padding-left: 1.5rem;

span {
display: flex;
align-items: center;
}

img {
width: 4rem;
margin-right: 2.5rem;
}
}
`

const Difference = () => {
const [browser, setBrowser] = useState()
interface DifferenceProps {
title?: string
spacing?: 'small'
}

const Difference = ({title, spacing}: DifferenceProps) => {
const [browser, setBrowser] = useState<any>()

const getBrowserString = (browser: any) => {
if ( browser === 'Firefox') {
return 'Firefox'
}
return 'Chrome'
}

useEffect(() => {
setBrowser(getBrowser(window.navigator.userAgent))
let usersBrowser = getBrowser(window.navigator.userAgent)
setBrowser(getBrowserString(usersBrowser))
})

return (
<StyledDifference className="pattern-bg">
<StyledDifference className="pattern-bg" spacing={spacing}>
<div className="row">
<h2>
<strong>Want to See the Difference for Yourself?</strong>
<strong>{title ? title : 'Want to See the Difference for Yourself?'}</strong>
</h2>
<p>Add a Gitpod button to your repository.</p>
<p>Install the browser extension which adds a Gitpod button to your GitLab, GitHub and Bitbucket projects to easily spin up a dev environment with a single click.</p>
<a
href={
browser === 'Firefox'
Expand All @@ -53,7 +69,13 @@ const Difference = () => {
target="_blank"
className="btn btn--big btn--cta"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: what do you think of overriding the padding used here so that the left padding of this button also uses 1.5rem? This could help alignment within the button.

BEFORE AFTER
image image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With 1.5rem for the left, it looks a lot better:

image

Would it make sense to slightly reduce from the left as well ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to slightly reduce from the left as well ?

Could you clarify this? The screenshot you posted looks good!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, My bad I meant from the right and not the left i.e maybe it's just me but I feel like there is a bit more padding to the right then we need? not too sure. I hope this makes sense and I was able to correctly explain What I meant 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The padding on the screenshots makes it look balanced. LGTM, but let's wait to see if @ChristinFrohne has any thoughts on this.

Copy link
Contributor

@chrifro chrifro Nov 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd also reduce the padding on the right a bit.

>
Install Browser Extension
<span>
<img
src={browser === 'Firefox' ? Firefox : Chrome }
alt={browser}
/>
Add to {browser}
</span>
</a>
<p>
Or prefix any GitLab, GitHub or Bitbucket URL with <strong>gitpod.io/#</strong>
Expand Down
75 changes: 27 additions & 48 deletions src/components/index/GetStarted.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,14 @@ import styled from '@emotion/styled'
import { sizes } from '../../styles/variables'
import { projects } from '../../contents/projects'
import Project from './Project'
import PrefixInput from './PrefixInput'
import Difference from '../gitpod-vs-codespaces/Difference'

const StyledGetStarted = styled.div`
/* ------------------------------------------- */
/* ----- Section Get Started ----- */
/* ------------------------------------------- */

.get-started {
padding-top: 0;
text-align: center;

h3 {
font-weight: 400;
}

&__prefix {
display: flex;
margin-bottom: 12rem;
text-align: left;
}

h2 + p {
font-size: 2rem;
}

/* ----- Projects ----- */

&__projects {
display: flex;
justify-content: space-between;
Expand All @@ -55,35 +36,33 @@ const StyledGetStarted = styled.div`
`

const GetStarted = () => (
<StyledGetStarted className="row pattern">
<section className="get-started" id="get-started">
<h2>
<strong>Get Started</strong>
</h2>
<p>
Prefix any GitLab, GitHub, or Bitbucket URL with <strong>gitpod.io/#</strong>
</p>

<div className="get-started__prefix">
<PrefixInput />
</div>

<h3>Or Try an Example Project</h3>

<div className="get-started__projects">
{projects.map((project, i) => (
<Project
key={i}
image={<object role="presentation" tabIndex={-1} data={project.image} />}
title={project.title}
githubUrl={project.githubUrl}
gitlabUrl={project.gitlabUrl}
bitbucketUrl={project.bitbucketUrl}
/>
))}
</div>
<section style={{padding: '0'}}>
<Difference
spacing="small"
title="Get Started"
/>
<section
className="get-started"
id="get-started"
style={{padding: '8rem 0'}}
>
<StyledGetStarted className="row">
<h3 style={{textAlign: 'center', fontWeight: 400}}>Don’t want to open your own repo? Choose an example.</h3>
<div className="get-started__projects">
{projects.map((project, i) => (
<Project
key={i}
image={<object role="presentation" tabIndex={-1} data={project.image} />}
title={project.title}
githubUrl={project.githubUrl}
gitlabUrl={project.gitlabUrl}
bitbucketUrl={project.bitbucketUrl}
/>
))}
</div>
</StyledGetStarted>
</section>
</section>
</StyledGetStarted>
)

export default GetStarted
Loading