Merge pull request #27060 from brave/ksmith-rewards-3-card-img

[Rewards 3.0] Provide a fallback thumbnail for explore cards
brave · Dec 18, 2024 · 14229f5 · 14229f5
2 parents ec740d8 + 519898d
commit 14229f5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx b/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx
@@ -16,6 +16,10 @@ function sanitizeURL(url: string) {
   }
 }
 
+function faviconURL(item: UICardItem) {
+  return `chrome://favicon2/?size=64&pageUrl=${encodeURIComponent(item.url)}`
+}
+
 function thumbnailURL(url: string) {
   url = sanitizeURL(url)
   try {
@@ -34,9 +38,16 @@ interface Props {
 
 export function CardItemView(props: Props) {
   const { item } = props
+  const thumbnail = thumbnailURL(item.thumbnail)
   return (
     <NewTabLink href={sanitizeURL(item.url)}>
-      <img src={thumbnailURL(item.thumbnail)} />
+      <span className='thumbnail'>
+        {
+          thumbnail
+            ? <img src={thumbnail} />
+            : <img className='favicon' src={faviconURL(item)} />
+        }
+      </span>
       <span className='item-info'>
         <span className='title'>{item.title}</span>
         <span className='description'>{item.description}</span>

diff --git a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts b/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts
@@ -38,6 +38,10 @@ export const style = scoped.css`
       display: flex;
       flex-direction: column;
       gap: 8px;
+
+      &:empty {
+        display: none;
+      }
     }
   }
 
@@ -70,13 +74,28 @@ export const style = scoped.css`
     &:last-child {
       border-bottom: none;
     }
+  }
+
+  .thumbnail {
+    flex: 0 0 56px;
+    height: 56px;
+    width: 56px;
+    overflow: hidden;
+    border-radius: 12px;
+    border: solid 1px ${color.divider.subtle};
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     img {
-      flex: 0 0 56px;
-      height: 56px;
-      width: 56px;
-      border-radius: 12px;
-      border: solid 1px ${color.divider.subtle};
+      width: 100%;
+      height: auto;
+    }
+
+    .favicon {
+      width: 24px;
+      height: auto;
+      border-radius: 4px;
     }
   }