diff --git a/browser/ui/webui/brave_welcome_ui.cc b/browser/ui/webui/brave_welcome_ui.cc index 303564ca66c2..67b5a84b198e 100644 --- a/browser/ui/webui/brave_welcome_ui.cc +++ b/browser/ui/webui/brave_welcome_ui.cc @@ -283,6 +283,8 @@ BraveWelcomeUI::BraveWelcomeUI(content::WebUI* web_ui, const std::string& name) content::GpuDataManager::GetInstance()->HardwareAccelerationEnabled()); profile->GetPrefs()->SetBoolean(prefs::kHasSeenWelcomePage, true); + + AddBackgroundColorToSource(source, web_ui->GetWebContents()); } BraveWelcomeUI::~BraveWelcomeUI() = default; diff --git a/components/brave_welcome_ui/api/web_animation_player.ts b/components/brave_welcome_ui/api/web_animation_player.ts index a6635d54b2dd..3e9822f18ea7 100644 --- a/components/brave_welcome_ui/api/web_animation_player.ts +++ b/components/brave_welcome_ui/api/web_animation_player.ts @@ -12,8 +12,9 @@ class WebAnimationPlayer { this.timingOption = timingOption } - to (element: Element | null, keyframeEffectOption: PropertyIndexedKeyframes) { - const kF = new KeyframeEffect(element, keyframeEffectOption, this.timingOption) + to (element: Element | null, keyFrame: PropertyIndexedKeyframes, keyFrameOption?: OptionalEffectTiming) { + const kFOptions = { ...this.timingOption, ...keyFrameOption } + const kF = new KeyframeEffect(element, keyFrame, kFOptions) const animation = new Animation(kF) this.animations.push(animation) return this diff --git a/components/brave_welcome_ui/assets/background@2x.jpg b/components/brave_welcome_ui/assets/background@2x.jpg deleted file mode 100644 index 6c335feeae0f..000000000000 Binary files a/components/brave_welcome_ui/assets/background@2x.jpg and /dev/null differ diff --git a/components/brave_welcome_ui/assets/background@2x.webp b/components/brave_welcome_ui/assets/background@2x.webp new file mode 100644 index 000000000000..935db7e637fe Binary files /dev/null and b/components/brave_welcome_ui/assets/background@2x.webp differ diff --git a/components/brave_welcome_ui/assets/brave_logo_3d@2x.png b/components/brave_welcome_ui/assets/brave_logo_3d@2x.png deleted file mode 100644 index 02f443c14481..000000000000 Binary files a/components/brave_welcome_ui/assets/brave_logo_3d@2x.png and /dev/null differ diff --git a/components/brave_welcome_ui/assets/brave_logo_3d@2x.webp b/components/brave_welcome_ui/assets/brave_logo_3d@2x.webp new file mode 100644 index 000000000000..300896bf1875 Binary files /dev/null and b/components/brave_welcome_ui/assets/brave_logo_3d@2x.webp differ diff --git a/components/brave_welcome_ui/assets/hill.png b/components/brave_welcome_ui/assets/hill.png deleted file mode 100644 index 47e51da5c2c3..000000000000 Binary files a/components/brave_welcome_ui/assets/hill.png and /dev/null differ diff --git a/components/brave_welcome_ui/assets/hill.webp b/components/brave_welcome_ui/assets/hill.webp new file mode 100644 index 000000000000..cd7db58e2857 Binary files /dev/null and b/components/brave_welcome_ui/assets/hill.webp differ diff --git a/components/brave_welcome_ui/assets/pyramid.png b/components/brave_welcome_ui/assets/pyramid.png deleted file mode 100644 index 5921e6913356..000000000000 Binary files a/components/brave_welcome_ui/assets/pyramid.png and /dev/null differ diff --git a/components/brave_welcome_ui/assets/pyramid.webp b/components/brave_welcome_ui/assets/pyramid.webp new file mode 100644 index 000000000000..a19ce791713f Binary files /dev/null and b/components/brave_welcome_ui/assets/pyramid.webp differ diff --git a/components/brave_welcome_ui/assets/sky.jpg b/components/brave_welcome_ui/assets/sky.jpg deleted file mode 100644 index bd312c3b334a..000000000000 Binary files a/components/brave_welcome_ui/assets/sky.jpg and /dev/null differ diff --git a/components/brave_welcome_ui/assets/sky.webp b/components/brave_welcome_ui/assets/sky.webp new file mode 100644 index 000000000000..846c13d8d53a Binary files /dev/null and b/components/brave_welcome_ui/assets/sky.webp differ diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html index 9ad946a72e53..2692e7752094 100644 --- a/components/brave_welcome_ui/brave_welcome.html +++ b/components/brave_welcome_ui/brave_welcome.html @@ -17,7 +17,10 @@ #root { height: 100%; width: 100%; } body { - background: black; + height: 100vh; + margin: 0; + padding: 0; + background: $i18n{backgroundColor}; } diff --git a/components/brave_welcome_ui/components/background/index.tsx b/components/brave_welcome_ui/components/background/index.tsx index e80ee4c1eb08..d6278a5c6f3f 100644 --- a/components/brave_welcome_ui/components/background/index.tsx +++ b/components/brave_welcome_ui/components/background/index.tsx @@ -5,26 +5,34 @@ import * as React from 'react' import * as S from './style' +import classnames from '$web-common/classnames' import WebAnimationPlayer from '../../api/web_animation_player' import DataContext from '../../state/context' +import { shouldPlayAnimations } from '../../state/hooks' import Stars01 from '../svg/stars01' import Stars02 from '../svg/stars02' import Stars03 from '../svg/stars03' import Stars04 from '../svg/stars04' +import fullCompositeBgUrl from '../../assets/background@2x.webp' +import skyBgUrl from '../../assets/sky.webp' interface BackgroundProps { children?: JSX.Element static: boolean + onLoad?: () => void } -function AnimatedBackground (props: { children?: JSX.Element }) { +function Background (props: BackgroundProps) { const ref = React.useRef(null) const { setScenes } = React.useContext(DataContext) + const [hasLoaded, setHasLoaded] = React.useState(false) + const isReadyForAnimation = hasLoaded && !props.static React.useEffect(() => { if (!ref.current) return + if (!isReadyForAnimation) return const s1 = new WebAnimationPlayer() const s2 = new WebAnimationPlayer() @@ -55,43 +63,66 @@ function AnimatedBackground (props: { children?: JSX.Element }) { .to(stars04, { transform: 'scale(1.5)' }) setScenes({ s1, s2 }) - }, []) + }, [isReadyForAnimation]) + + React.useEffect(() => { + if (!ref.current) return + if (!isReadyForAnimation) return + + const s1 = new WebAnimationPlayer() + const starsContainer = ref.current.querySelector('.stars-container') + const hillsContainer = ref.current.querySelector('.hills-container') + + s1.to(starsContainer, { opacity: 1 }, { delay: 250 }) + .to(hillsContainer, { opacity: 1 }, { delay: 250 }) + + const lastAnimationEl = s1.animations[s1.animations.length - 1] + lastAnimationEl.addEventListener('finish', () => props.onLoad?.()) + + s1.play() + }, [isReadyForAnimation]) + + const handleImgLoad = () => { + setHasLoaded(true) + + // When animations are disabled, we trigger onLoad instantly + if (!shouldPlayAnimations) { + props.onLoad?.() + } + } return ( - -
- - - - -
+ + {isReadyForAnimation && ( +
+ + + + +
+ )}
{props.children}
-
-
-
-
-
-
-
+ + {isReadyForAnimation && ( +
+
+
+
+
+
+ )} ) } -function Background (props: BackgroundProps) { - if (!props.static) { - return ( - {props.children} - - ) - } - - return ( - - {props.children} - - ) -} - export default Background diff --git a/components/brave_welcome_ui/components/background/style.ts b/components/brave_welcome_ui/components/background/style.ts index 168f46bb32c5..973da034277a 100644 --- a/components/brave_welcome_ui/components/background/style.ts +++ b/components/brave_welcome_ui/components/background/style.ts @@ -4,17 +4,15 @@ // you can obtain one at https://mozilla.org/MPL/2.0/. import styled from 'styled-components' -import skyeBgUrl from '../../assets/sky.jpg' -import hillBgUrl from '../../assets/hill.png' -import pyramidBgUrl from '../../assets/pyramid.png' -import backgroundUrl2x from '../../assets/background@2x.jpg' -export const Box = styled.div` +import hillBgUrl from '../../assets/hill.webp' +import pyramidBgUrl from '../../assets/pyramid.webp' +export const Box = styled.div` .content-box { position: fixed; width: 100%; - height: 100vh; + height: 100%; z-index: 999; display: flex; @@ -22,20 +20,61 @@ export const Box = styled.div` justify-content: center; } - .sky { + .background-img { position: fixed; - width: 100vw; - height: 100vh; - background: url(${skyeBgUrl}) no-repeat; - background-size: cover; + width: 100%; + height: 100%; z-index: 1; + object-fit: cover; + opacity: 0; + transition: opacity .2s ease-in; + + &.is-visible { + opacity: 1; + } } .hills-container { position: fixed; width: 100vw; - height: 100vh; + height: 100%; z-index: 2; + opacity: 0; + } + + .stars-container { + position: fixed; + width: 100vw; + height: 100%; + z-index: 50; + opacity: 0; + + svg { + width: 100%; + height: auto; + position: absolute; + transform-origin: center; + } + + .stars01 { + bottom: 0; + transform: scale(1.14); + filter: blur(3px); + } + + .stars02 { + top: 10%; + } + + .stars03 { + top: 15%; + } + + .stars04 { + top: 30%; + transform: scale(0.8); + opacity: 0; + } } .hills-base { @@ -76,48 +115,4 @@ export const Box = styled.div` z-index: 1; transform: translateX(20%); } - - .stars-container { - position: fixed; - width: 100vw; - height: 100vh; - z-index: 50; - - svg { - width: 100%; - height: auto; - position: absolute; - transform-origin: center; - } - - .stars01 { - bottom: 0; - transform: scale(1.14); - filter: blur(3px); - } - - .stars02 { - top: 10%; - } - - .stars03 { - top: 15%; - } - - .stars04 { - top: 30%; - transform: scale(0.8); - opacity: 0; - } - } -` - -export const StaticBackground = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100vh; - background: url(${backgroundUrl2x}) no-repeat center center; - background-size: cover; ` diff --git a/components/brave_welcome_ui/components/help-improve/style.ts b/components/brave_welcome_ui/components/help-improve/style.ts index 51b31d5a9cc0..6e8046c05a52 100644 --- a/components/brave_welcome_ui/components/help-improve/style.ts +++ b/components/brave_welcome_ui/components/help-improve/style.ts @@ -64,10 +64,10 @@ export const Grid = styled.div` width: 22px; height: 22px; border-radius: 4px; - border: 1px solid ${(p) => p.theme.color.interactive08}; + border: 1px solid #AEB1C2; &:checked { - accent-color: ${(p) => p.theme.color.interactive05}; + accent-color: #4C54D2; } } ` diff --git a/components/brave_welcome_ui/components/import-in-progress/index.tsx b/components/brave_welcome_ui/components/import-in-progress/index.tsx index 5083d870b632..35d44eef280f 100644 --- a/components/brave_welcome_ui/components/import-in-progress/index.tsx +++ b/components/brave_welcome_ui/components/import-in-progress/index.tsx @@ -7,11 +7,10 @@ import * as React from 'react' import * as S from './style' import DataContext from '../../state/context' -import { useShouldPlayAnimations } from '../../state/hooks' +import { shouldPlayAnimations } from '../../state/hooks' function ImportInProgress () { const { scenes } = React.useContext(DataContext) - const shouldPlayAnimations = useShouldPlayAnimations() const ref = React.useRef(null) React.useEffect(() => { diff --git a/components/brave_welcome_ui/components/loader/index.tsx b/components/brave_welcome_ui/components/loader/index.tsx new file mode 100644 index 000000000000..7af23adca75f --- /dev/null +++ b/components/brave_welcome_ui/components/loader/index.tsx @@ -0,0 +1,46 @@ +// Copyright (c) 2022 The Brave Authors. All rights reserved. +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this file, +// you can obtain one at https://mozilla.org/MPL/2.0/. + +import * as React from 'react' +import styled from 'styled-components' +import { LoaderIcon } from 'brave-ui/components/icons' + +const Loading = styled('div')` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +` + +const Graphic = styled('div')` + width: 50px; + height: 50px; + align-self: center; + + svg { + fill: white; + } +` + +export default function Loader () { + const [show, setShow] = React.useState(false) + + React.useEffect(() => { + const timerId = setTimeout(() => setShow(true), 100) + + return () => { + clearTimeout(timerId) + } + }, []) + + return ( + + + { show ? : null } + + + ) +} diff --git a/components/brave_welcome_ui/components/select-browser/style.ts b/components/brave_welcome_ui/components/select-browser/style.ts index 0cd643cbbe66..14412fa183d7 100644 --- a/components/brave_welcome_ui/components/select-browser/style.ts +++ b/components/brave_welcome_ui/components/select-browser/style.ts @@ -62,7 +62,7 @@ export const BrowserListBox = styled.div` justify-content: center; align-items: center; flex-direction: column; - color: ${(p) => p.theme.color.text01}; + color: #212529; border: 0; box-shadow: 0 0 0 4px var(--border-color); position: relative; @@ -97,4 +97,8 @@ export const ActionBox = styled.div` display: flex; grid-gap: 10px; margin-bottom: 40px; + + button { + color: white; + } ` diff --git a/components/brave_welcome_ui/components/select-profile/style.ts b/components/brave_welcome_ui/components/select-profile/style.ts index 1f7e0515c287..344bcd919ae6 100644 --- a/components/brave_welcome_ui/components/select-profile/style.ts +++ b/components/brave_welcome_ui/components/select-profile/style.ts @@ -63,7 +63,7 @@ export const MainBox = styled.div` ` export const ProfileListBox = styled.div` - color: ${(p) => p.theme.color.text01}; + color: #212529; font-size: 16px; font-weight: 400; margin-bottom: 55px; @@ -138,10 +138,10 @@ export const ProfileListBox = styled.div` width: 22px; height: 22px; border-radius: 4px; - border: 1px solid ${(p) => p.theme.color.interactive08}; + border: 1px solid #AEB1C2; &:checked { - accent-color: ${(p) => p.theme.color.interactive05}; + accent-color: #4C54D2; } } ` diff --git a/components/brave_welcome_ui/components/welcome/index.tsx b/components/brave_welcome_ui/components/welcome/index.tsx index 57eb239eab27..1805f0b661b0 100644 --- a/components/brave_welcome_ui/components/welcome/index.tsx +++ b/components/brave_welcome_ui/components/welcome/index.tsx @@ -4,20 +4,24 @@ // you can obtain one at https://mozilla.org/MPL/2.0/. import * as React from 'react' - import * as S from './style' -import DataContext from '../../state/context' -import { useShouldPlayAnimations } from '../../state/hooks' + +import classnames from '$web-common/classnames' +import { getLocale } from '$web-common/locale' +import Button from '$web-components/button' + import { WelcomeBrowserProxyImpl, DefaultBrowserBrowserProxyImpl } from '../../api/welcome_browser_proxy' +import WebAnimationPlayer from '../../api/web_animation_player' + +import DataContext from '../../state/context' import { ViewType } from '../../state/component_types' -import Button from '$web-components/button' -import { getLocale } from '$web-common/locale' -import braveLogoUrl from '../../assets/brave_logo_3d@2x.png' +import { shouldPlayAnimations } from '../../state/hooks' + +import braveLogoUrl from '../../assets/brave_logo_3d@2x.webp' function Welcome () { const { setViewType, scenes } = React.useContext(DataContext) const ref = React.useRef(null) - const shouldPlayAnimations = useShouldPlayAnimations() const handleSetAsDefaultBrowser = () => { WelcomeBrowserProxyImpl.getInstance().recordP3A({ currentScreen: ViewType.DefaultBrowser, isFinished: false, isSkipped: false }) @@ -36,44 +40,57 @@ function Welcome () { if (!ref.current) return if (!shouldPlayAnimations) return - const logoAnim: Animation = ref.current.animate({ - transform: 'translateY(-20px)', - filter: 'drop-shadow(7px 2px 5px rgba(14, 1, 41, 0.2)) drop-shadow(14px 3px 10px rgba(32, 5, 89, 0.3)) drop-shadow(20px 3px 15px rgba(37, 7, 87, 0.2)) drop-shadow(25px 5px 30px rgba(25, 3, 73, 0.1)) drop-shadow(50px 4px 50px rgba(19, 3, 40, 0.1))' - }, { duration: 1000, fill: 'forwards', easing: 'ease-out' }) + const logoBoxEl = ref.current.querySelector('.view-logo-box') + const backdropEl = ref.current.querySelector('.view-backdrop') + const contentEl = ref.current.querySelector('.view-content') + + const s1 = new WebAnimationPlayer() + + s1.to(logoBoxEl, { + transform: 'translateY(-20px)', + filter: 'drop-shadow(7px 2px 5px rgba(14, 1, 41, 0.2)) drop-shadow(14px 3px 10px rgba(32, 5, 89, 0.3)) drop-shadow(20px 3px 15px rgba(37, 7, 87, 0.2)) drop-shadow(25px 5px 30px rgba(25, 3, 73, 0.1)) drop-shadow(50px 4px 50px rgba(19, 3, 40, 0.1))' + }, { fill: 'forwards', easing: 'ease-out' }) + .to(backdropEl, { scale: 1, opacity: 1 }, { duration: 250, delay: 200, easing: 'ease-out' }) + .to(contentEl, { transform: 'translateY(0px)', opacity: 1 }, { duration: 250, delay: 200, easing: 'ease-out' }) + + s1.play() return () => { - logoAnim.finish() - logoAnim.cancel() + s1.finish() + s1.cancel() } }, []) return ( - -
+ +
-
-
-

{getLocale('braveWelcomeTitle')}

-

{getLocale('braveWelcomeDesc')}

+
+
+
+

{getLocale('braveWelcomeTitle')}

+

{getLocale('braveWelcomeDesc')}

+
+ + + +
- - - - +
) } diff --git a/components/brave_welcome_ui/components/welcome/style.ts b/components/brave_welcome_ui/components/welcome/style.ts index 1032ac87a2f2..eb18f868c474 100644 --- a/components/brave_welcome_ui/components/welcome/style.ts +++ b/components/brave_welcome_ui/components/welcome/style.ts @@ -6,10 +6,9 @@ import styled from 'styled-components' export const Box = styled.div` - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(15px); - border-radius: 30px; + position: relative; max-width: 800px; + border-radius: 30px; color: white; font-family: ${(p) => p.theme.fontFamily.heading}; display: flex; @@ -17,7 +16,22 @@ export const Box = styled.div` justify-content: center; flex-direction: column; text-align: center; - position: relative; + + .view-backdrop { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); + border-radius: 30px; + position: absolute; + top: 0; + z-index: 1; + width: 100%; + height: 100%; + + &.initial { + scale: 0.9; + opacity: 0; + } + } .view-header-box { display: grid; @@ -25,6 +39,17 @@ export const Box = styled.div` padding: 100px 40px 50px 40px; } + .view-content { + position: relative; + z-index: 3; + + // We define an initial state here if animations are enabled + &.initial { + transform: translateY(20px); + opacity: 0; + } + } + .view-details { grid-column: 2; } @@ -41,11 +66,13 @@ export const Box = styled.div` margin: 0; } - .brave-logo-box { + .view-logo-box { width: 150px; - height: 150px; + height: auto; position: absolute; top: calc(-160px / 2); + left: calc(50% - 160px/2); + z-index: 2; img { width: 100%; @@ -58,5 +85,11 @@ export const ActionBox = styled.div` display: flex; flex-direction: column; grid-gap: 10px; - margin-bottom: 40px; + padding: 0 40px; + max-width: 450px; + margin: 0 auto 40px auto; + + button { + color: white; + } ` diff --git a/components/brave_welcome_ui/main_container.tsx b/components/brave_welcome_ui/main_container.tsx index 044636667492..421985a5e0d2 100644 --- a/components/brave_welcome_ui/main_container.tsx +++ b/components/brave_welcome_ui/main_container.tsx @@ -6,22 +6,23 @@ import * as React from 'react' import DataContext from './state/context' -import { useShouldPlayAnimations } from './state/hooks' +import { shouldPlayAnimations } from './state/hooks' import { ViewType } from './state/component_types' import HelpImprove from './components/help-improve' import ImportInProgress from './components/import-in-progress' -import SelectBrowser from './components/select-browser' -import SelectProfile from './components/select-profile' -import SetupComplete from './components/setup-complete' import Background from './components/background' import Welcome from './components/welcome' +import Loader from './components/loader' + +const SelectBrowser = React.lazy(() => import('./components/select-browser')) +const SelectProfile = React.lazy(() => import('./components/select-profile')) +const SetupComplete = React.lazy(() => import('./components/setup-complete')) function MainContainer () { - const { viewType } = React.useContext(DataContext) - const shouldPlayAnimations = useShouldPlayAnimations() + const { viewType, setViewType } = React.useContext(DataContext) - let mainEl = + let mainEl = null if (viewType === ViewType.ImportSelectBrowser) { mainEl = @@ -47,9 +48,22 @@ function MainContainer () { mainEl = } + if (viewType === ViewType.DefaultBrowser) { + mainEl = + } + + const onBackgroundImgLoad = () => { + setViewType(ViewType.DefaultBrowser) + } + return ( - - {mainEl} + + }> + {mainEl} + ) } diff --git a/components/brave_welcome_ui/state/context.ts b/components/brave_welcome_ui/state/context.ts index 55012bc369bd..ae697da5f818 100644 --- a/components/brave_welcome_ui/state/context.ts +++ b/components/brave_welcome_ui/state/context.ts @@ -14,7 +14,7 @@ interface Store { setScenes: React.Dispatch> currentSelectedBrowser: string | undefined browserProfiles: BrowserProfile[] | undefined - viewType: ViewType + viewType: ViewType | undefined scenes: Scenes | undefined } @@ -25,7 +25,7 @@ const defaultStore = { setScenes: () => {}, currentSelectedBrowser: undefined, browserProfiles: undefined, - viewType: ViewType.DefaultBrowser, + viewType: undefined, scenes: undefined } diff --git a/components/brave_welcome_ui/state/data-context-provider.tsx b/components/brave_welcome_ui/state/data-context-provider.tsx index ddf42fd2c150..a06aa6048db1 100644 --- a/components/brave_welcome_ui/state/data-context-provider.tsx +++ b/components/brave_welcome_ui/state/data-context-provider.tsx @@ -15,7 +15,7 @@ interface DataContextProviderProps { } function DataContextProvider (props: DataContextProviderProps) { - const [viewType, setViewType] = React.useState(ViewType.DefaultBrowser) + const [viewType, setViewType] = React.useState(undefined) const [currentSelectedBrowser, setCurrentSelectedBrowser] = React.useState(undefined) const { browserProfiles } = useInitializeImportData() const { profileCountRef, incrementCount, decrementCount } = useProfileCount() diff --git a/components/brave_welcome_ui/state/hooks.ts b/components/brave_welcome_ui/state/hooks.ts index 82742324ce72..78ea0409064e 100644 --- a/components/brave_welcome_ui/state/hooks.ts +++ b/components/brave_welcome_ui/state/hooks.ts @@ -63,11 +63,5 @@ export function useProfileCount () { } } -export function useShouldPlayAnimations () { - const [shouldPlayAnimations] = React.useState( - loadTimeData.getBoolean('hardwareAccelerationEnabledAtStartup') && +export const shouldPlayAnimations = loadTimeData.getBoolean('hardwareAccelerationEnabledAtStartup') && !window.matchMedia('(prefers-reduced-motion: reduce)').matches - ) - - return shouldPlayAnimations -} diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx index 8cc9dc5c93e2..a8c23bb36a92 100644 --- a/components/brave_welcome_ui/stories/story.tsx +++ b/components/brave_welcome_ui/stories/story.tsx @@ -158,5 +158,5 @@ export const _Welcome = () => { } export const _Background = () => { - return + return } diff --git a/components/webpack/webpack.config.js b/components/webpack/webpack.config.js index d624b76dd992..66189c2fd243 100644 --- a/components/webpack/webpack.config.js +++ b/components/webpack/webpack.config.js @@ -118,8 +118,8 @@ module.exports = async function (env, argv) { loader: 'url-loader?limit=13000&minetype=application/font-woff' }, { - test: /\.(ttf|eot|ico|svg|png|jpg|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'file-loader' + test: /\.(ttf|eot|ico|svg|png|jpg|jpeg|gif|webp)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loaders: ['file-loader'] }, // In order to fix a memory leak in WDP we introduced the 'linkedom' // depencendy: https://github.com/brave/web-discovery-project/pull/197