Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(www): convert BoxWithBorder to theme-ui #25144

Merged
merged 2 commits into from
Jun 27, 2020
Merged

chore(www): convert BoxWithBorder to theme-ui #25144

merged 2 commits into from
Jun 27, 2020

Conversation

abhishekjakhar
Copy link
Contributor

@abhishekjakhar abhishekjakhar commented Jun 20, 2020

Description

  1. Convert the <BoxWithBorder/> component to theme-ui
  2. Cleanup of CSS

Screenshot(s)

The logo container is wrapper in BoxWithBorder component

box-with-border-1

The items inside Guidance are all wrapped inside BoxWithBorder component

box-with-border-2

How to test

  1. Go to the https://www.gatsbyjs.org/guidelines/logo/ page.
  2. The BoxWithBorder component is used in multiple sections of this page.
  3. The production and local should look similar, just the implementation of component is different.

Local URL: http://localhost:8000/guidelines/logo/
Production URL: https://www.gatsbyjs.org/guidelines/logo/

@abhishekjakhar abhishekjakhar requested a review from a team as a code owner June 20, 2020 03:47
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 20, 2020
@LekoArts LekoArts added topic: website and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jun 22, 2020
Copy link
Contributor

@tesseralis tesseralis left a comment

Choose a reason for hiding this comment

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

Thanks for all these improvements! I think the theme might not be correctly applied right now for one of the properties.

":after": withBorder && {
content: `" "`,
border: `1px solid ${t.colors.blackFade[10]}`,
borderRadius: t => t.radii[1],
Copy link
Contributor

Choose a reason for hiding this comment

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

Since borderRadius is theme-aware I think you can just replace this with just:

Suggested change
borderRadius: t => t.radii[1],
borderRadius: 1,

position: `relative`,
":after": withBorder && {
content: `" "`,
border: `1px solid ${t.colors.blackFade[10]}`,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this be:

Suggested change
border: `1px solid ${t.colors.blackFade[10]}`,
border: t => `1px solid ${t.colors.blackFade[10]}`,

Alternately we could do:

Suggested change
border: `1px solid ${t.colors.blackFade[10]}`,
borderWidth: `1px`,
borderStyle: `solid`,
borderColor: `blackFade.10`,

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I totally agree with you

@abhishekjakhar abhishekjakhar added the status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response label Jun 27, 2020
@tesseralis tesseralis merged commit 6013206 into gatsbyjs:master Jun 27, 2020
@abhishekjakhar abhishekjakhar deleted the chore/box-with-border branch June 27, 2020 02:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants