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

NTP Settings Design Fixes #6351

Merged
merged 1 commit into from Aug 7, 2020
Merged

NTP Settings Design Fixes #6351

merged 1 commit into from Aug 7, 2020

Conversation

ryanml
Copy link
Contributor

@ryanml ryanml commented Aug 6, 2020

Fixes: brave/brave-browser#11103

Submitter Checklist:

Test Plan:

See issue

Reviewer Checklist:

  • New files have MPL-2.0 license header.
  • Request a security/privacy review as needed.
  • Adequate test coverage exists to prevent regressions
  • Verify test plan is specified in PR before merging to source

After-merge Checklist:

  • The associated issue milestone is set to the smallest version that the
    changes has landed on.
  • All relevant documentation has been updated.

stackPosition: number
}

const getBackgroundRule = (position: number) => {
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 originally wrote something to dynamically generate these gradient rules based on the position, but this is more explicit and readable

@ryanml ryanml changed the title Fixes brave/brave-browser#11103 - NTP Settings Design Fixes NTP Settings Design Fixes Aug 6, 2020
@@ -137,6 +137,7 @@ interface Props {
disconnectInProgress: boolean
authInvalid: boolean
selectedView: string
stackPosition: number
Copy link
Member

Choose a reason for hiding this comment

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

nit: instead of all this repeated props, you could have something like

[another file]
type WidgetProps {
   stackPosition: number
   ...
}

[this file]
type Props = WidgetProps & {
  ...binance-specific-props...
}


return (
<StyledTitleTab onClick={onShowContent}>
<StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
Copy link
Member

Choose a reason for hiding this comment

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

nit (continued): and here do <StyledTitleTab ...getWidgetTitleProps(this.props)>

...but that's if you didn't want to do the repetition ;-)

`

export const SettingsFeatureBody = styled<{}, 'section'>('section')`
padding: 10px 16px 0;
height: 305px;
padding: 10px 16px 10px;
Copy link
Member

Choose a reason for hiding this comment

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

nit: the extra 10px is now redundant

Copy link
Member

@petemill petemill left a comment

Choose a reason for hiding this comment

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

Didn't get a chance to try the changes yet, but code looks good. Just very minor code style feedback.

Copy link
Contributor

@emerick emerick left a comment

Choose a reason for hiding this comment

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

LGTM

@ryanml ryanml merged commit f47b029 into master Aug 7, 2020
@ryanml ryanml deleted the fix-11103 branch August 7, 2020 08:53
ryanml added a commit that referenced this pull request Aug 7, 2020
NTP Settings Design Fixes
ryanml added a commit that referenced this pull request Aug 14, 2020
NTP Settings Design Fixes
@kjozwiak
Copy link
Member

kjozwiak commented Aug 17, 2020

Verification PASSED on macOS 10.15.6 x64 using the following build:

Brave | 1.14.45 Chromium: 85.0.4183.69 (Official Build) nightly (64-bit)
-- | --
Revision | 4554ea1a1171bd8d06951a4b7d9336afe6c59967-refs/branch-heads/4183@{#1426}
OS | macOS Version 10.15.6 (Build 19G73)

As per brave/brave-browser#11103 (comment), verified that the suggestions via brave/brave-browser#10318 (comment) and #6015 (comment) have been addressed.

  • ensured that the focus border is using the correct colour when clicking via mouse or tabbing through the options using a keyboard. Example:

Screen Shot 2020-08-17 at 3 27 18 PM

  • ensured that once the Customize modal is visible, that there's an overlay over the NTP that looks a bit darker to emphasis the Customize modal.
  • ensured that clicking anywhere on the NTP page dismisses the Customize modal without issues
Without background/overlay With background/overlay
Screen Shot 2020-08-17 at 3 43 17 PM Screen Shot 2020-08-17 at 3 43 10 PM
  • ensured that the widgets were using the correct colour/opacity. Example:

Screen Shot 2020-08-17 at 3 58 58 PM

Screen Shot 2020-08-17 at 3 59 40 PM

Screen Shot 2020-08-17 at 4 03 17 PM

Screen Shot 2020-08-17 at 4 04 47 PM

Screen Shot 2020-08-17 at 4 06 15 PM

  • ensured that there's a space between the widget cards under More Cards:

Screen Shot 2020-08-17 at 4 18 00 PM

Also checked the following:

@kjozwiak
Copy link
Member

@ryanml @karenkliu possible issues/questions. I don't think any of these are blocking and we can continue uplifting #6372. However, let me know if I should create follow up issues.

Looks like the font is still 13px but brave/brave-browser#10318 (comment) mentions it should be 11pt? I might be looking at this wrong but looks like we're using 13px rather than 11px. Example:

Example 1 Example 2
Screen Shot 2020-08-17 at 4 11 11 PM Screen Shot 2020-08-17 at 4 11 32 PM

The height of More Cards & Top Sites appears to be 360px but the spec under brave/brave-browser#10318 (comment) mentions 390px. Example:

Screen Shot 2020-08-17 at 4 21 04 PM

Screen Shot 2020-08-17 at 4 21 04 PM

@kjozwiak
Copy link
Member

Talked to @ryanml and @karenkliu re: the above, both are known and not issues 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants