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.

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

fix: add border to onboarding form #5144

Merged
merged 1 commit into from
Mar 28, 2024
Merged

fix: add border to onboarding form #5144

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
1 change: 1 addition & 0 deletions src/app/ui/components/containers/headers/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export function Header({
justifyContent="center"
margin={{ base: 0, md: 'auto' }}
p={variant === 'bigTitle' ? 'space.05' : 'space.04'}
paddingLeft={variant === 'onboarding' ? 0 : undefined}
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'm not proud of this variant logic.

We went through this exercise of improving the app to have global re-usable headers but we still need to add bespoke cases all the time to match the designs

For these two column page designs, the page content is wider than the other pages to fit the mnemonic form

Screenshot 2024-03-28 at 15 36 28

I am removing left padding but it still won't match up completely as it doesn't in the design either

Copy link
Collaborator

Choose a reason for hiding this comment

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

We went through this exercise of improving the app to have global re-usable headers but we still need to add bespoke cases all the time to match the designs

My understanding is that this border should be added to the page's main container as a general pattern, essentially everywhere aside from the home screen. If you're finding yourself adding bespoke logic, let's pause and discuss with the designers since I definitely don't want to slide back into a bunch of conditional styles throughout the app.

cc @fabric-8 @mica000

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In this comment I'm talking about the Back arrow at the top of the page which was aligned exactly as per design but doesn't align with the left content below.

Maybe the left content should have some left padding instead?

The onboarding pages have a different width than the others to account for the larger mnemonic key form but this means the global header doesn't line up.

An alternative fix would be to standardise the page container width so all pages are the same width and add more padding to the home page

Copy link
Contributor

Choose a reason for hiding this comment

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

This looks great @pete-watters — Agree with you, I don't quite understand right now why we aren't using the same widths and paddings across onboarding + app so we can standardize this more — I might miss something here, will sync up with @mica000.

Would you prefer to handle the standardization bit right away in here or ok to merge this in now and handle the container standardization as a seperate issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's not worry about more changes now. I think we have it working OK and we already spent a lot of time on this issue.

We can think about it and maybe improve it in the future / when working on other things have it in mind

bg="transparent"
maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
width="100%"
Expand Down
3 changes: 2 additions & 1 deletion src/app/ui/pages/two-column.layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export function TwoColumnLayout({
p={{ base: 'space.02', md: 'space.05' }}
gap="space.04"
bg="ink.background-primary"
borderRadius="xs"
border="default"
borderRadius="lg"
width="100%"
minWidth={{
base: '100%',
Expand Down
Loading