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

NTP Settings Design Fixes #6351

Merged
merged 1 commit into from
Aug 7, 2020
Merged

NTP Settings Design Fixes #6351

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
5 changes: 3 additions & 2 deletions components/brave_new_tab_ui/components/default/addCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,17 @@ import AddCardIcon from './assets/add-icon'

interface Props {
isAlone: boolean
stackPosition: number
onAddCard: () => void
}

class AddCard extends React.PureComponent<Props, {}> {

render () {
const { isAlone, onAddCard } = this.props
const { isAlone, onAddCard, stackPosition } = this.props

return (
<StyledTitleTab onClick={onAddCard} isAlone={isAlone}>
<StyledTitleTab onClick={onAddCard} isAlone={isAlone} stackPosition={stackPosition}>
<Header>
<StyledTitle>
<StyledAddIcon>
Expand Down
5 changes: 3 additions & 2 deletions components/brave_new_tab_ui/components/default/binance/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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...
}

onShowContent: () => void
onBuyCrypto: (coin: string, amount: string, fiat: string) => void
onBinanceUserTLD: (userTLD: NewTab.BinanceTLD) => void
Expand Down Expand Up @@ -605,10 +606,10 @@ class Binance extends React.PureComponent<Props, State> {
}

renderTitleTab () {
const { onShowContent } = this.props
const { onShowContent, stackPosition } = this.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 ;-)

{this.renderTitle()}
</StyledTitleTab>
)
Expand Down
5 changes: 3 additions & 2 deletions components/brave_new_tab_ui/components/default/gemini/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ interface Props {
tickerPrices: Record<string, string>
disconnectInProgress: boolean
authInvalid: boolean
stackPosition: number
onShowContent: () => void
onDisableWidget: () => void
onValidAuthCode: () => void
Expand Down Expand Up @@ -1076,10 +1077,10 @@ class Gemini extends React.PureComponent<Props, State> {
}

renderTitleTab () {
const { onShowContent } = this.props
const { onShowContent, stackPosition } = this.props

return (
<StyledTitleTab onClick={onShowContent}>
<StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
{this.renderTitle()}
</StyledTitleTab>
)
Expand Down
5 changes: 3 additions & 2 deletions components/brave_new_tab_ui/components/default/rewards/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export interface RewardsProps {
showBrandedWallpaperNotification: boolean
brandedWallpaperData?: NewTab.BrandedWallpaper
showContent: boolean
stackPosition: number
onShowContent: () => void
onCreateWallet: () => void
onEnableAds: () => void
Expand Down Expand Up @@ -330,10 +331,10 @@ class Rewards extends React.PureComponent<RewardsProps, {}> {
}

renderTitleTab = () => {
const { onShowContent } = this.props
const { onShowContent, stackPosition } = this.props

return (
<StyledTitleTab onClick={onShowContent}>
<StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
{this.renderTitle()}
</StyledTitleTab>
)
Expand Down
37 changes: 27 additions & 10 deletions components/brave_new_tab_ui/components/default/settings/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,15 @@ export const SettingsMenu = styled<Props, 'div'>('div')`
color: ${p => p.theme.color.contextMenuForeground};
border-radius: 8px;
padding: 24px;
padding-bottom: 0px;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
font-family: ${p => p.theme.fontFamily.body};
`

export const SettingsContent = styled<{}, 'div'>('div')`
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 40px;
grid-gap: 20px;

@media screen and (max-width: 1150px) {
grid-gap: 0px;
Expand Down Expand Up @@ -181,11 +182,20 @@ export const SettingsSidebarButton = styled<SettingsSidebarButtonProps, 'button'
color: ${p => p.theme.color.brandBrave};
}
}

&:active {
outline: none;
}

&:focus {
outline-color: ${p => p.theme.color.brandBrave};
outline-width: 1px;
}
`

export const SettingsFeatureBody = styled<{}, 'section'>('section')`
padding: 10px 16px 0;
height: 305px;
padding: 10px 0;
height: 360px;
overflow-y: scroll;
`

Expand Down Expand Up @@ -272,28 +282,33 @@ export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
margin-left: ${p => p.textDirection === 'rtl' && '8px'};
border-right: ${p => p.textDirection === 'ltr' && '1px solid rgba(255, 255, 255, 0.6)'};
border-left: ${p => p.textDirection === 'rtl' && '1px solid rgba(255, 255, 255, 0.6)'};
background: rgba(33, 37, 41, 0.32);

&:hover {
color: #ffffff;
}
`

export const SettingsWidget = styled<{}, 'div'>('div')`
float: left;
width: 48%;
margin-top: 20px;
`

export const StyledWidgetSettings = styled<{}, 'div'>('div')`
font-family: ${p => p.theme.fontFamily.heading};

${SettingsWidget}:nth-child(even) {
margin-right: 17px;
}
`

export const FeaturedSettingsWidget = styled<{}, 'div'>('div')`
width: 100%;
`

export const SettingsWidget = styled<{}, 'div'>('div')`
float: left;
width: 50%;
padding: 5px;
margin-top: 20px;
`

export const StyledBannerImage = styled<{}, 'img'>('img')`
width: 100%;
margin-bottom: 10px;
`

Expand All @@ -311,6 +326,7 @@ export const StyledSettingsTitle = styled<{}, 'div'>('div')`
export const StyledSettingsCopy = styled<{}, 'div'>('div')`
font-size: 13px;
font-weight: 300;
line-height: 17px;
`

interface WidgetToggleProps {
Expand All @@ -325,6 +341,7 @@ export const StyledWidgetToggle = styled<WidgetToggleProps, 'button'>('button')`
padding: 10px 25px;
border-radius: 100px;
float: ${p => p.float ? 'right' : 'none'};
margin-right: ${p => p.float ? 10 : 0}px;
border: none;
margin-top: 8px;
cursor: pointer;
Expand Down
5 changes: 3 additions & 2 deletions components/brave_new_tab_ui/components/default/together/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import getRandomBase64 from '../../../getRandomBytes'

interface Props {
showContent: boolean
stackPosition: number
onShowContent: () => void
}

Expand All @@ -49,10 +50,10 @@ class Together extends React.PureComponent<Props, {}> {
}

renderTitleTab () {
const { onShowContent } = this.props
const { onShowContent, stackPosition } = this.props

return (
<StyledTitleTab onClick={onShowContent}>
<StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
{this.renderTitle()}
</StyledTitleTab>
)
Expand Down
4 changes: 0 additions & 4 deletions components/brave_new_tab_ui/components/default/widget/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,6 @@ export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
${ p => (p.widgetMenuPersist && !p.isCryptoTab) && `
background: rgba(33, 37, 41, 0.48);
`}

&:hover {
box-shadow: ${p => p.isCrypto && !p.isCryptoTab ? '0px 0px 16px 0px rgba(0, 0, 0, 0.5)' : 'initial'};
}
`

interface WidgetMenuProps {
Expand Down
34 changes: 17 additions & 17 deletions components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,22 @@ import styled from 'styled-components'

interface StyleProps {
isAlone?: boolean
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

switch (position) {
case 0:
return 'linear-gradient(90deg, rgba(33, 37, 41, 1) 0%, rgba(33, 37, 41, 0.4) 100%)'
case 1:
return 'linear-gradient(90deg, rgba(33, 37, 41, 0.8) 0%, rgba(33, 37, 41, 0.32) 100%)'
case 2:
return 'linear-gradient(90deg, rgba(33, 37, 41, 0.6) 0%, rgba(33, 37, 41, 0.24) 100%)'
case 3:
return 'linear-gradient(90deg, rgba(33, 37, 41, 0.4) 0%, rgba(33, 37, 41, 0.16) 100%)'
default:
return 'rgba(33, 37, 41, 0.2)'
}
}

export const StyledTitleTab = styled<StyleProps, 'div'>('div')`
Expand All @@ -14,22 +30,6 @@ export const StyledTitleTab = styled<StyleProps, 'div'>('div')`
padding: 4px 20px ${p => p.isAlone ? 5 : 15}px 20px;
margin-bottom: -8px;
backdrop-filter: blur(23px);
background: linear-gradient(90deg, rgba(33, 37, 41, 0.1) 0%, rgba(33, 37, 41, 0.22) 100%);
border-radius: 8px 8px 0 0;

&:first-child {
background: linear-gradient(90deg, rgba(33, 37, 41, 1) 0%, rgba(33, 37, 41, 0.4) 100%);
}

&:nth-child(1) {
background: linear-gradient(90deg, rgba(33, 37, 41, 0.8) 0%, rgba(33, 37, 41, 0.32) 100%);
}

&:nth-child(2) {
background: linear-gradient(90deg, rgba(33, 37, 41, 0.6) 0%, rgba(33, 37, 41, 0.24) 100%);
}

&:nth-child(3) {
background: linear-gradient(90deg, rgba(33, 37, 41, 0.4) 0%, rgba(33, 37, 41, 0.16) 100%);
}
background: ${p => getBackgroundRule(p.stackPosition)};
`
16 changes: 11 additions & 5 deletions components/brave_new_tab_ui/containers/newTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,7 +646,7 @@ class NewTabPage extends React.Component<Props, State> {
const isForeground = i === widgetList.length - 1
return (
<div key={`widget-${widget}`}>
{lookup[widget].render(isForeground)}
{lookup[widget].render(isForeground, (i + 1))}
</div>
)
})}
Expand Down Expand Up @@ -693,14 +693,15 @@ class NewTabPage extends React.Component<Props, State> {
hideWidget={this.disableAddCard}
onAddCard={this.toggleSettingsAddCard}
isAlone={allHidden}
stackPosition={0}
/>
}
{this.getCryptoContent()}
</Page.GridItemWidgetStack>
)
}

renderRewardsWidget (showContent: boolean) {
renderRewardsWidget (showContent: boolean, position: number) {
const { newTabData } = this.props
const {
rewardsState,
Expand All @@ -724,6 +725,7 @@ class NewTabPage extends React.Component<Props, State> {
isCrypto={true}
isCryptoTab={!showContent}
isForeground={showContent}
stackPosition={position}
textDirection={textDirection}
preventFocus={false}
hideWidget={this.toggleShowRewards}
Expand All @@ -743,7 +745,7 @@ class NewTabPage extends React.Component<Props, State> {
)
}

renderTogetherWidget (showContent: boolean) {
renderTogetherWidget (showContent: boolean, position: number) {
const { newTabData } = this.props
const { showTogether, textDirection, togetherSupported } = newTabData

Expand All @@ -756,6 +758,8 @@ class NewTabPage extends React.Component<Props, State> {
isCrypto={true}
menuPosition={'left'}
widgetTitle={getLocale('togetherWidgetTitle')}
isForeground={showContent}
stackPosition={position}
textDirection={textDirection}
hideWidget={this.toggleShowTogether}
showContent={showContent}
Expand All @@ -764,7 +768,7 @@ class NewTabPage extends React.Component<Props, State> {
)
}

renderBinanceWidget (showContent: boolean) {
renderBinanceWidget (showContent: boolean, position: number) {
const { newTabData } = this.props
const { binanceState, showBinance, textDirection } = newTabData
const menuActions = { onLearnMore: this.learnMoreBinance }
Expand All @@ -787,6 +791,7 @@ class NewTabPage extends React.Component<Props, State> {
menuPosition={'left'}
widgetTitle={'Binance'}
isForeground={showContent}
stackPosition={position}
textDirection={textDirection}
preventFocus={false}
hideWidget={this.toggleShowBinance}
Expand All @@ -812,7 +817,7 @@ class NewTabPage extends React.Component<Props, State> {
)
}

renderGeminiWidget (showContent: boolean) {
renderGeminiWidget (showContent: boolean, position: number) {
const menuActions = {}
const { newTabData } = this.props
const { geminiState, showGemini, textDirection, geminiSupported } = newTabData
Expand All @@ -835,6 +840,7 @@ class NewTabPage extends React.Component<Props, State> {
menuPosition={'left'}
widgetTitle={'Gemini'}
isForeground={showContent}
stackPosition={position}
textDirection={textDirection}
preventFocus={false}
hideWidget={this.toggleShowGemini}
Expand Down
Binary file modified components/brave_new_tab_ui/containers/newTab/settings/assets/binance.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified components/brave_new_tab_ui/containers/newTab/settings/assets/braverewards.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified components/brave_new_tab_ui/containers/newTab/settings/assets/bravetogether.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified components/brave_new_tab_ui/containers/newTab/settings/assets/gemini.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.