From c82169b5ba5b5f4dd1d5f3d9511065de228af884 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 3 Jan 2024 15:03:03 +0800
Subject: [PATCH] Improve the fallback images on web

---
 .../patterns/LibraryCards/FallbackImage.tsx   | 1611 +----------------
 .../patterns/LibraryCards/LibraryGridCard.tsx |   12 +-
 .../patterns/LibraryCards/LibraryListCard.tsx |   12 +-
 .../web/components/tokens/stitches.config.ts  |    7 +
 .../static/fonts/FuturaBold/FuturaBold.otf    |  Bin 0 -> 17268 bytes
 packages/web/styles/globals.css               |    6 +
 6 files changed, 78 insertions(+), 1570 deletions(-)
 create mode 100644 packages/web/public/static/fonts/FuturaBold/FuturaBold.otf

diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
index b1c8bbd48..cb6f3b272 100644
--- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
+++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
@@ -1,4 +1,4 @@
-import { VStack } from '../../elements/LayoutPrimitives'
+import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
 
 type FallbackImageProps = {
   title: string
@@ -7,21 +7,7 @@ type FallbackImageProps = {
   fontSize: string
 }
 
-const colorsForStr = (str: string): string[] => {
-  try {
-    const idx = Math.abs(hashCode(str)) % (Colors.length - 1)
-    const color = Colors[idx]
-    if (color.colors[0] && color.colors[1]) {
-      return color.colors
-    }
-  } catch (err) {
-    console.log('error creating colors for', str)
-  }
-  return Colors[0].colors
-}
-
-export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
-  const colors = colorsForStr(props.title)
+export const GridFallbackImage = (props: FallbackImageProps): JSX.Element => {
   return (
     <VStack
       distribution="center"
@@ -29,1557 +15,58 @@ export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
       css={{
         width: props.width,
         height: props.height,
-        backgroundColor: colors[1],
-        color: colors[0],
-        fontSize: props.fontSize,
-        fontWeight: 'bold',
-        fontFamily: '$display',
-        overflow: 'hidden',
+        fontSize: '16px',
+        fontFamily: 'FuturaBold',
+        padding: '40px',
         borderRadius: '4px',
+        color: '$thFallbackImageForeground',
+        backgroundColor: '$thFallbackImageBackground',
       }}
     >
-      {props.title.substring(0, 1).toLocaleUpperCase()}
+      <SpanBox
+        css={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          wordBreak: 'break-word',
+          display: '-webkit-box',
+          '-webkit-line-clamp': '2',
+          '-webkit-box-orient': 'vertical',
+        }}
+      >
+        {props.title}
+      </SpanBox>
     </VStack>
   )
 }
 
-const hashCode = (str: string) => {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff
-  }
-  return hash
+export const ListFallbackImage = (props: FallbackImageProps): JSX.Element => {
+  return (
+    <VStack
+      distribution="center"
+      alignment="center"
+      css={{
+        width: props.width,
+        height: props.height,
+        fontSize: '16px',
+        fontFamily: 'FuturaBold',
+        padding: '5px',
+        borderRadius: '4px',
+        color: '$thFallbackImageForeground',
+        backgroundColor: '$thFallbackImageBackground',
+      }}
+    >
+      <SpanBox
+        css={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          wordBreak: 'break-word',
+          display: '-webkit-box',
+          '-webkit-line-clamp': '2',
+          '-webkit-box-orient': 'vertical',
+        }}
+      >
+        {props.title.substring(0, 3).toLocaleUpperCase()}
+      </SpanBox>
+    </VStack>
+  )
 }
-
-const Colors = [
-  {
-    name: 'Omolon',
-    colors: ['#091E3A', '#2F80ED', '#2D9EE0'],
-  },
-  {
-    name: 'Farhan',
-    colors: ['#9400D3', '#4B0082'],
-  },
-  {
-    name: 'Purple',
-    colors: ['#c84e89', '#F15F79'],
-  },
-  {
-    name: 'Ibtesam',
-    colors: ['#00F5A0', '#00D9F5'],
-  },
-  {
-    name: 'Radioactive Heat',
-    colors: ['#F7941E', '#72C6EF', '#00A651'],
-  },
-  {
-    name: 'The Sky And The Sea',
-    colors: ['#F7941E', '#004E8F'],
-  },
-  {
-    name: 'From Ice To Fire',
-    colors: ['#72C6EF', '#004E8F'],
-  },
-
-  {
-    name: 'Blue & Orange',
-    colors: ['#FD8112', '#0085CA'],
-  },
-  {
-    name: 'Purple Dream',
-    colors: ['#bf5ae0', '#a811da'],
-  },
-  {
-    name: 'Blu',
-    colors: ['#00416A', '#E4E5E6'],
-  },
-  {
-    name: 'Summer Breeze',
-    colors: ['#fbed96', '#abecd6'],
-  },
-  {
-    name: 'Ver',
-    colors: ['#FFE000', '#799F0C'],
-  },
-  {
-    name: 'Ver Black',
-    colors: ['#F7F8F8', '#ACBB78'],
-  },
-  {
-    name: 'Combi',
-    colors: ['#00416A', '#799F0C', '#FFE000'],
-  },
-  {
-    name: 'Anwar',
-    colors: ['#334d50', '#cbcaa5'],
-  },
-  {
-    name: 'Bluelagoo',
-    colors: ['#0052D4', '#4364F7', '#6FB1FC'],
-  },
-  {
-    name: 'Lunada',
-    colors: ['#5433FF', '#20BDFF', '#A5FECB'],
-  },
-  {
-    name: 'Reaqua',
-    colors: ['#799F0C', '#ACBB78'],
-  },
-  {
-    name: 'Mango',
-    colors: ['#ffe259', '#ffa751'],
-  },
-  {
-    name: 'Bupe',
-    colors: ['#00416A', '#E4E5E6'],
-  },
-  {
-    name: 'Rea',
-    colors: ['#FFE000', '#799F0C'],
-  },
-  {
-    name: 'Windy',
-    colors: ['#acb6e5', '#86fde8'],
-  },
-  {
-    name: 'Royal Blue',
-    colors: ['#536976', '#292E49'],
-  },
-  {
-    name: 'Royal Blue + Petrol',
-    colors: ['#BBD2C5', '#536976', '#292E49'],
-  },
-  {
-    name: 'Copper',
-    colors: ['#B79891', '#94716B'],
-  },
-  {
-    name: 'Anamnisar',
-    colors: ['#9796f0', '#fbc7d4'],
-  },
-  {
-    name: 'Petrol',
-    colors: ['#BBD2C5', '#536976'],
-  },
-  {
-    name: 'Sky',
-    colors: ['#076585', '#fff'],
-  },
-  {
-    name: 'Sel',
-    colors: ['#00467F', '#A5CC82'],
-  },
-  {
-    name: 'Afternoon',
-    colors: ['#000C40', '#607D8B'],
-  },
-  {
-    name: 'Skyline',
-    colors: ['#1488CC', '#2B32B2'],
-  },
-  {
-    name: 'DIMIGO',
-    colors: ['#ec008c', '#fc6767'],
-  },
-  {
-    name: 'Purple Love',
-    colors: ['#cc2b5e', '#753a88'],
-  },
-  {
-    name: 'Sexy Blue',
-    colors: ['#2193b0', '#6dd5ed'],
-  },
-  {
-    name: 'Blooker20',
-    colors: ['#e65c00', '#F9D423'],
-  },
-  {
-    name: 'Sea Blue',
-    colors: ['#2b5876', '#4e4376'],
-  },
-  {
-    name: 'Nimvelo',
-    colors: ['#314755', '#26a0da'],
-  },
-  {
-    name: 'Hazel',
-    colors: ['#77A1D3', '#79CBCA', '#E684AE'],
-  },
-  {
-    name: 'Noon to Dusk',
-    colors: ['#ff6e7f', '#bfe9ff'],
-  },
-  {
-    name: 'YouTube',
-    colors: ['#e52d27', '#b31217'],
-  },
-  {
-    name: 'Cool Brown',
-    colors: ['#603813', '#b29f94'],
-  },
-  {
-    name: 'Harmonic Energy',
-    colors: ['#16A085', '#F4D03F'],
-  },
-  {
-    name: 'Playing with Reds',
-    colors: ['#D31027', '#EA384D'],
-  },
-  {
-    name: 'Sunny Days',
-    colors: ['#EDE574', '#E1F5C4'],
-  },
-  {
-    name: 'Green Beach',
-    colors: ['#02AAB0', '#00CDAC'],
-  },
-  {
-    name: 'Intuitive Purple',
-    colors: ['#DA22FF', '#9733EE'],
-  },
-  {
-    name: 'Emerald Water',
-    colors: ['#348F50', '#56B4D3'],
-  },
-  {
-    name: 'Lemon Twist',
-    colors: ['#3CA55C', '#B5AC49'],
-  },
-  {
-    name: 'Monte Carlo',
-    colors: ['#CC95C0', '#DBD4B4', '#7AA1D2'],
-  },
-  {
-    name: 'Horizon',
-    colors: ['#003973', '#E5E5BE'],
-  },
-  {
-    name: 'Rose Water',
-    colors: ['#E55D87', '#5FC3E4'],
-  },
-  {
-    name: 'Frozen',
-    colors: ['#403B4A', '#E7E9BB'],
-  },
-  {
-    name: 'Mango Pulp',
-    colors: ['#F09819', '#EDDE5D'],
-  },
-  {
-    name: 'Bloody Mary',
-    colors: ['#FF512F', '#DD2476'],
-  },
-  {
-    name: 'Aubergine',
-    colors: ['#AA076B', '#61045F'],
-  },
-  {
-    name: 'Aqua Marine',
-    colors: ['#1A2980', '#26D0CE'],
-  },
-  {
-    name: 'Sunrise',
-    colors: ['#FF512F', '#F09819'],
-  },
-  {
-    name: 'Purple Paradise',
-    colors: ['#1D2B64', '#F8CDDA'],
-  },
-  {
-    name: 'Stripe',
-    colors: ['#1FA2FF', '#12D8FA', '#A6FFCB'],
-  },
-  {
-    name: 'Sea Weed',
-    colors: ['#4CB8C4', '#3CD3AD'],
-  },
-  {
-    name: 'Pinky',
-    colors: ['#DD5E89', '#F7BB97'],
-  },
-  {
-    name: 'Cherry',
-    colors: ['#EB3349', '#F45C43'],
-  },
-  {
-    name: 'Mojito',
-    colors: ['#1D976C', '#93F9B9'],
-  },
-  {
-    name: 'Juicy Orange',
-    colors: ['#FF8008', '#FFC837'],
-  },
-  {
-    name: 'Mirage',
-    colors: ['#16222A', '#3A6073'],
-  },
-  {
-    name: 'Steel Gray',
-    colors: ['#1F1C2C', '#928DAB'],
-  },
-  {
-    name: 'Kashmir',
-    colors: ['#614385', '#516395'],
-  },
-  {
-    name: 'Electric Violet',
-    colors: ['#4776E6', '#8E54E9'],
-  },
-  {
-    name: 'Venice Blue',
-    colors: ['#085078', '#85D8CE'],
-  },
-  {
-    name: 'Bora Bora',
-    colors: ['#2BC0E4', '#EAECC6'],
-  },
-  {
-    name: 'Moss',
-    colors: ['#134E5E', '#71B280'],
-  },
-  {
-    name: 'Shroom Haze',
-    colors: ['#5C258D', '#4389A2'],
-  },
-  {
-    name: 'Mystic',
-    colors: ['#757F9A', '#D7DDE8'],
-  },
-  {
-    name: 'Midnight City',
-    colors: ['#232526', '#414345'],
-  },
-  {
-    name: 'Sea Blizz',
-    colors: ['#1CD8D2', '#93EDC7'],
-  },
-  {
-    name: 'Opa',
-    colors: ['#3D7EAA', '#FFE47A'],
-  },
-  {
-    name: 'Titanium',
-    colors: ['#283048', '#859398'],
-  },
-  {
-    name: 'Mantle',
-    colors: ['#24C6DC', '#514A9D'],
-  },
-  {
-    name: 'Dracula',
-    colors: ['#DC2424', '#4A569D'],
-  },
-  {
-    name: 'Peach',
-    colors: ['#ED4264', '#FFEDBC'],
-  },
-  {
-    name: 'Moonrise',
-    colors: ['#DAE2F8', '#D6A4A4'],
-  },
-  {
-    name: 'Clouds',
-    colors: ['#ECE9E6', '#FFFFFF'],
-  },
-  {
-    name: 'Stellar',
-    colors: ['#7474BF', '#348AC7'],
-  },
-  {
-    name: 'Bourbon',
-    colors: ['#EC6F66', '#F3A183'],
-  },
-  {
-    name: 'Calm Darya',
-    colors: ['#5f2c82', '#49a09d'],
-  },
-  {
-    name: 'Influenza',
-    colors: ['#C04848', '#480048'],
-  },
-  {
-    name: 'Shrimpy',
-    colors: ['#e43a15', '#e65245'],
-  },
-  {
-    name: 'Army',
-    colors: ['#414d0b', '#727a17'],
-  },
-  {
-    name: 'Miaka',
-    colors: ['#FC354C', '#0ABFBC'],
-  },
-  {
-    name: 'Pinot Noir',
-    colors: ['#4b6cb7', '#182848'],
-  },
-  {
-    name: 'Day Tripper',
-    colors: ['#f857a6', '#ff5858'],
-  },
-  {
-    name: 'Namn',
-    colors: ['#a73737', '#7a2828'],
-  },
-  {
-    name: 'Blurry Beach',
-    colors: ['#d53369', '#cbad6d'],
-  },
-  {
-    name: 'Vasily',
-    colors: ['#e9d362', '#333333'],
-  },
-  {
-    name: 'A Lost Memory',
-    colors: ['#DE6262', '#FFB88C'],
-  },
-  {
-    name: 'Petrichor',
-    colors: ['#666600', '#999966'],
-  },
-  {
-    name: 'Jonquil',
-    colors: ['#FFEEEE', '#DDEFBB'],
-  },
-  {
-    name: 'Sirius Tamed',
-    colors: ['#EFEFBB', '#D4D3DD'],
-  },
-  {
-    name: 'Kyoto',
-    colors: ['#c21500', '#ffc500'],
-  },
-  {
-    name: 'Misty Meadow',
-    colors: ['#215f00', '#e4e4d9'],
-  },
-  {
-    name: 'Aqualicious',
-    colors: ['#50C9C3', '#96DEDA'],
-  },
-  {
-    name: 'Moor',
-    colors: ['#616161', '#9bc5c3'],
-  },
-  {
-    name: 'Almost',
-    colors: ['#ddd6f3', '#faaca8'],
-  },
-  {
-    name: 'Forever Lost',
-    colors: ['#5D4157', '#A8CABA'],
-  },
-  {
-    name: 'Winter',
-    colors: ['#E6DADA', '#274046'],
-  },
-  {
-    name: 'Nelson',
-    colors: ['#f2709c', '#ff9472'],
-  },
-  {
-    name: 'Autumn',
-    colors: ['#DAD299', '#B0DAB9'],
-  },
-  {
-    name: 'Candy',
-    colors: ['#D3959B', '#BFE6BA'],
-  },
-  {
-    name: 'Reef',
-    colors: ['#00d2ff', '#3a7bd5'],
-  },
-  {
-    name: 'The Strain',
-    colors: ['#870000', '#190A05'],
-  },
-  {
-    name: 'Dirty Fog',
-    colors: ['#B993D6', '#8CA6DB'],
-  },
-  {
-    name: 'Earthly',
-    colors: ['#649173', '#DBD5A4'],
-  },
-  {
-    name: 'Virgin',
-    colors: ['#C9FFBF', '#FFAFBD'],
-  },
-  {
-    name: 'Ash',
-    colors: ['#606c88', '#3f4c6b'],
-  },
-  {
-    name: 'Cherryblossoms',
-    colors: ['#FBD3E9', '#BB377D'],
-  },
-  {
-    name: 'Parklife',
-    colors: ['#ADD100', '#7B920A'],
-  },
-  {
-    name: 'Dance To Forget',
-    colors: ['#FF4E50', '#F9D423'],
-  },
-  {
-    name: 'Starfall',
-    colors: ['#F0C27B', '#4B1248'],
-  },
-  {
-    name: 'Red Mist',
-    colors: ['#000000', '#e74c3c'],
-  },
-  {
-    name: 'Teal Love',
-    colors: ['#AAFFA9', '#11FFBD'],
-  },
-  {
-    name: 'Neon Life',
-    colors: ['#B3FFAB', '#12FFF7'],
-  },
-  {
-    name: 'Man of Steel',
-    colors: ['#780206', '#061161'],
-  },
-  {
-    name: 'Amethyst',
-    colors: ['#9D50BB', '#6E48AA'],
-  },
-  {
-    name: 'Cheer Up Emo Kid',
-    colors: ['#556270', '#FF6B6B'],
-  },
-  {
-    name: 'Shore',
-    colors: ['#70e1f5', '#ffd194'],
-  },
-  {
-    name: 'Facebook Messenger',
-    colors: ['#00c6ff', '#0072ff'],
-  },
-  {
-    name: 'SoundCloud',
-    colors: ['#fe8c00', '#f83600'],
-  },
-  {
-    name: 'Behongo',
-    colors: ['#52c234', '#061700'],
-  },
-  {
-    name: 'ServQuick',
-    colors: ['#485563', '#29323c'],
-  },
-  {
-    name: 'Friday',
-    colors: ['#83a4d4', '#b6fbff'],
-  },
-  {
-    name: 'Martini',
-    colors: ['#FDFC47', '#24FE41'],
-  },
-  {
-    name: 'Metallic Toad',
-    colors: ['#abbaab', '#ffffff'],
-  },
-  {
-    name: 'Between The Clouds',
-    colors: ['#73C8A9', '#373B44'],
-  },
-  {
-    name: 'Crazy Orange I',
-    colors: ['#D38312', '#A83279'],
-  },
-  {
-    name: 'Hersheys',
-    colors: ['#1e130c', '#9a8478'],
-  },
-  {
-    name: 'Talking To Mice Elf',
-    colors: ['#948E99', '#2E1437'],
-  },
-  {
-    name: 'Purple Bliss',
-    colors: ['#360033', '#0b8793'],
-  },
-  {
-    name: 'Predawn',
-    colors: ['#FFA17F', '#00223E'],
-  },
-  {
-    name: 'Endless River',
-    colors: ['#43cea2', '#185a9d'],
-  },
-  {
-    name: 'Pastel Orange at the Sun',
-    colors: ['#ffb347', '#ffcc33'],
-  },
-  {
-    name: 'Twitch',
-    colors: ['#6441A5', '#2a0845'],
-  },
-  {
-    name: 'Atlas',
-    colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
-  },
-  {
-    name: 'Instagram',
-    colors: ['#833ab4', '#fd1d1d', '#fcb045'],
-  },
-  {
-    name: 'Flickr',
-    colors: ['#ff0084', '#33001b'],
-  },
-  {
-    name: 'Vine',
-    colors: ['#00bf8f', '#001510'],
-  },
-  {
-    name: 'Turquoise flow',
-    colors: ['#136a8a', '#267871'],
-  },
-  {
-    name: 'Portrait',
-    colors: ['#8e9eab', '#eef2f3'],
-  },
-  {
-    name: 'Virgin America',
-    colors: ['#7b4397', '#dc2430'],
-  },
-  {
-    name: 'Koko Caramel',
-    colors: ['#D1913C', '#FFD194'],
-  },
-  {
-    name: 'Fresh Turboscent',
-    colors: ['#F1F2B5', '#135058'],
-  },
-  {
-    name: 'Green to dark',
-    colors: ['#6A9113', '#141517'],
-  },
-  {
-    name: 'Ukraine',
-    colors: ['#004FF9', '#FFF94C'],
-  },
-  {
-    name: 'Curiosity blue',
-    colors: ['#525252', '#3d72b4'],
-  },
-  {
-    name: 'Dark Knight',
-    colors: ['#BA8B02', '#181818'],
-  },
-  {
-    name: 'Piglet',
-    colors: ['#ee9ca7', '#ffdde1'],
-  },
-  {
-    name: 'Lizard',
-    colors: ['#304352', '#d7d2cc'],
-  },
-  {
-    name: 'Sage Persuasion',
-    colors: ['#CCCCB2', '#757519'],
-  },
-  {
-    name: 'Between Night and Day',
-    colors: ['#2c3e50', '#3498db'],
-  },
-  {
-    name: 'Timber',
-    colors: ['#fc00ff', '#00dbde'],
-  },
-  {
-    name: 'Passion',
-    colors: ['#e53935', '#e35d5b'],
-  },
-  {
-    name: 'Clear Sky',
-    colors: ['#005C97', '#363795'],
-  },
-  {
-    name: 'Master Card',
-    colors: ['#f46b45', '#eea849'],
-  },
-  {
-    name: 'Back To Earth',
-    colors: ['#00C9FF', '#92FE9D'],
-  },
-  {
-    name: 'Deep Purple',
-    colors: ['#673AB7', '#512DA8'],
-  },
-  {
-    name: 'Little Leaf',
-    colors: ['#76b852', '#8DC26F'],
-  },
-  {
-    name: 'Netflix',
-    colors: ['#8E0E00', '#1F1C18'],
-  },
-  {
-    name: 'Light Orange',
-    colors: ['#FFB75E', '#ED8F03'],
-  },
-  {
-    name: 'Green and Blue',
-    colors: ['#c2e59c', '#64b3f4'],
-  },
-  {
-    name: 'Poncho',
-    colors: ['#403A3E', '#BE5869'],
-  },
-  {
-    name: 'Back to the Future',
-    colors: ['#C02425', '#F0CB35'],
-  },
-  {
-    name: 'Blush',
-    colors: ['#B24592', '#F15F79'],
-  },
-  {
-    name: 'Inbox',
-    colors: ['#457fca', '#5691c8'],
-  },
-  {
-    name: 'Purplin',
-    colors: ['#6a3093', '#a044ff'],
-  },
-  {
-    name: 'Pale Wood',
-    colors: ['#eacda3', '#d6ae7b'],
-  },
-  {
-    name: 'Haikus',
-    colors: ['#fd746c', '#ff9068'],
-  },
-  {
-    name: 'Pizelex',
-    colors: ['#114357', '#F29492'],
-  },
-  {
-    name: 'Joomla',
-    colors: ['#1e3c72', '#2a5298'],
-  },
-  {
-    name: 'Christmas',
-    colors: ['#2F7336', '#AA3A38'],
-  },
-  {
-    name: 'Minnesota Vikings',
-    colors: ['#5614B0', '#DBD65C'],
-  },
-  {
-    name: 'Miami Dolphins',
-    colors: ['#4DA0B0', '#D39D38'],
-  },
-  {
-    name: 'Forest',
-    colors: ['#5A3F37', '#2C7744'],
-  },
-  {
-    name: 'Nighthawk',
-    colors: ['#2980b9', '#2c3e50'],
-  },
-  {
-    name: 'Superman',
-    colors: ['#0099F7', '#F11712'],
-  },
-  {
-    name: 'Suzy',
-    colors: ['#834d9b', '#d04ed6'],
-  },
-  {
-    name: 'Dark Skies',
-    colors: ['#4B79A1', '#283E51'],
-  },
-  {
-    name: 'Deep Space',
-    colors: ['#000000', '#434343'],
-  },
-  {
-    name: 'Decent',
-    colors: ['#4CA1AF', '#C4E0E5'],
-  },
-  {
-    name: 'Colors Of Sky',
-    colors: ['#E0EAFC', '#CFDEF3'],
-  },
-  {
-    name: 'Purple White',
-    colors: ['#BA5370', '#F4E2D8'],
-  },
-  {
-    name: 'Ali',
-    colors: ['#ff4b1f', '#1fddff'],
-  },
-  {
-    name: 'Alihossein',
-    colors: ['#f7ff00', '#db36a4'],
-  },
-  {
-    name: 'Shahabi',
-    colors: ['#a80077', '#66ff00'],
-  },
-  {
-    name: 'Red Ocean',
-    colors: ['#1D4350', '#A43931'],
-  },
-  {
-    name: 'Tranquil',
-    colors: ['#EECDA3', '#EF629F'],
-  },
-  {
-    name: 'Transfile',
-    colors: ['#16BFFD', '#CB3066'],
-  },
-
-  {
-    name: 'Sylvia',
-    colors: ['#ff4b1f', '#ff9068'],
-  },
-  {
-    name: 'Sweet Morning',
-    colors: ['#FF5F6D', '#FFC371'],
-  },
-  {
-    name: 'Politics',
-    colors: ['#2196f3', '#f44336'],
-  },
-  {
-    name: 'Bright Vault',
-    colors: ['#00d2ff', '#928DAB'],
-  },
-  {
-    name: 'Solid Vault',
-    colors: ['#3a7bd5', '#3a6073'],
-  },
-  {
-    name: 'Sunset',
-    colors: ['#0B486B', '#F56217'],
-  },
-  {
-    name: 'Grapefruit Sunset',
-    colors: ['#e96443', '#904e95'],
-  },
-  {
-    name: 'Deep Sea Space',
-    colors: ['#2C3E50', '#4CA1AF'],
-  },
-  {
-    name: 'Dusk',
-    colors: ['#2C3E50', '#FD746C'],
-  },
-  {
-    name: 'Minimal Red',
-    colors: ['#F00000', '#DC281E'],
-  },
-  {
-    name: 'Royal',
-    colors: ['#141E30', '#243B55'],
-  },
-  {
-    name: 'Mauve',
-    colors: ['#42275a', '#734b6d'],
-  },
-  {
-    name: 'Frost',
-    colors: ['#000428', '#004e92'],
-  },
-  {
-    name: 'Lush',
-    colors: ['#56ab2f', '#a8e063'],
-  },
-  {
-    name: 'Firewatch',
-    colors: ['#cb2d3e', '#ef473a'],
-  },
-  {
-    name: 'Sherbert',
-    colors: ['#f79d00', '#64f38c'],
-  },
-  {
-    name: 'Blood Red',
-    colors: ['#f85032', '#e73827'],
-  },
-  {
-    name: 'Sun on the Horizon',
-    colors: ['#fceabb', '#f8b500'],
-  },
-  {
-    name: 'IIIT Delhi',
-    colors: ['#808080', '#3fada8'],
-  },
-  {
-    name: 'Jupiter',
-    colors: ['#ffd89b', '#19547b'],
-  },
-  {
-    name: '50 Shades of Grey',
-    colors: ['#bdc3c7', '#2c3e50'],
-  },
-  {
-    name: 'Dania',
-    colors: ['#BE93C5', '#7BC6CC'],
-  },
-  {
-    name: 'Limeade',
-    colors: ['#A1FFCE', '#FAFFD1'],
-  },
-  {
-    name: 'Disco',
-    colors: ['#4ECDC4', '#556270'],
-  },
-  {
-    name: 'Love Couple',
-    colors: ['#3a6186', '#89253e'],
-  },
-  {
-    name: 'Azure Pop',
-    colors: ['#ef32d9', '#89fffd'],
-  },
-  {
-    name: 'Nepal',
-    colors: ['#de6161', '#2657eb'],
-  },
-  {
-    name: 'Cosmic Fusion',
-    colors: ['#ff00cc', '#333399'],
-  },
-  {
-    name: 'Snapchat',
-    colors: ['#fffc00', '#ffffff'],
-  },
-  {
-    name: "Ed's Sunset Gradient",
-    colors: ['#ff7e5f', '#feb47b'],
-  },
-  {
-    name: 'Brady Brady Fun Fun',
-    colors: ['#00c3ff', '#ffff1c'],
-  },
-  {
-    name: 'Black Rosé',
-    colors: ['#f4c4f3', '#fc67fa'],
-  },
-  {
-    name: "80's Purple",
-    colors: ['#41295a', '#2F0743'],
-  },
-  {
-    name: 'Radar',
-    colors: ['#A770EF', '#CF8BF3', '#FDB99B'],
-  },
-  {
-    name: 'Ibiza Sunset',
-    colors: ['#ee0979', '#ff6a00'],
-  },
-  {
-    name: 'Dawn',
-    colors: ['#F3904F', '#3B4371'],
-  },
-  {
-    name: 'Mild',
-    colors: ['#67B26F', '#4ca2cd'],
-  },
-  {
-    name: 'Vice City',
-    colors: ['#3494E6', '#EC6EAD'],
-  },
-  {
-    name: 'Jaipur',
-    colors: ['#DBE6F6', '#C5796D'],
-  },
-  {
-    name: 'Jodhpur',
-    colors: ['#9CECFB', '#65C7F7', '#0052D4'],
-  },
-  {
-    name: 'Cocoaa Ice',
-    colors: ['#c0c0aa', '#1cefff'],
-  },
-  {
-    name: 'EasyMed',
-    colors: ['#DCE35B', '#45B649'],
-  },
-  {
-    name: 'Rose Colored Lenses',
-    colors: ['#E8CBC0', '#636FA4'],
-  },
-  {
-    name: 'What lies Beyond',
-    colors: ['#F0F2F0', '#000C40'],
-  },
-  {
-    name: 'Roseanna',
-    colors: ['#FFAFBD', '#ffc3a0'],
-  },
-  {
-    name: 'Honey Dew',
-    colors: ['#43C6AC', '#F8FFAE'],
-  },
-  {
-    name: 'Under the Lake',
-    colors: ['#093028', '#237A57'],
-  },
-  {
-    name: 'The Blue Lagoon',
-    colors: ['#43C6AC', '#191654'],
-  },
-  {
-    name: 'Can You Feel The Love Tonight',
-    colors: ['#4568DC', '#B06AB3'],
-  },
-  {
-    name: 'Very Blue',
-    colors: ['#0575E6', '#021B79'],
-  },
-  {
-    name: 'Love and Liberty',
-    colors: ['#200122', '#6f0000'],
-  },
-  {
-    name: 'Orca',
-    colors: ['#44A08D', '#093637'],
-  },
-  {
-    name: 'Venice',
-    colors: ['#6190E8', '#A7BFE8'],
-  },
-  {
-    name: 'Pacific Dream',
-    colors: ['#34e89e', '#0f3443'],
-  },
-  {
-    name: 'Learning and Leading',
-    colors: ['#F7971E', '#FFD200'],
-  },
-  {
-    name: 'Celestial',
-    colors: ['#C33764', '#1D2671'],
-  },
-  {
-    name: 'Purplepine',
-    colors: ['#20002c', '#cbb4d4'],
-  },
-  {
-    name: 'Sha la la',
-    colors: ['#D66D75', '#E29587'],
-  },
-  {
-    name: 'Mini',
-    colors: ['#30E8BF', '#FF8235'],
-  },
-  {
-    name: 'Maldives',
-    colors: ['#B2FEFA', '#0ED2F7'],
-  },
-  {
-    name: 'Cinnamint',
-    colors: ['#4AC29A', '#BDFFF3'],
-  },
-  {
-    name: 'Html',
-    colors: ['#E44D26', '#F16529'],
-  },
-  {
-    name: 'Coal',
-    colors: ['#EB5757', '#000000'],
-  },
-  {
-    name: 'Sunkist',
-    colors: ['#F2994A', '#F2C94C'],
-  },
-  {
-    name: 'Blue Skies',
-    colors: ['#56CCF2', '#2F80ED'],
-  },
-  {
-    name: 'Chitty Chitty Bang Bang',
-    colors: ['#007991', '#78ffd6'],
-  },
-  {
-    name: 'Visions of Grandeur',
-    colors: ['#000046', '#1CB5E0'],
-  },
-  {
-    name: 'Crystal Clear',
-    colors: ['#159957', '#155799'],
-  },
-  {
-    name: 'Mello',
-    colors: ['#c0392b', '#8e44ad'],
-  },
-  {
-    name: 'Compare Now',
-    colors: ['#EF3B36', '#FFFFFF'],
-  },
-  {
-    name: 'Meridian',
-    colors: ['#283c86', '#45a247'],
-  },
-  {
-    name: 'Relay',
-    colors: ['#3A1C71', '#D76D77', '#FFAF7B'],
-  },
-  {
-    name: 'Alive',
-    colors: ['#CB356B', '#BD3F32'],
-  },
-  {
-    name: 'Scooter',
-    colors: ['#36D1DC', '#5B86E5'],
-  },
-  {
-    name: 'Terminal',
-    colors: ['#000000', '#0f9b0f'],
-  },
-  {
-    name: 'Telegram',
-    colors: ['#1c92d2', '#f2fcfe'],
-  },
-  {
-    name: 'Crimson Tide',
-    colors: ['#642B73', '#C6426E'],
-  },
-  {
-    name: 'Socialive',
-    colors: ['#06beb6', '#48b1bf'],
-  },
-  {
-    name: 'Subu',
-    colors: ['#0cebeb', '#20e3b2', '#29ffc6'],
-  },
-  {
-    name: 'Broken Hearts',
-    colors: ['#d9a7c7', '#fffcdc'],
-  },
-  {
-    name: 'Kimoby Is The New Blue',
-    colors: ['#396afc', '#2948ff'],
-  },
-  {
-    name: 'Dull',
-    colors: ['#C9D6FF', '#E2E2E2'],
-  },
-  {
-    name: 'Purpink',
-    colors: ['#7F00FF', '#E100FF'],
-  },
-  {
-    name: 'Orange Coral',
-    colors: ['#ff9966', '#ff5e62'],
-  },
-  {
-    name: 'Summer',
-    colors: ['#22c1c3', '#fdbb2d'],
-  },
-  {
-    name: 'King Yna',
-    colors: ['#1a2a6c', '#b21f1f', '#fdbb2d'],
-  },
-  {
-    name: 'Velvet Sun',
-    colors: ['#e1eec3', '#f05053'],
-  },
-  {
-    name: 'Zinc',
-    colors: ['#ADA996', '#F2F2F2', '#DBDBDB', '#EAEAEA'],
-  },
-  {
-    name: 'Hydrogen',
-    colors: ['#667db6', '#0082c8', '#0082c8', '#667db6'],
-  },
-  {
-    name: 'Argon',
-    colors: ['#03001e', '#7303c0', '#ec38bc', '#fdeff9'],
-  },
-  {
-    name: 'Lithium',
-    colors: ['#6D6027', '#D3CBB8'],
-  },
-  {
-    name: 'Digital Water',
-    colors: ['#74ebd5', '#ACB6E5'],
-  },
-  {
-    name: 'Orange Fun',
-    colors: ['#fc4a1a', '#f7b733'],
-  },
-  {
-    name: 'Rainbow Blue',
-    colors: ['#00F260', '#0575E6'],
-  },
-  {
-    name: 'Pink Flavour',
-    colors: ['#800080', '#ffc0cb'],
-  },
-  {
-    name: 'Sulphur',
-    colors: ['#CAC531', '#F3F9A7'],
-  },
-  {
-    name: 'Selenium',
-    colors: ['#3C3B3F', '#605C3C'],
-  },
-  {
-    name: 'Delicate',
-    colors: ['#D3CCE3', '#E9E4F0'],
-  },
-  {
-    name: 'Ohhappiness',
-    colors: ['#00b09b', '#96c93d'],
-  },
-  {
-    name: 'Lawrencium',
-    colors: ['#0f0c29', '#302b63', '#24243e'],
-  },
-  {
-    name: 'Relaxing red',
-    colors: ['#fffbd5', '#b20a2c'],
-  },
-  {
-    name: 'Taran Tado',
-    colors: ['#23074d', '#cc5333'],
-  },
-  {
-    name: 'Bighead',
-    colors: ['#c94b4b', '#4b134f'],
-  },
-  {
-    name: 'Sublime Vivid',
-    colors: ['#FC466B', '#3F5EFB'],
-  },
-  {
-    name: 'Sublime Light',
-    colors: ['#FC5C7D', '#6A82FB'],
-  },
-  {
-    name: 'Pun Yeta',
-    colors: ['#108dc7', '#ef8e38'],
-  },
-  {
-    name: 'Quepal',
-    colors: ['#11998e', '#38ef7d'],
-  },
-  {
-    name: 'Sand to Blue',
-    colors: ['#3E5151', '#DECBA4'],
-  },
-  {
-    name: 'Wedding Day Blues',
-    colors: ['#40E0D0', '#FF8C00', '#FF0080'],
-  },
-  {
-    name: 'Shifter',
-    colors: ['#bc4e9c', '#f80759'],
-  },
-  {
-    name: 'Red Sunset',
-    colors: ['#355C7D', '#6C5B7B', '#C06C84'],
-  },
-  {
-    name: 'Moon Purple',
-    colors: ['#4e54c8', '#8f94fb'],
-  },
-  {
-    name: 'Pure Lust',
-    colors: ['#333333', '#dd1818'],
-  },
-  {
-    name: 'Slight Ocean View',
-    colors: ['#a8c0ff', '#3f2b96'],
-  },
-  {
-    name: 'eXpresso',
-    colors: ['#ad5389', '#3c1053'],
-  },
-  {
-    name: 'Shifty',
-    colors: ['#636363', '#a2ab58'],
-  },
-  {
-    name: 'Vanusa',
-    colors: ['#DA4453', '#89216B'],
-  },
-  {
-    name: 'Evening Night',
-    colors: ['#005AA7', '#FFFDE4'],
-  },
-  {
-    name: 'Magic',
-    colors: ['#59C173', '#a17fe0', '#5D26C1'],
-  },
-  {
-    name: 'Margo',
-    colors: ['#FFEFBA', '#FFFFFF'],
-  },
-  {
-    name: 'Blue Raspberry',
-    colors: ['#00B4DB', '#0083B0'],
-  },
-  {
-    name: 'Citrus Peel',
-    colors: ['#FDC830', '#F37335'],
-  },
-  {
-    name: 'Sin City Red',
-    colors: ['#ED213A', '#93291E'],
-  },
-  {
-    name: 'Rastafari',
-    colors: ['#1E9600', '#FFF200', '#FF0000'],
-  },
-  {
-    name: 'Summer Dog',
-    colors: ['#a8ff78', '#78ffd6'],
-  },
-  {
-    name: 'Wiretap',
-    colors: ['#8A2387', '#E94057', '#F27121'],
-  },
-  {
-    name: 'Burning Orange',
-    colors: ['#FF416C', '#FF4B2B'],
-  },
-  {
-    name: 'Ultra Voilet',
-    colors: ['#654ea3', '#eaafc8'],
-  },
-  {
-    name: 'By Design',
-    colors: ['#009FFF', '#ec2F4B'],
-  },
-  {
-    name: 'Kyoo Tah',
-    colors: ['#544a7d', '#ffd452'],
-  },
-  {
-    name: 'Kye Meh',
-    colors: ['#8360c3', '#2ebf91'],
-  },
-  {
-    name: 'Kyoo Pal',
-    colors: ['#dd3e54', '#6be585'],
-  },
-  {
-    name: 'Metapolis',
-    colors: ['#659999', '#f4791f'],
-  },
-  {
-    name: 'Flare',
-    colors: ['#f12711', '#f5af19'],
-  },
-  {
-    name: 'Witching Hour',
-    colors: ['#c31432', '#240b36'],
-  },
-  {
-    name: 'Azur Lane',
-    colors: ['#7F7FD5', '#86A8E7', '#91EAE4'],
-  },
-  {
-    name: 'Neuromancer',
-    colors: ['#f953c6', '#b91d73'],
-  },
-  {
-    name: 'Harvey',
-    colors: ['#1f4037', '#99f2c8'],
-  },
-  {
-    name: 'Amin',
-    colors: ['#8E2DE2', '#4A00E0'],
-  },
-  {
-    name: 'Memariani',
-    colors: ['#aa4b6b', '#6b6b83', '#3b8d99'],
-  },
-  {
-    name: 'Yoda',
-    colors: ['#FF0099', '#493240'],
-  },
-  {
-    name: 'Cool Sky',
-    colors: ['#2980B9', '#6DD5FA', '#FFFFFF'],
-  },
-  {
-    name: 'Dark Ocean',
-    colors: ['#373B44', '#4286f4'],
-  },
-  {
-    name: 'Evening Sunshine',
-    colors: ['#b92b27', '#1565C0'],
-  },
-  {
-    name: 'JShine',
-    colors: ['#12c2e9', '#c471ed', '#f64f59'],
-  },
-  {
-    name: 'Moonlit Asteroid',
-    colors: ['#0F2027', '#203A43', '#2C5364'],
-  },
-  {
-    name: 'MegaTron',
-    colors: ['#C6FFDD', '#FBD786', '#f7797d'],
-  },
-  {
-    name: 'Cool Blues',
-    colors: ['#2193b0', '#6dd5ed'],
-  },
-  {
-    name: 'Piggy Pink',
-    colors: ['#ee9ca7', '#ffdde1'],
-  },
-  {
-    name: 'Grade Grey',
-    colors: ['#bdc3c7', '#2c3e50'],
-  },
-  {
-    name: 'Telko',
-    colors: ['#F36222', '#5CB644', '#007FC3'],
-  },
-  {
-    name: 'Zenta',
-    colors: ['#2A2D3E', '#FECB6E'],
-  },
-  {
-    name: 'Electric Peacock',
-    colors: ['#8a2be2', '#0000cd', '#228b22', '#ccff00'],
-  },
-  {
-    name: 'Under Blue Green',
-    colors: ['#051937', '#004d7a', '#008793', '#00bf72', '#a8eb12'],
-  },
-  {
-    name: 'Lensod',
-    colors: ['#6025F5', '#FF5555'],
-  },
-  {
-    name: 'Newspaper',
-    colors: ['#8a2be2', '#ffa500', '#f8f8ff'],
-  },
-  {
-    name: 'Dark Blue Gradient',
-    colors: ['#2774ae', '#002E5D', '#002E5D'],
-  },
-  {
-    name: 'Dark Blu Two',
-    colors: ['#004680', '#4484BA'],
-  },
-  {
-    name: 'Lemon Lime',
-    colors: ['#7ec6bc', '#ebe717'],
-  },
-  {
-    name: 'Beleko',
-    colors: ['#ff1e56', '#f9c942', '#1e90ff'],
-  },
-  {
-    name: 'Mango Papaya',
-    colors: ['#de8a41', '#2ada53'],
-  },
-  {
-    name: 'Unicorn Rainbow',
-    colors: ['#f7f0ac', '#acf7f0', '#f0acf7'],
-  },
-  {
-    name: 'Flame',
-    colors: ['#ff0000', '#fdcf58'],
-  },
-  {
-    name: 'Blue Red',
-    colors: ['#36B1C7', '#960B33'],
-  },
-  {
-    name: 'Twitter',
-    colors: ['#1DA1F2', '#009ffc'],
-  },
-  {
-    name: 'Blooze',
-    colors: ['#6da6be', '#4b859e', '#6da6be'],
-  },
-  {
-    name: 'Blue Slate',
-    colors: ['#B5B9FF', '#2B2C49'],
-  },
-  {
-    name: 'Space Light Green',
-    colors: ['#9FA0A8', '#5C7852'],
-  },
-  {
-    name: 'Flower',
-    colors: ['#DCFFBD', '#CC86D1'],
-  },
-  {
-    name: 'Elate The Euge',
-    colors: ['#8BDEDA', '43ADD0', '998EE0', 'E17DC2', 'EF9393'],
-  },
-  {
-    name: 'Peach Sea',
-    colors: ['#E6AE8C', '#A8CECF'],
-  },
-  {
-    name: 'Abbas',
-    colors: ['#00fff0', '#0083fe'],
-  },
-  {
-    name: 'Winter Woods',
-    colors: ['#333333', '#a2ab58', '#A43931'],
-  },
-  {
-    name: 'Ameena',
-    colors: ['#0c0c6d', '#de512b', '#98d0c1', '#5bb226', '#023c0d'],
-  },
-  {
-    name: 'Emerald Sea',
-    colors: ['#05386b', '#5cdb95'],
-  },
-  {
-    name: 'Bleem',
-    colors: ['#4284DB', '#29EAC4'],
-  },
-  {
-    name: 'Coffee Gold',
-    colors: ['#554023', '#c99846'],
-  },
-  {
-    name: 'Compass',
-    colors: ['#516b8b', '#056b3b'],
-  },
-  {
-    name: "Andreuzza's",
-    colors: ['#D70652', '#FF025E'],
-  },
-  {
-    name: 'Moonwalker',
-    colors: ['#152331', '#000000'],
-  },
-  {
-    name: 'Whinehouse',
-    colors: ['#f7f7f7', '#b9a0a0', '#794747', '#4e2020', '#111111'],
-  },
-  {
-    name: 'Hyper Blue',
-    colors: ['#59CDE9', '#0A2A88'],
-  },
-  {
-    name: 'Racker',
-    colors: ['#EB0000', '#95008A', '#3300FC'],
-  },
-  {
-    name: 'After the Rain',
-    colors: ['#ff75c3', '#ffa647', '#ffe83f', '#9fff5b', '#70e2ff', '#cd93ff'],
-  },
-  {
-    name: 'Neon Green',
-    colors: ['#81ff8a', '#64965e'],
-  },
-  {
-    name: 'Dusty Grass',
-    colors: ['#d4fc79', '#96e6a1'],
-  },
-  {
-    name: 'Visual Blue',
-    colors: ['#003d4d', '#00c996'],
-  },
-]
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index d2dc3aa8b..82af009e8 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -29,7 +29,7 @@ import { CardMenu } from '../CardMenu'
 import { DotsThree } from 'phosphor-react'
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { LoadingBarOverlay, ProgressBarOverlay } from './LibraryListCard'
-import { FallbackImage } from './FallbackImage'
+import { GridFallbackImage } from './FallbackImage'
 import { useRouter } from 'next/router'
 
 dayjs.extend(relativeTime)
@@ -157,11 +157,11 @@ const GridImage = (props: GridImageProps): JSX.Element => {
         />
       )}
       {displayFallback ? (
-        <FallbackImage
+        <GridFallbackImage
           title={props.title ?? 'Omnivore Fallback'}
           width="100%"
           height="150px"
-          fontSize="128px"
+          fontSize="16px"
         />
       ) : (
         <CoverImage
@@ -183,7 +183,11 @@ const GridImage = (props: GridImageProps): JSX.Element => {
 const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
   const { isChecked, setIsChecked, item } = props
   const [menuOpen, setMenuOpen] = useState(false)
-  const originText = siteName(props.item.originalArticleUrl, props.item.url, props.item.siteName)
+  const originText = siteName(
+    props.item.originalArticleUrl,
+    props.item.url,
+    props.item.siteName
+  )
 
   const handleCheckChanged = useCallback(() => {
     const newValue = !isChecked
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index ed89b0f3d..7afcd42f4 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -30,7 +30,7 @@ import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { CoverImage } from '../../elements/CoverImage'
 import { ProgressBar } from '../../elements/ProgressBar'
 import { theme } from '../../tokens/stitches.config'
-import { FallbackImage } from './FallbackImage'
+import { ListFallbackImage } from './FallbackImage'
 import { useRouter } from 'next/router'
 import { LoadingBar } from '../../elements/LoadingBar'
 
@@ -216,11 +216,11 @@ const ListImage = (props: ListImageProps): JSX.Element => {
         />
       )}
       {displayFallback ? (
-        <FallbackImage
+        <ListFallbackImage
           title={props.title ?? 'Omnivore Fallback'}
           width="55px"
           height="55px"
-          fontSize="36pt"
+          fontSize="16pt"
         />
       ) : (
         <CoverImage
@@ -245,7 +245,11 @@ export function LibraryListCardContent(
 ): JSX.Element {
   const [menuOpen, setMenuOpen] = useState(false)
   const { isChecked, setIsChecked, item } = props
-  const originText = siteName(props.item.originalArticleUrl, props.item.url, props.item.siteName)
+  const originText = siteName(
+    props.item.originalArticleUrl,
+    props.item.url,
+    props.item.siteName
+  )
 
   const handleCheckChanged = useCallback(() => {
     setIsChecked(item.id, !isChecked)
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 675675951..4442c1083 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -199,6 +199,9 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thHighContrast: '#3D3D3D',
         thHighlightBar: '#D9D9D9',
 
+        thFallbackImageForeground: '#2A2A2A',
+        thFallbackImageBackground: '#EDEDED',
+
         highlight_background_green: '85, 198, 137',
         highlight_background_blue: '106, 177, 255',
         highlight_background_orange: '254, 181, 109',
@@ -309,6 +312,10 @@ const darkThemeSpec = {
     thHighContrast: '#D9D9D9',
 
     thHighlightBar: '#6A6968',
+
+    thFallbackImageForeground: '#FEFFFF',
+    thFallbackImageBackground: '#3C3C3C',
+
     highlight_underline_alpha: '0.5',
     highlight_background_alpha: '0.35',
   },
diff --git a/packages/web/public/static/fonts/FuturaBold/FuturaBold.otf b/packages/web/public/static/fonts/FuturaBold/FuturaBold.otf
new file mode 100644
index 0000000000000000000000000000000000000000..5f98f1ba42b64f81936bf2278fc793ff53c14fbf
GIT binary patch
literal 17268
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

literal 0
HcmV?d00001

diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
index 3f01f59e3..1c6715192 100644
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@@ -418,6 +418,12 @@ div#appleid-signin {
   src: url('/static/fonts/Literata/Literata-Italic.ttf');
 }
 
+@font-face {
+  font-family: 'FuturaBold';
+  src: url('/static/fonts/FuturaBold/FuturaBold.otf');  
+  font-weight: bold;  
+}
+
 
 .dropdown-arrow {
   display: inline-block;