diff --git a/components/brave_new_tab_ui/components/default/addCard/index.tsx b/components/brave_new_tab_ui/components/default/addCard/index.tsx index fcfb067f7ad4..d28164fe2abe 100644 --- a/components/brave_new_tab_ui/components/default/addCard/index.tsx +++ b/components/brave_new_tab_ui/components/default/addCard/index.tsx @@ -17,16 +17,17 @@ import AddCardIcon from './assets/add-icon' interface Props { isAlone: boolean + stackPosition: number onAddCard: () => void } class AddCard extends React.PureComponent { render () { - const { isAlone, onAddCard } = this.props + const { isAlone, onAddCard, stackPosition } = this.props return ( - +
diff --git a/components/brave_new_tab_ui/components/default/binance/index.tsx b/components/brave_new_tab_ui/components/default/binance/index.tsx index 381199910751..dc88adbec76a 100644 --- a/components/brave_new_tab_ui/components/default/binance/index.tsx +++ b/components/brave_new_tab_ui/components/default/binance/index.tsx @@ -137,6 +137,7 @@ interface Props { disconnectInProgress: boolean authInvalid: boolean selectedView: string + stackPosition: number onShowContent: () => void onBuyCrypto: (coin: string, amount: string, fiat: string) => void onBinanceUserTLD: (userTLD: NewTab.BinanceTLD) => void @@ -605,10 +606,10 @@ class Binance extends React.PureComponent { } renderTitleTab () { - const { onShowContent } = this.props + const { onShowContent, stackPosition } = this.props return ( - + {this.renderTitle()} ) diff --git a/components/brave_new_tab_ui/components/default/gemini/index.tsx b/components/brave_new_tab_ui/components/default/gemini/index.tsx index fa1278a2f9db..b292eca6d650 100644 --- a/components/brave_new_tab_ui/components/default/gemini/index.tsx +++ b/components/brave_new_tab_ui/components/default/gemini/index.tsx @@ -123,6 +123,7 @@ interface Props { tickerPrices: Record disconnectInProgress: boolean authInvalid: boolean + stackPosition: number onShowContent: () => void onDisableWidget: () => void onValidAuthCode: () => void @@ -1076,10 +1077,10 @@ class Gemini extends React.PureComponent { } renderTitleTab () { - const { onShowContent } = this.props + const { onShowContent, stackPosition } = this.props return ( - + {this.renderTitle()} ) diff --git a/components/brave_new_tab_ui/components/default/rewards/index.tsx b/components/brave_new_tab_ui/components/default/rewards/index.tsx index 14b6ccdfe7b4..7cdbcc490545 100644 --- a/components/brave_new_tab_ui/components/default/rewards/index.tsx +++ b/components/brave_new_tab_ui/components/default/rewards/index.tsx @@ -57,6 +57,7 @@ export interface RewardsProps { showBrandedWallpaperNotification: boolean brandedWallpaperData?: NewTab.BrandedWallpaper showContent: boolean + stackPosition: number onShowContent: () => void onCreateWallet: () => void onEnableAds: () => void @@ -330,10 +331,10 @@ class Rewards extends React.PureComponent { } renderTitleTab = () => { - const { onShowContent } = this.props + const { onShowContent, stackPosition } = this.props return ( - + {this.renderTitle()} ) diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts index 2b5ae3b3f5ac..c50f403a5a8a 100644 --- a/components/brave_new_tab_ui/components/default/settings/index.ts +++ b/components/brave_new_tab_ui/components/default/settings/index.ts @@ -21,6 +21,7 @@ export const SettingsMenu = styled('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}; ` @@ -28,7 +29,7 @@ export const SettingsMenu = styled('div')` 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; @@ -181,11 +182,20 @@ export const SettingsSidebarButton = styled 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; ` @@ -272,28 +282,33 @@ export const SettingsWrapper = styled('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; ` @@ -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 { @@ -325,6 +341,7 @@ export const StyledWidgetToggle = styled('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; diff --git a/components/brave_new_tab_ui/components/default/together/index.tsx b/components/brave_new_tab_ui/components/default/together/index.tsx index 564fe5758e6e..517cb5687556 100644 --- a/components/brave_new_tab_ui/components/default/together/index.tsx +++ b/components/brave_new_tab_ui/components/default/together/index.tsx @@ -24,6 +24,7 @@ import getRandomBase64 from '../../../getRandomBytes' interface Props { showContent: boolean + stackPosition: number onShowContent: () => void } @@ -49,10 +50,10 @@ class Together extends React.PureComponent { } renderTitleTab () { - const { onShowContent } = this.props + const { onShowContent, stackPosition } = this.props return ( - + {this.renderTitle()} ) diff --git a/components/brave_new_tab_ui/components/default/widget/styles.ts b/components/brave_new_tab_ui/components/default/widget/styles.ts index c200c065bc36..342975d7a8c3 100644 --- a/components/brave_new_tab_ui/components/default/widget/styles.ts +++ b/components/brave_new_tab_ui/components/default/widget/styles.ts @@ -53,10 +53,6 @@ export const StyledWidget = styled('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 { diff --git a/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts b/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts index f5708a000c95..0e25c3911bcd 100644 --- a/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts +++ b/components/brave_new_tab_ui/components/default/widgetTitleTab/index.ts @@ -6,6 +6,22 @@ import styled from 'styled-components' interface StyleProps { isAlone?: boolean + stackPosition: number +} + +const getBackgroundRule = (position: number) => { + 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('div')` @@ -14,22 +30,6 @@ export const StyledTitleTab = styled('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)}; ` diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx index 4139c2e28aaf..addd2a67b342 100644 --- a/components/brave_new_tab_ui/containers/newTab/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/index.tsx @@ -646,7 +646,7 @@ class NewTabPage extends React.Component { const isForeground = i === widgetList.length - 1 return (
- {lookup[widget].render(isForeground)} + {lookup[widget].render(isForeground, (i + 1))}
) })} @@ -693,6 +693,7 @@ class NewTabPage extends React.Component { hideWidget={this.disableAddCard} onAddCard={this.toggleSettingsAddCard} isAlone={allHidden} + stackPosition={0} /> } {this.getCryptoContent()} @@ -700,7 +701,7 @@ class NewTabPage extends React.Component { ) } - renderRewardsWidget (showContent: boolean) { + renderRewardsWidget (showContent: boolean, position: number) { const { newTabData } = this.props const { rewardsState, @@ -724,6 +725,7 @@ class NewTabPage extends React.Component { isCrypto={true} isCryptoTab={!showContent} isForeground={showContent} + stackPosition={position} textDirection={textDirection} preventFocus={false} hideWidget={this.toggleShowRewards} @@ -743,7 +745,7 @@ class NewTabPage extends React.Component { ) } - renderTogetherWidget (showContent: boolean) { + renderTogetherWidget (showContent: boolean, position: number) { const { newTabData } = this.props const { showTogether, textDirection, togetherSupported } = newTabData @@ -756,6 +758,8 @@ class NewTabPage extends React.Component { isCrypto={true} menuPosition={'left'} widgetTitle={getLocale('togetherWidgetTitle')} + isForeground={showContent} + stackPosition={position} textDirection={textDirection} hideWidget={this.toggleShowTogether} showContent={showContent} @@ -764,7 +768,7 @@ class NewTabPage extends React.Component { ) } - renderBinanceWidget (showContent: boolean) { + renderBinanceWidget (showContent: boolean, position: number) { const { newTabData } = this.props const { binanceState, showBinance, textDirection } = newTabData const menuActions = { onLearnMore: this.learnMoreBinance } @@ -787,6 +791,7 @@ class NewTabPage extends React.Component { menuPosition={'left'} widgetTitle={'Binance'} isForeground={showContent} + stackPosition={position} textDirection={textDirection} preventFocus={false} hideWidget={this.toggleShowBinance} @@ -812,7 +817,7 @@ class NewTabPage extends React.Component { ) } - renderGeminiWidget (showContent: boolean) { + renderGeminiWidget (showContent: boolean, position: number) { const menuActions = {} const { newTabData } = this.props const { geminiState, showGemini, textDirection, geminiSupported } = newTabData @@ -835,6 +840,7 @@ class NewTabPage extends React.Component { menuPosition={'left'} widgetTitle={'Gemini'} isForeground={showContent} + stackPosition={position} textDirection={textDirection} preventFocus={false} hideWidget={this.toggleShowGemini} diff --git a/components/brave_new_tab_ui/containers/newTab/settings/assets/binance.png b/components/brave_new_tab_ui/containers/newTab/settings/assets/binance.png index c66768e9a616..da0e266ab320 100644 Binary files a/components/brave_new_tab_ui/containers/newTab/settings/assets/binance.png and b/components/brave_new_tab_ui/containers/newTab/settings/assets/binance.png differ diff --git a/components/brave_new_tab_ui/containers/newTab/settings/assets/braverewards.png b/components/brave_new_tab_ui/containers/newTab/settings/assets/braverewards.png index 06758cd542f3..f725508ecd34 100644 Binary files a/components/brave_new_tab_ui/containers/newTab/settings/assets/braverewards.png and b/components/brave_new_tab_ui/containers/newTab/settings/assets/braverewards.png differ diff --git a/components/brave_new_tab_ui/containers/newTab/settings/assets/bravetogether.png b/components/brave_new_tab_ui/containers/newTab/settings/assets/bravetogether.png index 5cc0d5b2b6c9..74c6fe0de7e7 100644 Binary files a/components/brave_new_tab_ui/containers/newTab/settings/assets/bravetogether.png and b/components/brave_new_tab_ui/containers/newTab/settings/assets/bravetogether.png differ diff --git a/components/brave_new_tab_ui/containers/newTab/settings/assets/gemini.png b/components/brave_new_tab_ui/containers/newTab/settings/assets/gemini.png index 411d651e093d..51b0199a83ae 100644 Binary files a/components/brave_new_tab_ui/containers/newTab/settings/assets/gemini.png and b/components/brave_new_tab_ui/containers/newTab/settings/assets/gemini.png differ