Fixes brave/brave-browser#11103 - NTP Settings Design Fixes

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<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>

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<Props, State> {
   }
 
   renderTitleTab () {
-    const { onShowContent } = this.props
+    const { onShowContent, stackPosition } = this.props
 
     return (
-      <StyledTitleTab onClick={onShowContent}>
+      <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
         {this.renderTitle()}
       </StyledTitleTab>
     )

components/brave_new_tab_ui/components/default/gemini/index.tsx

@@ -123,6 +123,7 @@ interface Props {
   tickerPrices: Record<string, string>
   disconnectInProgress: boolean
   authInvalid: boolean
+  stackPosition: number
   onShowContent: () => void
   onDisableWidget: () => void
   onValidAuthCode: () => void
@@ -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>
     )

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<RewardsProps, {}> {
   }
 
   renderTitleTab = () => {
-    const { onShowContent } = this.props
+    const { onShowContent, stackPosition } = this.props
 
     return (
-      <StyledTitleTab onClick={onShowContent}>
+      <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
         {this.renderTitle()}
       </StyledTitleTab>
     )

components/brave_new_tab_ui/components/default/settings/index.ts

@@ -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;
@@ -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;
 `
 
@@ -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;
 `
 
@@ -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<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;

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<Props, {}> {
   }
 
   renderTitleTab () {
-    const { onShowContent } = this.props
+    const { onShowContent, stackPosition } = this.props
 
     return (
-      <StyledTitleTab onClick={onShowContent}>
+      <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
         {this.renderTitle()}
       </StyledTitleTab>
     )

components/brave_new_tab_ui/components/default/widget/styles.ts

@@ -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 {

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<StyleProps, 'div'>('div')`
@@ -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)};
 `

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -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>
           )
         })}
@@ -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,
@@ -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}
@@ -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
 
@@ -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}
@@ -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 }
@@ -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}
@@ -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
@@ -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}