diff --git a/components/brave_rewards/resources/page/components/ads_control_view.style.ts b/components/brave_rewards/resources/page/components/ads_control_view.style.ts index 79c815e6f34d..1c11eb57dc30 100644 --- a/components/brave_rewards/resources/page/components/ads_control_view.style.ts +++ b/components/brave_rewards/resources/page/components/ads_control_view.style.ts @@ -24,7 +24,7 @@ export const root = styled.div.attrs({ width: auto; -webkit-appearance: none; background: - url(/${selectArrow}) calc(100% - 11px) center no-repeat, + url(${selectArrow}) calc(100% - 11px) center no-repeat, ${leo.color.container.highlight}; background-size: 11px; border-radius: 8px; @@ -36,7 +36,7 @@ export const root = styled.div.attrs({ &[disabled] { background: - url(/${selectArrow}) calc(100% - 11px) center no-repeat, + url(${selectArrow}) calc(100% - 11px) center no-repeat, ${leo.color.container.disabled}; background-size: 11px; color: ${leo.color.text.disabled} diff --git a/components/brave_rewards/resources/page/components/app_error.style.ts b/components/brave_rewards/resources/page/components/app_error.style.ts index 273a011163ed..ed6132a940f1 100644 --- a/components/brave_rewards/resources/page/components/app_error.style.ts +++ b/components/brave_rewards/resources/page/components/app_error.style.ts @@ -15,7 +15,7 @@ export const root = styled.div` ` export const title = styled.div` - background-image: url(/${errorBackground}); + background-image: url(${errorBackground}); background-repeat: no-repeat; background-position: center top; background-size: auto 50px; diff --git a/components/brave_rewards/resources/page/components/settings.style.ts b/components/brave_rewards/resources/page/components/settings.style.ts index 8dc60a1cd771..9a1eeb00a4ff 100644 --- a/components/brave_rewards/resources/page/components/settings.style.ts +++ b/components/brave_rewards/resources/page/components/settings.style.ts @@ -20,7 +20,7 @@ export const root = styled.div` select { -webkit-appearance: none; - background: url(/${selectArrow}) calc(100% - 12px) center no-repeat; + background: url(${selectArrow}) calc(100% - 12px) center no-repeat; background-size: 12px; width: 100%; border-radius: 4px; diff --git a/components/brave_rewards/resources/page/components/sidebar_promotion_panel.style.ts b/components/brave_rewards/resources/page/components/sidebar_promotion_panel.style.ts index 8ef3bb4a18cb..30161959c2bc 100644 --- a/components/brave_rewards/resources/page/components/sidebar_promotion_panel.style.ts +++ b/components/brave_rewards/resources/page/components/sidebar_promotion_panel.style.ts @@ -37,15 +37,15 @@ export const promotion = styled.div` background-repeat: no-repeat; &.promotion-brave-creators { - background-image: url(/${getBackgroundImage('brave-creators')}); + background-image: url(${getBackgroundImage('brave-creators')}); } &.promotion-tap-network { - background-image: url(/${getBackgroundImage('tap-network')}); + background-image: url(${getBackgroundImage('tap-network')}); } &.promotion-uphold-card { - background-image: url(/${getBackgroundImage('uphold-card')}); + background-image: url(${getBackgroundImage('uphold-card')}); } ` diff --git a/components/brave_rewards/resources/tip_panel/components/app.style.ts b/components/brave_rewards/resources/tip_panel/components/app.style.ts index 8503e605e92b..59bbce6ce898 100644 --- a/components/brave_rewards/resources/tip_panel/components/app.style.ts +++ b/components/brave_rewards/resources/tip_panel/components/app.style.ts @@ -66,7 +66,7 @@ export const error = styled.div` width: 100%; height: ${panelMinHeight}; padding: 100px 70px; - background: url(/${defaultBackgroundURL}); + background: url(${defaultBackgroundURL}); background-size: cover; display: flex; justify-content: center; diff --git a/components/brave_rewards/resources/tip_panel/components/creator_view.style.ts b/components/brave_rewards/resources/tip_panel/components/creator_view.style.ts index 7841c9a6e09f..7c7123615960 100644 --- a/components/brave_rewards/resources/tip_panel/components/creator_view.style.ts +++ b/components/brave_rewards/resources/tip_panel/components/creator_view.style.ts @@ -10,7 +10,7 @@ import * as leo from '@brave/leo/tokens/css' import defaultBackgroundURL from '../assets/default_background.svg' export const root = styled.div` - --creator-background-image-url: url(./${defaultBackgroundURL}); + --creator-background-image-url: url(${defaultBackgroundURL}); display: flex; flex-direction: column; diff --git a/components/brave_rewards/resources/tip_panel/components/tip_form.style.ts b/components/brave_rewards/resources/tip_panel/components/tip_form.style.ts index 63ae8991ba00..10cc4a444b21 100644 --- a/components/brave_rewards/resources/tip_panel/components/tip_form.style.ts +++ b/components/brave_rewards/resources/tip_panel/components/tip_form.style.ts @@ -26,20 +26,20 @@ export const root = styled.div` flex-direction: column; gap: 24px; - --form-background-url: url(./${formBackgroundURL}); + --form-background-url: url(${formBackgroundURL}); --form-background-gradient-color-1: #FFFFFF; --form-background-gradient-color-2: rgba(255, 255, 255, 0); - --success-background-1-url: url(./${successBackground1URL}); - --success-background-2-url: url(./${successBackground2URL}); - --success-background-3-url: url(./${successBackground3URL}); + --success-background-1-url: url(${successBackground1URL}); + --success-background-2-url: url(${successBackground2URL}); + --success-background-3-url: url(${successBackground3URL}); @media (prefers-color-scheme: dark) { - --form-background-url: url(./${formBackgroundDarkURL}); + --form-background-url: url(${formBackgroundDarkURL}); --form-background-gradient-color-1: #1E2025; --form-background-gradient-color-2: rgba(30, 32, 37, 0); - --success-background-1-url: url(./${successBackground1DarkURL}); - --success-background-2-url: url(./${successBackground2DarkURL}); - --success-background-3-url: url(./${successBackground3DarkURL}); + --success-background-1-url: url(${successBackground1DarkURL}); + --success-background-2-url: url(${successBackground2DarkURL}); + --success-background-3-url: url(${successBackground3DarkURL}); } `