Fixes brave/brave-browser#9247 - Cleans up widget menu position/padding

Author: ryanml

components/brave_new_tab_ui/components/default/widget/index.tsx

@@ -19,6 +19,7 @@ export interface WidgetProps {
   hideMenu?: boolean
   isForeground?: boolean
   lightWidget?: boolean
+  paddingType: 'none' | 'right' | 'default'
   onLearnMore?: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
@@ -57,6 +58,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
         hideMenu,
         isForeground,
         lightWidget,
+        paddingType,
         onLearnMore,
         onDisconnect,
         onRefreshData
@@ -73,6 +75,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
             isCryptoTab={isCryptoTab}
             widgetMenuPersist={widgetMenuPersist}
             preventFocus={preventFocus}
+            paddingType={paddingType}
           >
             <WrappedComponent {...this.props as P}/>
           </StyledWidget>
@@ -90,6 +93,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
             persistWidget={this.persistWidget}
             unpersistWidget={this.unpersistWidget}
             lightWidget={lightWidget}
+            paddingType={paddingType}
           />
           }
         </StyledWidgetContainer>

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

@@ -12,6 +12,18 @@ interface WidgetContainerProps extends WidgetPositionProps {
   textDirection: string
 }
 
+const getWidgetPadding = (type: string) => {
+  switch (type) {
+    case 'none':
+      return '0px'
+    case 'right':
+      return '24px 56px 24px 24px'
+    case 'default':
+    default:
+      return '24px'
+  }
+}
+
 export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
   display: inline-flex;
   /* For debug: */
@@ -23,9 +35,9 @@ export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
   position: relative;
 `
 
-export const StyledWidgetMenuContainer = styled<{}, 'div'>('div')`
+export const StyledWidgetMenuContainer = styled<WidgetPaddingProps, 'div'>('div')`
   position: absolute;
-  top: 5px;
+  top: ${({ paddingType }) => paddingType === 'right' ? 15 : 5}px;
   right: 5px;
 `
 
@@ -37,8 +49,12 @@ interface WidgetVisibilityProps {
   isForeground?: boolean
 }
 
-export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
-  padding: ${p => p.isCrypto ? 0 : 24}px;
+interface WidgetPaddingProps {
+  paddingType: 'none' | 'right' | 'default'
+}
+
+export const StyledWidget = styled<WidgetVisibilityProps & WidgetPaddingProps, 'div'>('div')`
+  padding: ${({ paddingType }) => getWidgetPadding(paddingType)};
   max-width: 100%;
   min-width: ${p => p.isCrypto ? '284px' : 'initial'};
   position: relative;

components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx

@@ -27,6 +27,7 @@ interface Props {
   onDisconnect?: () => void
   onRefreshData?: () => void
   lightWidget?: boolean
+  paddingType: 'none' | 'right' | 'default'
 }
 
 interface State {
@@ -89,6 +90,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
       widgetTitle,
       isForeground,
       lightWidget,
+      paddingType,
       onLearnMore,
       onDisconnect,
       onRefreshData
@@ -97,7 +99,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
     const hideString = widgetTitle ? `${getLocale('hide')} ${widgetTitle}` : getLocale('hide')
 
     return (
-      <StyledWidgetMenuContainer innerRef={this.settingsMenuRef}>
+      <StyledWidgetMenuContainer innerRef={this.settingsMenuRef} paddingType={paddingType}>
         <StyledEllipsis widgetMenuPersist={widgetMenuPersist} isForeground={isForeground}>
           <IconButton isClickMenu={true} onClick={this.toggleMenu}>
             <EllipsisIcon lightWidget={lightWidget} />

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -744,6 +744,7 @@ class NewTabPage extends React.Component<Props, State> {
         {shouldShowAddCard &&
           <AddCard
             isCrypto={true}
+            paddingType={'none'}
             menuPosition={'left'}
             widgetTitle={getLocale('addCardWidgetTitle')}
             textDirection={textDirection}
@@ -780,6 +781,7 @@ class NewTabPage extends React.Component<Props, State> {
         onLearnMore={this.learnMoreRewards}
         menuPosition={'left'}
         isCrypto={true}
+        paddingType={'none'}
         isCryptoTab={!showContent}
         isForeground={showContent}
         stackPosition={position}
@@ -813,6 +815,7 @@ class NewTabPage extends React.Component<Props, State> {
     return (
       <Together
         isCrypto={true}
+        paddingType={'none'}
         menuPosition={'left'}
         widgetTitle={getLocale('togetherWidgetTitle')}
         isForeground={showContent}
@@ -844,6 +847,7 @@ class NewTabPage extends React.Component<Props, State> {
         {...menuActions}
         {...binanceState}
         isCrypto={true}
+        paddingType={'none'}
         isCryptoTab={!showContent}
         menuPosition={'left'}
         widgetTitle={'Binance'}
@@ -893,6 +897,7 @@ class NewTabPage extends React.Component<Props, State> {
         {...geminiState}
         {...menuActions}
         isCrypto={true}
+        paddingType={'none'}
         isCryptoTab={!showContent}
         menuPosition={'left'}
         widgetTitle={'Gemini'}
@@ -928,6 +933,7 @@ class NewTabPage extends React.Component<Props, State> {
     return(
       <BitcoinDotCom
         isCrypto={true}
+        paddingType={'none'}
         isCryptoTab={!showContent}
         menuPosition={'left'}
         widgetTitle={'Bitcoin.com'}
@@ -987,6 +993,7 @@ class NewTabPage extends React.Component<Props, State> {
           {newTabData.showStats &&
           <Page.GridItemStats>
             <Stats
+              paddingType={'right'}
               widgetTitle={getLocale('statsTitle')}
               textDirection={newTabData.textDirection}
               stats={newTabData.stats}
@@ -998,6 +1005,7 @@ class NewTabPage extends React.Component<Props, State> {
           {newTabData.showClock &&
           <Page.GridItemClock>
             <Clock
+              paddingType={'right'}
               widgetTitle={getLocale('clockTitle')}
               textDirection={newTabData.textDirection}
               hideWidget={this.toggleShowClock}
@@ -1013,6 +1021,7 @@ class NewTabPage extends React.Component<Props, State> {
               <Page.GridItemTopSites>
                 <TopSitesGrid
                   actions={actions}
+                  paddingType={'right'}
                   widgetTitle={getLocale('topSitesTitle')}
                   gridSites={gridSitesData.gridSites}
                   menuPosition={'right'}
@@ -1038,6 +1047,7 @@ class NewTabPage extends React.Component<Props, State> {
             <Page.GridItemBrandedLogo>
               <BrandedWallpaperLogo
                 menuPosition={'right'}
+                paddingType={'default'}
                 textDirection={newTabData.textDirection}
                 data={newTabData.brandedWallpaperData.logo}
               />