update get started section. #820

nisarhassan12 · 2020-10-26T11:12:15Z

Fixes gitpod-io/website#819

This is how it looks:

chrifro · 2020-10-26T12:19:02Z

Thanks!

Please use the wording from the mockup if no one suggests something else.
"Add a Gitpod button to your repository and start your dev environment with a single click."
"Don’t want to open your own repo? Choose an example."
with this section the background of the following sections is changing as well. See mockup:

https://xd.adobe.com/view/681bd6dd-b2af-43c8-b546-d8963af14c08-3d48/

Are you using the same settings for the install browser extension button as on the landing page "gitpod vs codespaces"? if someone is currently using Chrome, they will be forwarded to the Chrome extension. Vice versa for Firefox. And all other browsers will direct to the Chrome extension. That would be great

nisarhassan12 · 2020-10-26T14:17:27Z

@ChristinFrohne I have made the requested changes please have a look again.

Are you using the same settings for the install browser extension button as on the landing page "gitpod vs codespaces"?

Yeah.

chrifro · 2020-10-27T12:35:39Z

Please have a closer look at the mockup.
The examples should have a gray background and the "explore more" section has no structured background

chrifro · 2020-11-09T08:25:04Z

Thanks @nisarhassan12 !
@gtsiolis had the great idea to add the Firefox/Chrome logo to the button to make it look more appealing and trustworthy. Also, the wording of "add to" seems a lot simpler than "Install".

Could you update the PR accordingly? The sentence above the button changed as well.
Depending on which browser is used, the chrome or firefox logo should be shown.

https://xd.adobe.com/view/681bd6dd-b2af-43c8-b546-d8963af14c08-3d48/

nisarhassan12 · 2020-11-09T13:01:20Z

@ChristinFrohne Sure. Please provide me with the white logs for both browsers for some reason I'm unable to download the Firefox one from the mockup. Also what is gonna be the text for Chrome ? Thanks.

chrifro · 2020-11-09T14:08:11Z

Great. The sentence above the button stays the same. The button text changes to "Add to Chrome"

You can find the logos attached
logo.zip

nisarhassan12 · 2020-11-09T14:44:25Z

@ChristinFrohne I have made the requested changes.

gtsiolis

Thanks @nisarhassan12! Left some minor notes.

gtsiolis · 2020-11-09T17:31:32Z

src/components/gitpod-vs-codespaces/Difference.tsx

@@ -53,7 +72,13 @@ const Difference = () => {
          target="_blank"
          className="btn btn--big btn--cta"


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

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

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

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

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

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 😄

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

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

gtsiolis · 2020-11-09T17:35:50Z

src/resources/chrome-logo.svg

+  <g id="_474-chrome" data-name="474-chrome" transform="translate(-33 -30)">
+    <path id="Pfad_1671" data-name="Pfad 1671" d="M41.949,49.937,35.737,39.171a21.709,21.709,0,0,1,35.646,2.47H53.67c-.318-.029-.637-.039-.965-.039a11.116,11.116,0,0,0-10.756,8.335Zm18.522-5.161H72.916a21.718,21.718,0,0,1-19.96,29.635l8.875-15.377a11,11,0,0,0,1.987-6.328A11.124,11.124,0,0,0,60.472,44.776Zm-15.647,7.93A7.882,7.882,0,1,1,52.706,60.6,7.89,7.89,0,0,1,44.824,52.706ZM55.677,63.414,49.464,74.18A21.715,21.715,0,0,1,33.788,42.065l8.866,15.348a11.127,11.127,0,0,0,10.062,6.4,10.757,10.757,0,0,0,2.962-.4Z" transform="translate(2 -1)" fill="#fff"/>
+  </g>
+</svg>


suggestion: it'd be best if we could add optimized versions for both SVGs here. Using a tool like svgo or svgomg can help.

Thanks, @gtsiolis for the great suggestion 🙂 . We already have image bot setup which automatically does that (not sure what it uses internally).

See for reference https://github.com/gitpod-io/website/pull/708/files

chrifro · 2020-11-10T14:17:51Z

Looks great. One minor detail: please have a bit more spacing above the button.

On Safari the button isn't displayed correctly. Please adjust that.

Fixes gitpod-io/website#819

nisarhassan12 · 2020-11-10T18:27:42Z

@ChristinFrohne I have made the requested changes please have a look again.

chrifro · 2020-11-11T09:44:45Z

Looks great now, thanks.
Can you mark it as ready and merge it as soon as we implemented the rest of the browser-extension flow?

nisarhassan12 · 2020-11-11T13:11:19Z

Thanks. I'll merge it once the flow is implemented If I didn't forget.

nisarhassan12 requested a review from chrifro October 26, 2020 11:12

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch 2 times, most recently from 478cc2e to a92bc33 Compare October 26, 2020 14:16

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch 2 times, most recently from d1c18fc to fc63ee9 Compare October 27, 2020 14:14

This comment has been minimized.

Sign in to view

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch from fc63ee9 to b862558 Compare November 9, 2020 14:42

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch from b862558 to 717d78e Compare November 9, 2020 15:00

gtsiolis reviewed Nov 9, 2020

View reviewed changes

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch from 717d78e to 8a2a177 Compare November 9, 2020 18:23

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch from 8a2a177 to 2c0a48f Compare November 10, 2020 18:21

update get started section.

8da3813

Fixes gitpod-io/website#819

nisarhassan12 force-pushed the nisarhassan12/update-get-started-819 branch from 2c0a48f to 8da3813 Compare November 10, 2020 18:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update get started section. #820

update get started section. #820

nisarhassan12 commented Oct 26, 2020

chrifro commented Oct 26, 2020 •

edited by nisarhassan12

Loading

nisarhassan12 commented Oct 26, 2020

chrifro commented Oct 27, 2020

This comment has been minimized.

chrifro commented Nov 9, 2020

nisarhassan12 commented Nov 9, 2020

chrifro commented Nov 9, 2020

nisarhassan12 commented Nov 9, 2020

gtsiolis left a comment

gtsiolis Nov 9, 2020

nisarhassan12 Nov 9, 2020

gtsiolis Nov 9, 2020

nisarhassan12 Nov 9, 2020

gtsiolis Nov 9, 2020

chrifro Nov 10, 2020 •

edited

Loading

gtsiolis Nov 9, 2020

nisarhassan12 Nov 9, 2020

chrifro commented Nov 10, 2020

nisarhassan12 commented Nov 10, 2020

chrifro commented Nov 11, 2020

nisarhassan12 commented Nov 11, 2020

		@@ -53,7 +72,13 @@ const Difference = () => {
		target="_blank"
		className="btn btn--big btn--cta"

update get started section. #820

Are you sure you want to change the base?

update get started section. #820

Conversation

nisarhassan12 commented Oct 26, 2020

chrifro commented Oct 26, 2020 • edited by nisarhassan12 Loading

nisarhassan12 commented Oct 26, 2020

chrifro commented Oct 27, 2020

This comment has been minimized.

chrifro commented Nov 9, 2020

nisarhassan12 commented Nov 9, 2020

chrifro commented Nov 9, 2020

nisarhassan12 commented Nov 9, 2020

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis Nov 9, 2020

Choose a reason for hiding this comment

nisarhassan12 Nov 9, 2020

Choose a reason for hiding this comment

gtsiolis Nov 9, 2020

Choose a reason for hiding this comment

nisarhassan12 Nov 9, 2020

Choose a reason for hiding this comment

gtsiolis Nov 9, 2020

Choose a reason for hiding this comment

chrifro Nov 10, 2020 • edited Loading

Choose a reason for hiding this comment

gtsiolis Nov 9, 2020

Choose a reason for hiding this comment

nisarhassan12 Nov 9, 2020

Choose a reason for hiding this comment

chrifro commented Nov 10, 2020

nisarhassan12 commented Nov 10, 2020

chrifro commented Nov 11, 2020

nisarhassan12 commented Nov 11, 2020

chrifro commented Oct 26, 2020 •

edited by nisarhassan12

Loading

chrifro Nov 10, 2020 •

edited

Loading