Merge pull request #3306 from omnivore-app/fix/web-library-cleanup

Improve the fallback images on web

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

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)

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',
   },

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;