New Tab Page WebUI: Move brave-ui paths to brave-core paths

Fix component and storybook import paths
Convert existing brave-core containers to use component import paths import paths, instead of brave-ui

components/brave_new_tab_ui/components/default/grid/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 
 export const Header = styled<{}, 'header'>('header')`
   box-sizing: border-box;

components/brave_new_tab_ui/components/default/notification/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 
 export const SiteRemovalNotification = styled<{}, 'header'>('header')`
   font-family: ${p => p.theme.fontFamily.heading};

components/brave_new_tab_ui/components/default/page/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { keyframes } from '../../../../theme'
+import styled, { keyframes } from 'brave-ui/theme'
 
 const fadeIn = keyframes`
   from {

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

@@ -2,7 +2,7 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 
 export const StyledStatsItemContainer = styled<{}, 'ul'>('ul')`
   -webkit-font-smoothing: antialiased;

components/brave_new_tab_ui/components/default/topSites/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 import createWidget from '../widget'
 
 export const List = styled<{}, 'div'>('div')`

components/brave_new_tab_ui/components/private/box/index.ts

@@ -3,10 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ComponentType } from 'react'
-import styled from '../../../../theme'
-import Heading from '../../../../components/text/heading'
-import Button, { Props as ButtonProps } from '../../../../components/buttonsIndicators/button'
-import { DuckDuckGoIcon, TorLockIcon } from '../../../../components/icons'
+import styled from 'brave-ui/theme'
+import Heading from 'brave-ui/components/text/heading'
+import Button, { Props as ButtonProps } from 'brave-ui/components/buttonsIndicators/button'
+import { DuckDuckGoIcon, TorLockIcon } from 'brave-ui/components/icons'
 
 export const Box = styled<{}, 'section'>('section')`
   box-sizing: border-box;

components/brave_new_tab_ui/components/private/grid/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 
 export const Grid = styled<{}, 'section'>('section')`
   box-sizing: border-box;

components/brave_new_tab_ui/components/private/modal/index.ts

@@ -3,9 +3,9 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ComponentType } from 'react'
-import styled from '../../../../theme'
-import DefaultModal, { Props } from '../../../../components/popupModals/modal'
-import Heading from '../../../../components/text/heading'
+import styled from 'brave-ui/theme'
+import DefaultModal, { Props } from 'brave-ui/components/popupModals/modal'
+import Heading from 'brave-ui/components/text/heading'
 
 export const Modal = styled(DefaultModal as ComponentType<Props>)`
   height: 100%;

components/brave_new_tab_ui/components/private/page/index.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from '../../../../theme'
+import styled from 'brave-ui/theme'
 
 interface PageProps {
   isPrivate: boolean

components/brave_new_tab_ui/components/toggle/style.ts

@@ -2,9 +2,9 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { css } from '../../../theme'
+import styled, { css } from 'brave-ui/theme'
 import { Props } from './index'
-import palette from '../../../theme/colors'
+import palette from 'brave-ui/theme/colors'
 
 export const StyledCheckbox = styled<{}, 'input'>('input')`
   -webkit-appearance: none;

components/brave_new_tab_ui/containers/newTab/block.tsx

@@ -17,7 +17,7 @@ import {
 } from 'react-dnd'
 
 // Feature-specific components
-import { Tile, TileActionsContainer, TileAction, TileFavicon } from 'brave-ui/features/newTab/default'
+import { Tile, TileActionsContainer, TileAction, TileFavicon } from '../../components/default'
 
 // Icons
 import { PinIcon, PinOIcon, BookmarkOIcon, BookmarkIcon, CloseStrokeIcon } from 'brave-ui/components/icons'

components/brave_new_tab_ui/containers/newTab/footerInfo.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Link, Navigation, IconLink, PhotoName } from 'brave-ui/features/newTab/default'
+import { Link, Navigation, IconLink, PhotoName } from '../../components/default'
 
 // Icons
 import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons'

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -14,7 +14,7 @@ import {
   Footer,
   DynamicBackground,
   Gradient
-} from 'brave-ui/features/newTab/default'
+} from '../../components/default'
 
 // Components
 import Settings from './settings'

components/brave_new_tab_ui/containers/newTab/notification.tsx

@@ -9,7 +9,7 @@ import {
   SiteRemovalNotification,
   SiteRemovalAction,
   SiteRemovalText
-} from 'brave-ui/features/newTab/default'
+} from '../../components/default'
 
 // Icons
 import { CloseStrokeIcon } from 'brave-ui/components/icons'

components/brave_new_tab_ui/containers/newTab/settings.tsx

@@ -4,9 +4,9 @@
 
 import * as React from 'react'
 
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from 'brave-ui/features/newTab/default'
+import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../components/default'
 
-import { Toggle } from 'brave-ui/features/newTab/toggle'
+import { Toggle } from '../../components/toggle'
 
 import { getLocale } from '../../../common/locale'
 

components/brave_new_tab_ui/containers/newTab/stats.tsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { StatsContainer, StatsItem, createWidget } from 'brave-ui/features/newTab/default'
+import { StatsContainer, StatsItem, createWidget } from '../../components/default'
 
 // Utils
 import { getLocale } from '../../../common/locale'

components/brave_new_tab_ui/containers/privateTab/index.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Page, PageWrapper } from 'brave-ui/features/newTab/private'
+import { Page, PageWrapper } from '../../components/private'
 
 // Components group
 import PrivateTab from './privateTab'

components/brave_new_tab_ui/containers/privateTab/privateTab.tsx

@@ -20,7 +20,7 @@ import {
   Separator,
   FakeButton,
   Link
-} from 'brave-ui/features/newTab/private'
+} from '../../components/private'
 
 // Components
 import { Toggle } from 'brave-ui/features/shields'

components/brave_new_tab_ui/containers/privateTab/qwantTab.tsx

@@ -15,7 +15,7 @@ import {
   TorImage,
   Separator,
   FakeButton
-} from 'brave-ui/features/newTab/private'
+} from '../../components/private'
 import TorContent from './torContent'
 // Helpers
 import { getLocale } from '../../../common/locale'

components/brave_new_tab_ui/containers/privateTab/qwantTorTab.tsx

@@ -17,7 +17,7 @@ import {
   TorLockImage,
   Separator,
   FakeButton
-} from 'brave-ui/features/newTab/private'
+} from '../../components/private'
 
 // Helpers
 import { getLocale } from '../../../common/locale'

components/brave_new_tab_ui/containers/privateTab/torContent.tsx

@@ -10,7 +10,7 @@ import {
   SubTitle,
   Text,
   TorLockImage
-} from 'brave-ui/features/newTab/private'
+} from '../../components/private'
 // Helpers
 import { getLocale } from '../../../common/locale'
 

components/brave_new_tab_ui/containers/privateTab/torTab.tsx

@@ -21,7 +21,7 @@ import {
   Separator,
   FakeButton,
   Link
-} from 'brave-ui/features/newTab/private'
+} from '../../components/private'
 
 // Helpers
 import { getLocale } from '../../../common/locale'

components/brave_new_tab_ui/stories/default.tsx

@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
 // Components
 import NewTabPage from './default/index'
 
-storiesOf('Feature Components/New Tab/Default', module)
+storiesOf('New Tab/Default', module)
   .add('Page', () => {
     return (
       <NewTabPage />

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

@@ -2,22 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import Image1 from '../../../../assets/img/newTab/backgrounds/ntp-1.jpg'
-import Image2 from '../../../../assets/img/newTab/backgrounds/ntp-2.jpg'
-import Image3 from '../../../../assets/img/newTab/backgrounds/ntp-3.jpg'
-import Image4 from '../../../../assets/img/newTab/backgrounds/ntp-4.jpg'
-import Image5 from '../../../../assets/img/newTab/backgrounds/ntp-5.jpg'
-import Image6 from '../../../../assets/img/newTab/backgrounds/ntp-6.jpg'
-import Image7 from '../../../../assets/img/newTab/backgrounds/ntp-7.jpg'
-import Image8 from '../../../../assets/img/newTab/backgrounds/ntp-8.jpg'
-import Image9 from '../../../../assets/img/newTab/backgrounds/ntp-9.jpg'
-import Image10 from '../../../../assets/img/newTab/backgrounds/ntp-10.jpg'
-import Image11 from '../../../../assets/img/newTab/backgrounds/ntp-11.jpg'
-import Image12 from '../../../../assets/img/newTab/backgrounds/ntp-12.jpg'
-import Image13 from '../../../../assets/img/newTab/backgrounds/ntp-13.jpg'
-import Image14 from '../../../../assets/img/newTab/backgrounds/ntp-14.jpg'
-import Image15 from '../../../../assets/img/newTab/backgrounds/ntp-15.jpg'
-import Image16 from '../../../../assets/img/newTab/backgrounds/ntp-16.jpg'
+import Image1 from '../../../../img/newtab/ntp-1.webp'
+import Image2 from '../../../../img/newtab/ntp-2.webp'
+import Image3 from '../../../../img/newtab/ntp-3.webp'
+import Image4 from '../../../../img/newtab/ntp-4.webp'
+import Image5 from '../../../../img/newtab/ntp-5.webp'
+import Image6 from '../../../../img/newtab/ntp-6.webp'
+import Image7 from '../../../../img/newtab/ntp-7.webp'
+import Image8 from '../../../../img/newtab/ntp-8.webp'
+import Image9 from '../../../../img/newtab/ntp-9.webp'
+import Image10 from '../../../../img/newtab/ntp-10.webp'
+import Image11 from '../../../../img/newtab/ntp-11.webp'
+import Image12 from '../../../../img/newtab/ntp-12.webp'
+import Image13 from '../../../../img/newtab/ntp-13.webp'
+import Image14 from '../../../../img/newtab/ntp-14.webp'
+import Image15 from '../../../../img/newtab/ntp-15.webp'
+import Image16 from '../../../../img/newtab/ntp-16.webp'
 
 export const images = [
   {

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

@@ -2,12 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import AppStoreFavicon from '../../../../assets/img/newTab/topSites/appstore.png'
-import BraveFavicon from '../../../../assets/img/newTab/topSites/brave.png'
-import FacebookFavicon from '../../../../assets/img/newTab/topSites/facebook.png'
-import PlayStoreFavicon from '../../../../assets/img/newTab/topSites/playstore.png'
-import TwitterFavicon from '../../../../assets/img/newTab/topSites/twitter.png'
-import YouTubeFavicon from '../../../../assets/img/newTab/topSites/youtube.png'
+import AppStoreFavicon from './siteIcons/appstore.png'
+import BraveFavicon from './siteIcons/brave.png'
+import FacebookFavicon from './siteIcons/facebook.png'
+import PlayStoreFavicon from './siteIcons/playstore.png'
+import TwitterFavicon from './siteIcons/twitter.png'
+import YouTubeFavicon from './siteIcons/youtube.png'
 
 export const defaultTopSitesData = [
   {

components/brave_new_tab_ui/stories/default/footerInfo.tsx

@@ -5,10 +5,10 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Link, Navigation, IconLink, PhotoName } from '../../../../src/features/newTab/default'
+import { Link, Navigation, IconLink, PhotoName } from '../../components/default'
 
 // Icons
-import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from '../../../../src/components/icons'
+import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons'
 
 // Helpers
 import { getLocale } from '../fakeLocale'

components/brave_new_tab_ui/stories/default/index.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Page, Header, Main, Footer, DynamicBackground, Gradient, ClockWidget as Clock } from '../../../../src/features/newTab/default'
+import { Page, Header, Main, Footer, DynamicBackground, Gradient, ClockWidget as Clock } from '../../components/default'
 
 import Settings from './settings'
 import TopSitesList from './topSites/topSitesList'
@@ -17,9 +17,6 @@ import FooterInfo from './footerInfo'
 import { getRandomBackgroundData } from './helpers'
 import { images } from './data/background'
 
-import '../../../assets/fonts/muli.css'
-import '../../../assets/fonts/poppins.css'
-
 const generateRandomBackgroundData = getRandomBackgroundData(images)
 interface State {
   showSettings: boolean

components/brave_new_tab_ui/stories/default/settings.tsx

@@ -4,9 +4,9 @@
 
 import * as React from 'react'
 
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../../../src/features/newTab/default'
+import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../components/default'
 
-import { Toggle } from '../../../../src/features/newTab/toggle'
+import { Toggle } from '../../components/toggle'
 
 import { getLocale } from '../fakeLocale'
 

components/brave_new_tab_ui/stories/default/siteRemovalNotification.tsx

@@ -9,10 +9,10 @@ import {
   SiteRemovalNotification,
   SiteRemovalAction,
   SiteRemovalText
-} from '../../../../src/features/newTab/default'
+} from '../../components/default'
 
 // Icons
-import { CloseStrokeIcon } from '../../../../src/components/icons'
+import { CloseStrokeIcon } from 'brave-ui/components/icons'
 
 // Helpers
 import { getLocale } from '../fakeLocale'

components/brave_new_tab_ui/stories/default/stats.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react'
 
-import { StatsContainer, StatsItem } from '../../../../src/features/newTab/default'
+import { StatsContainer, StatsItem } from '../../components/default'
 
 // Helpers
 import { getLocale } from '../fakeLocale'

components/brave_new_tab_ui/stories/default/topSites/topSite.tsx

@@ -8,10 +8,10 @@ import * as React from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 
 // Feature-specific components
-import { Tile, TileActionsContainer, TileAction, TileFavicon } from '../../../../../src/features/newTab/default'
+import { Tile, TileActionsContainer, TileAction, TileFavicon } from '../../../components/default'
 
 // Icons
-import { PinIcon, BookmarkOIcon, CloseStrokeIcon } from '../../../../../src/components/icons'
+import { PinIcon, BookmarkOIcon, CloseStrokeIcon } from 'brave-ui/components/icons'
 
 interface Props {
   item: {

components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx

@@ -9,7 +9,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd'
 import { reorder, getItems } from '../helpers'
 
 // Feature-specific components
-import { List } from '../../../../../src/features/newTab/default'
+import { List } from '../../../components/default'
 import createWidget from '../../../components/default/widget'
 
 // Component group

components/brave_new_tab_ui/stories/private.tsx

@@ -9,7 +9,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs'
 // Components
 import NewPrivateTab from './private/index'
 
-storiesOf('Feature Components/New Tab/Private', module)
+storiesOf('New Tab/Private', module)
   .addDecorator(withKnobs)
   .add('Private Window', () => {
     return (

components/brave_new_tab_ui/stories/private/index.tsx

@@ -5,18 +5,14 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Page, PageWrapper } from '../../../../src/features/newTab/private'
+import { Page, PageWrapper } from '../../components/private'
 
 // Components group
 import PrivateWindow from './privateWindow'
 import QwantWindow from './qwantWindow'
 import TorWindow from './torWindow'
 import QwantTor from './qwantWindowWithTor'
 
-// Assets
-import '../../../assets/fonts/muli.css'
-import '../../../assets/fonts/poppins.css'
-
 interface Props {
   isTor: boolean
   isQwant: boolean