Merge pull request #21294 from brave/ksmith-background-urls

Update background image urls in Rewards CSS
brave · Dec 8, 2023 · eed9f10 · eed9f10
2 parents 1e3a2cf + 499f226
commit eed9f10
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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});
   }
 `