NTP: Use right color and font for footer icon label

brave · Apr 1, 2020 · 1d42142 · 1d42142
1 parent 3ec3932
commit 1d42142
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -309,8 +309,9 @@ export const IconButtonSideText = styled<IconButtonSideTextProps, 'label'>('labe
   align-items: center;
   margin-right: ${p => p.textDirection === 'ltr' && '24px'};
   margin-left: ${p => p.textDirection === 'rtl' && '24px'};
-  color: #ffffff;
+  color: inherit;
   cursor: pointer;
+  user-select: none;
 
   &:focus-within {
     /* get the browser defaults */

diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -60,9 +60,16 @@ export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
   position: relative;
   display: flex;
   justify-content: flex-end;
-  margin-right: 8px;
+  font-family: ${p => p.theme.fontFamily.heading};
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255,255,255,0.8);
   margin-right: ${p => p.textDirection === 'ltr' && '8px'};
   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)'};
+
+  &:hover {
+    color: #ffffff;
+  }
 `