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

normalize UI component font styles #9694

Merged
merged 3 commits into from
Oct 29, 2020
Merged

Conversation

brad-decker
Copy link
Contributor

Depends on #9693

Breaking apart #9074 so that it allows for easier review in parts. #9074 was reviewed a few times and changes were made but the latest rebase puts it into a state where the full review is once again needed. This part of the effort focuses on UI components. This PR has the broadest implications given that it touches the UI library which is used throughout the site.

@metamaskbot
Copy link
Collaborator

Builds ready [80bdbd5]
Page Load Metrics (368 ± 39 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint309245209
domContentLoaded3046103668139
load3056113688139
domInteractive3036103668139

@@ -228,15 +227,6 @@ input[type="submit"][disabled] {
opacity: 0.5;
}

button.primary {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this is unused in the codebase and is thus removed.

@@ -26,13 +26,6 @@
align-items: center;
}

&__message {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was unused and thus removed

font-weight: 500;
line-height: 2rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

the resulting line height is much higher, as noted by @Gudahtt in #9074, but on review:

The line-height is now much higher with this change (it went from 32px to 44.8px), but I do think this looks better in all cases I know of. I can't find any with stray padding that is now redundant.

https://github.com/MetaMask/metamask-extension/pull/9074/files?file-filters%5B%5D=.scss#r466411684

margin-right: 1.5rem;
}

&__subtitle {
@include H6;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this results in a small change to font size. @Gudahtt also reviewed this change here:

https://github.com/MetaMask/metamask-extension/pull/9074/files?file-filters%5B%5D=.scss#r466433436

Base automatically changed from expose-typography-vars to develop October 28, 2020 14:03
@brad-decker brad-decker marked this pull request as ready for review October 28, 2020 14:04
@brad-decker brad-decker requested a review from a team as a code owner October 28, 2020 14:04
@brad-decker brad-decker requested a review from kumavis October 28, 2020 14:04
@darkwing darkwing self-requested a review October 28, 2020 15:22
darkwing
darkwing previously approved these changes Oct 28, 2020
Copy link
Contributor

@darkwing darkwing left a comment

Choose a reason for hiding this comment

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

These changes all make sense and I'm very happy that we can properly structure font sizes -- yay!

One thing that does concern me is the number of "headings" we have; H9 feels like a sight for sore eyes. I'd love if we could get down to less overall sizes and have a more uniform look and feel.

@brad-decker
Copy link
Contributor Author

@darkwing -- although they are labeled as H7-H9, they are not used as headings (typically 🙃). I have also asked the design team to consider alternative, descriptive labels for these font settings, such as "subtitle," "label," etc... My experience comes from material design typography settings, which have more overall variations in font size but with a distinct purpose. Cc @MetaMask/design. In the previous PR that this was split from, @rachelcope also pointed out many areas where we are using the entirely wrong font settings. Still, this PR's goal was to improve visibility of which typography styles are in use.

I hope that helps for additional context, and thanks for the review!

@brad-decker brad-decker requested a review from Gudahtt October 28, 2020 15:48
@brad-decker
Copy link
Contributor Author

brad-decker commented Oct 28, 2020

adding @Gudahtt as a required reviewer on all of these as he had already done an extensive review on the massive PR.

Gudahtt
Gudahtt previously approved these changes Oct 28, 2020
Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

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

LGTM!

@metamaskbot
Copy link
Collaborator

Builds ready [ff078d4]
Page Load Metrics (411 ± 59 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint308543178
domContentLoaded29964241012259
load30164341112259
domInteractive29964240912259

Gudahtt
Gudahtt previously approved these changes Oct 28, 2020
@Gudahtt
Copy link
Member

Gudahtt commented Oct 29, 2020

Though I did notice that this seems to require a rebase! The first commit is a duplicate of the one from the branch this was pointed at. I bet the other four need to be rebased as well.

@brad-decker
Copy link
Contributor Author

@Gudahtt good catch, rebased.

@metamaskbot
Copy link
Collaborator

Builds ready [635056b]
Page Load Metrics (371 ± 60 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint298337115
domContentLoaded23361336912560
load23461537112560
domInteractive23261236912560

@brad-decker brad-decker merged commit 186ee97 into develop Oct 29, 2020
@brad-decker brad-decker deleted the normalize-ui-component-fonts branch October 29, 2020 14:30
@github-actions github-actions bot locked and limited conversation to collaborators Oct 29, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants