diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.png b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.png deleted file mode 100644 index 73da4f5e309e..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.svg b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.svg new file mode 100644 index 000000000000..0ea153b6be9f --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected-dark.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.png b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.png deleted file mode 100644 index 956cd8292c31..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.svg b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.svg new file mode 100644 index 000000000000..0321d6c92a1f --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/favorites-selected.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.png b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.png deleted file mode 100644 index 47a9fae53665..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.svg b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.svg new file mode 100644 index 000000000000..05e7532c5983 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.png b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.png deleted file mode 100644 index 4c89a2661dbe..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.svg b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.svg new file mode 100644 index 000000000000..d039fa889b82 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/favorites-unselected.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.png b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.png deleted file mode 100644 index e52b5a8fa950..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.svg b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.svg new file mode 100644 index 000000000000..a84c4f9fece7 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected-dark.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.png b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.png deleted file mode 100644 index fed6e2e4fb95..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.svg b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.svg new file mode 100644 index 000000000000..2fd4f82c560e --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/frecency-selected.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.png b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.png deleted file mode 100644 index 0874f43afaca..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.svg b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.svg new file mode 100644 index 000000000000..10d00ba61d37 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.png b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.png deleted file mode 100644 index e1408df908f8..000000000000 Binary files a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.png and /dev/null differ diff --git a/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.svg b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.svg new file mode 100644 index 000000000000..c3bfa01d2ff9 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/frecency-unselected.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts index 23162c1ed82d..90921842ccd3 100644 --- a/components/brave_new_tab_ui/components/default/settings/index.ts +++ b/components/brave_new_tab_ui/components/default/settings/index.ts @@ -5,15 +5,15 @@ import styled, { css } from 'styled-components' -import favoritesSelectedLight from './assets/favorites-selected.png' -import favoritesUnselectedLight from './assets/favorites-unselected.png' -import frecencySelectedLight from './assets/frecency-selected.png' -import frecencyUnselectedLight from './assets/frecency-unselected.png' +import favoritesSelectedLight from './assets/favorites-selected.svg' +import favoritesUnselectedLight from './assets/favorites-unselected.svg' +import frecencySelectedLight from './assets/frecency-selected.svg' +import frecencyUnselectedLight from './assets/frecency-unselected.svg' -import favoritesSelectedDark from './assets/favorites-selected-dark.png' -import favoritesUnselectedDark from './assets/favorites-unselected-dark.png' -import frecencySelectedDark from './assets/frecency-selected-dark.png' -import frecencyUnselectedDark from './assets/frecency-unselected-dark.png' +import favoritesSelectedDark from './assets/favorites-selected-dark.svg' +import favoritesUnselectedDark from './assets/favorites-unselected-dark.svg' +import frecencySelectedDark from './assets/frecency-selected-dark.svg' +import frecencyUnselectedDark from './assets/frecency-unselected-dark.svg' import CheckedCircle from './assets/checked-circle.svg' import { color, effect, font, gradient, spacing } from '@brave/leo/tokens/css/variables' @@ -340,32 +340,6 @@ export const StyledTopSitesCustomizationSettingsOption = styled('button') <{}>` } ` -interface CustomizationImageBorderProps { - selected?: boolean -} - -export const StyledTopSitesCustomizationImageBorder = styled('div') ` - margin-bottom: 8px; - border-radius: 11px; - - ${p => p.selected && css` - background: ${p => isDarkTheme(p) ? 'linear-gradient(314.42deg, #FA7250 6.04%, #FF1893 44.31%, #A78AFF 100%)' - : 'linear-gradient(122.53deg, #4C54D2 0%, #BF14A2 56.25%, #F73A1C 100%)'}; - padding: 3px; - `} - - ${p => !p.selected && css` - border: 2px solid ${p => isDarkTheme(p) ? '#3B3E4F' : '#F1F3F5'}; - background: ${p => isDarkTheme(p) ? '#17171F' : '#FFF'}; - padding: 1px; - - &:hover { - border: 2px solid ${p => isDarkTheme(p) ? '#C2C4CF' : '#AEB1C2'}; - background: ${p => isDarkTheme(p) ? '#2B2D3F' : '#FAFAFF'}; - padding: 1px; - } - `} -` interface CustomizationImageProps { isFavorites: boolean @@ -374,9 +348,9 @@ interface CustomizationImageProps { export const StyledTopSitesCustomizationImage = styled('img') ` width: 100%; - height: 100%; cursor: pointer; content: url(${p => getTopSiteCustomizationImage(isDarkTheme(p), p.selected ?? false, p.isFavorites)}); + margin-bottom: ${spacing.m}; ${p => p.selected && css` background: ${p => isDarkTheme(p) ? '#525779' : '#F0F2FF'}; diff --git a/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx b/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx index bd9bd47a6473..1abbe0e846bb 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings/topSites.tsx @@ -10,14 +10,13 @@ import { SettingsText, StyledTopSitesCustomizationSettings, StyledTopSitesCustomizationSettingsOption, - StyledTopSitesCustomizationImageBorder, StyledTopSitesCustomizationImage, StyledTopSitesCustomizationOptionTitle, StyledTopSitesCustomizationOptionDesc } from '../../../components/default' import Toggle from '@brave/leo/react/toggle' -import { getLocale } from '../../../../common/locale' +import { getLocale } from '$web-common/locale' interface Props { toggleShowTopSites: () => void @@ -26,75 +25,44 @@ interface Props { setMostVisitedSettings: (show: boolean, customize: boolean) => void } -class TopSitesSettings extends React.PureComponent { - onClickFavorites = () => { - this.props.setMostVisitedSettings(true, true) - } - - onClickFrecency = () => { - this.props.setMostVisitedSettings(true, false) - } - - render () { - const { - toggleShowTopSites, - showTopSites, - customLinksEnabled - } = this.props - - const favoritesSelected = showTopSites && customLinksEnabled - const frecencySelected = showTopSites && !customLinksEnabled - return ( -
- - {getLocale('showTopSites')} - - - - - - - - - {getLocale('showFavoritesLabel')} - - - {getLocale('showFavoritesDesc')} - - - - - - - - {getLocale('showFrecencyLabel')} - - - {getLocale('showFrecencyDesc')} - - - -
- ) - } +function TopSitesSettings({ toggleShowTopSites, showTopSites, customLinksEnabled, setMostVisitedSettings }: Props) { + const favoritesSelected = showTopSites && customLinksEnabled + const frecencySelected = showTopSites && !customLinksEnabled + return
+ + {getLocale('showTopSites')} + + + + setMostVisitedSettings(true, true)}> + + + {getLocale('showFavoritesLabel')} + + + {getLocale('showFavoritesDesc')} + + + setMostVisitedSettings(true, false)}> + + + {getLocale('showFrecencyLabel')} + + + {getLocale('showFrecencyDesc')} + + + +
} -export default TopSitesSettings +export default React.memo(TopSitesSettings)