Clean up

components/brave_new_tab_ui/components/default/clock/index.tsx

@@ -42,7 +42,7 @@ export function Clock () {
       ? null
       : t.value), [formatter, now])
 
-  return <StyledClock onDoubleClick={toggleClockFormat} >
+  return <StyledClock onDoubleClick={toggleClockFormat}>
     <StyledTime>{formattedTime}</StyledTime>
   </StyledClock>
 }

components/brave_new_tab_ui/components/default/stats/index.tsx

@@ -31,7 +31,6 @@ export interface StatsItemProps {
   counter: string | number
   text?: string
   description: string
-  overriddenTextColor?: string
 }
 
 /**
@@ -41,10 +40,10 @@ export interface StatsItemProps {
  * @prop {string} text - descriptive text that goes along the stat
  * @prop {string} description - describes what the counter is showing
  */
-export function StatsItem ({ testId, counter, text, description, overriddenTextColor }: StatsItemProps) {
-    return <StyledStatsItem data-test-id={testId} overriddenTextColor={overriddenTextColor}>
+export function StatsItem ({ testId, counter, text, description }: StatsItemProps) {
+    return <StyledStatsItem data-test-id={testId}>
         <StyledStatsItemCounter>{counter}</StyledStatsItemCounter>
           {text && <StyledStatsItemText>{text}</StyledStatsItemText>}
-        <StyledStatsItemDescription overriddenTextColor={overriddenTextColor}>{description}</StyledStatsItemDescription>
+        <StyledStatsItemDescription>{description}</StyledStatsItemDescription>
       </StyledStatsItem>
 }

components/brave_new_tab_ui/components/default/stats/style.ts

@@ -18,7 +18,7 @@ export const StyledStatsItemContainer = styled('ul')<{}>`
   font-family: inherit;
 `
 
-export const StyledStatsItem = styled('li')<{overriddenTextColor?: string}>`
+export const StyledStatsItem = styled('li')<{}>`
   list-style-type: none;
   font-size: inherit;
   font-family: inherit;
@@ -51,7 +51,7 @@ export const StyledStatsItemText = styled('span')<{}>`
   letter-spacing: 0;
 `
 
-export const StyledStatsItemDescription = styled('div')<{overriddenTextColor?: string}>`
+export const StyledStatsItemDescription = styled('div')<{}>`
   font-size: 16px;
   font-weight: 500;
   color: var(--override-readability-color-rgb, #FFFFFF);

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -194,9 +194,6 @@ class NewTabPage extends React.Component<Props, State> {
       window.clearTimeout(this.braveNewsPromptTimerId)
     }
     window.removeEventListener('resize', this.handleResize.bind(this))
-
-    document.documentElement.style.removeProperty('--override-readability-color-rgb')
-    document.documentElement.style.removeProperty('--override-readability-color')
   }
 
   componentDidUpdate (prevProps: Props) {
@@ -1195,7 +1192,7 @@ class NewTabPage extends React.Component<Props, State> {
             widgetTitle={getLocale('statsTitle')}
             textDirection={newTabData.textDirection}
             menuPosition={'right'}>
-            <Stats stats={newTabData.stats} />
+            <Stats stats={newTabData.stats}/>
           </GridWidget>
           <GridWidget
             pref='showClock'

components/brave_new_tab_ui/containers/newTab/stats.tsx

@@ -10,7 +10,6 @@ import { getLocale } from '../../../common/locale'
 
 interface Props {
   stats: NewTab.Stats
-  overriddenTextColor?: string
 }
 
 const MILLISECONDS_PER_ITEM = 50
@@ -89,16 +88,16 @@ export default function Stats (props: Props) {
   return <StatsContainer>
     <StatsItem
       description={getLocale('adsTrackersBlocked')}
-      counter={adblockCount.toLocaleString()}/>
+      counter={adblockCount.toLocaleString()} />
     {bandwidthSaved &&
       <StatsItem
         counter={bandwidthSaved.value}
         text={getLocale(bandwidthSaved.id)}
-        description={getLocale('estimatedBandwidthSaved')}/>
+        description={getLocale('estimatedBandwidthSaved')} />
     }
     <StatsItem
       counter={timeSaved.value}
       text={getLocale(timeSaved.id)}
-      description={getLocale('estimatedTimeSaved')}/>
+      description={getLocale('estimatedTimeSaved')} />
   </StatsContainer>
 }

components/brave_new_tab_ui/reducers/new_tab_reducer.ts

@@ -23,7 +23,6 @@ import { setMostVisitedSettings } from '../api/topSites'
 import { handleWidgetPrefsChange } from './stack_widget_reducer'
 import { NewTabAdsData } from '../api/newTabAdsData'
 import { Background } from '../api/background'
-import isReadableOnBackground from '../helpers/colorUtil'
 
 let sideEffectState: NewTab.State = storage.load()
 
@@ -60,14 +59,8 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
 
       if (initialDataPayload.wallpaperData) {
         let backgroundWallpaper = initialDataPayload.wallpaperData.backgroundWallpaper
-        if (backgroundWallpaper?.type === 'color') {
-          if (backgroundWallpaper.random) {
-            backgroundWallpaper = backgroundAPI.randomColorBackground(backgroundWallpaper.wallpaperColor)
-          }
-
-          if (!isReadableOnBackground(backgroundWallpaper)) {
-            (backgroundWallpaper as NewTab.ColorBackground).overriddenForegroundColor = '#000000'
-          }
+        if (backgroundWallpaper?.type === 'color' && backgroundWallpaper.random) {
+          backgroundWallpaper = backgroundAPI.randomColorBackground(backgroundWallpaper.wallpaperColor)
         }
 
         state = {
@@ -144,9 +137,6 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
           state.backgroundWallpaper = { type: 'image', wallpaperImageUrl: url }
         } else if (color) {
           state.backgroundWallpaper = random ? backgroundAPI.randomColorBackground(color) : { type: 'color', wallpaperColor: color, random }
-          if (!isReadableOnBackground(state.backgroundWallpaper)) {
-            (state.backgroundWallpaper as NewTab.ColorBackground).overriddenForegroundColor = '#000000'
-          }
         }
       }
 

components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts

@@ -23,8 +23,7 @@ const generateWallpapers = function (images: NewTab.BackgroundWallpaper[],
     Object.assign(staticImages, {
       [image.author]: {
         ...image,
-        // wallpaperImageUrl: require('../../../../img/newtab/backgrounds/' + image.wallpaperImageUrl)
-        wallpaperImageUrl: ''
+        wallpaperImageUrl: require('../../../../img/newtab/backgrounds/' + image.wallpaperImageUrl)
       }
     })
 

components/definitions/newTab.d.ts

@@ -9,7 +9,6 @@ declare namespace NewTab {
     type: 'color'
     wallpaperColor: string
     random?: boolean
-    overriddenForegroundColor?: string
   }
 
   // Backgrounds based on image. Custom image background or Brave background.