Fixes brave/brave-browser#11441 - Fixes spacing between cards in NTP …

…settings
brave · Oct 5, 2020 · 5de49b0 · 5de49b0
1 parent 10f841f
commit 5de49b0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -295,11 +295,15 @@ export const SettingsWidget = styled<{}, 'div'>('div')`
   margin-top: 20px;
 `
 
-export const StyledWidgetSettings = styled<{}, 'div'>('div')`
+interface WidgetSettingsProps {
+  hasFeatured: boolean
+}
+
+export const StyledWidgetSettings = styled<WidgetSettingsProps, 'div'>('div')`
   font-family: ${p => p.theme.fontFamily.heading};
 
-  ${SettingsWidget}:nth-child(even) {
-    margin-right: 17px;
+  ${SettingsWidget}:nth-child(${p => p.hasFeatured ? 'odd' : 'even'}) {
+    margin-left: 17px;
   }
 `
 

diff --git a/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx b/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx
@@ -89,7 +89,7 @@ class MoreCardsSettings extends React.PureComponent<Props, {}> {
       bitcoinDotComSupported
     } = this.props
     return (
-      <StyledWidgetSettings>
+      <StyledWidgetSettings hasFeatured={togetherSupported}>
         {
           togetherSupported
           ? <FeaturedSettingsWidget>