Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: add margins to pages #1217

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
May 4, 2022
Merged

feat: add margins to pages #1217

merged 5 commits into from
May 4, 2022

Conversation

presleyp
Copy link
Contributor

This makes our pages look better and should make it easier to keep styles consistent. Fixes #978.

  • Adds a reusable Margins component
  • Extracted a couple constants to reuse in places where it's too hard to make Margins work
  • Put Margins around our pages
  • While I was at it I swapped a lot of styled divs around our pages for Stack

@presleyp presleyp self-assigned this Apr 29, 2022
@codecov
Copy link

codecov bot commented Apr 29, 2022 •
edited
Loading

Codecov Report

Merging #1217 (47caa7e) into main (021e4cd) will increase coverage by 0.43%.
The diff coverage is 73.07%.

@@            Coverage Diff             @@
##             main    #1217      +/-   ##
==========================================
+ Coverage   65.65%   66.09%   +0.43%     
==========================================
  Files         269      281      +12     
  Lines       17366    18400    +1034     
  Branches      164      216      +52     
==========================================
+ Hits        11402    12161     +759     
- Misses       4772     4975     +203     
- Partials     1192     1264      +72
Flag Coverage Δ
unittest-go-macos-latest 53.50% <ø> (+0.50%) ⬆️
unittest-go-postgres- 64.99% <ø> (+0.20%) ⬆️
unittest-go-ubuntu-latest 55.97% <ø> (+0.58%) ⬆️
unittest-go-windows-2022 51.89% <ø> (-0.63%) ⬇️
unittest-js 70.99% <73.07%> (+2.11%) ⬆️
Impacted Files Coverage Δ
...components/PreferencesLayout/PreferencesLayout.tsx 0.00% <0.00%> (ø)
...ges/OrganizationPage/TemplatePage/TemplatePage.tsx 0.00% <0.00%> (ø)
site/src/pages/TemplatesPages/TemplatesPage.tsx 0.00% <0.00%> (ø)
site/src/pages/WorkspacesPage/WorkspacesPage.tsx 0.00% <0.00%> (ø)
site/src/components/FullPageForm/FullPageForm.tsx 100.00% <100.00%> (ø)
site/src/components/Header/Header.tsx 92.85% <100.00%> (+0.54%) ⬆️
site/src/components/Margins/Margins.tsx 100.00% <100.00%> (ø)
site/src/forms/CreateTemplateForm.tsx 96.29% <100.00%> (+0.14%) ⬆️
site/src/forms/CreateWorkspaceForm.tsx 89.47% <100.00%> (+0.58%) ⬆️
.../pages/UsersPage/CreateUserPage/CreateUserPage.tsx 100.00% <100.00%> (ø)
... and 74 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 021e4cd...47caa7e. Read the comment docs.

@presleyp presleyp marked this pull request as ready for review April 29, 2022 19:55
@presleyp presleyp requested a review from a team as a code owner April 29, 2022 19:55
greyscaled
greyscaled approved these changes Apr 29, 2022
View reviewed changes
Copy link
Contributor

@greyscaled greyscaled left a comment

Choose a reason for hiding this comment

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

LGTM - comment is minor, looks like a style linter is erroring somewhere.

site/src/components/Margins/Margins.tsx
export const Margins: React.FC = ({ children }) => {
const styles = useStyles()
return (
<div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Question: It's not clear to me why we need an outer <div> here - do you know what problem this solves?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I don't totally understand it, but the content gets horizontally squished without it. My guess is that it's needed as a buffer between the content and Stack.

@BrunoQuaresma
Copy link
Collaborator

I just would suggest renaming the component to Container instead of Margins if that makes sense. I think Container is more common in the component libraries.

@presleyp
Copy link
Contributor Author

presleyp commented May 3, 2022

@BrunoQuaresma good point but I wanted this to be specific so we can layer different kinds of containers.

@presleyp presleyp merged commit 34b91fd into main May 4, 2022
@presleyp presleyp deleted the margins/presleyp/978 branch May 4, 2022 15:36
@misskniss misskniss added this to the V2 Beta milestone May 15, 2022
kylecarbs pushed a commit that referenced this pull request Jun 10, 2022
@presleyp @kylecarbs
feat: add margins to pages (#1217)
9a49e97 
* Add Margin, use constants

* Change throughout

* Add to a page, lint

* Format
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greyscaled greyscaled greyscaled approved these changes

Assignees

@presleyp presleyp

Labels
None yet
Projects
None yet
Milestone
V2 Beta
Development

Successfully merging this pull request may close these issues.

Add margins to Header and page content
4 participants
@presleyp @BrunoQuaresma @greyscaled @misskniss