Merge pull request #4257 from omnivore-app/fix/web-library-empty-states

Update the empty states, special handler for the subscriptions empty state case.
omnivore-app · Aug 13, 2024 · ec0c02b · ec0c02b
2 parents 6f6c489 + 0d814bd
commit ec0c02b
Show file tree

Hide file tree

Showing 7 changed files with 601 additions and 157 deletions.
diff --git a/packages/web/components/elements/icons/EmptyHighlightsIcon.tsx b/packages/web/components/elements/icons/EmptyHighlightsIcon.tsx
@@ -0,0 +1,110 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { useCurrentTheme } from '../../../lib/hooks/useCurrentTheme'
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export function EmptyHighlightsIcon(): JSX.Element {
+  const { currentTheme } = useCurrentTheme()
+  switch (currentTheme) {
+    case 'Sepia':
+      return <EmptyHighlightsIconSepia />
+    case 'Apollo':
+    case 'Dark':
+      return <EmptyHighlightsIconDark />
+    case 'Light':
+      return <EmptyHighlightsIconLight />
+  }
+  return <EmptyHighlightsIconLight />
+}
+
+class EmptyHighlightsIconDark extends React.Component<IconProps> {
+  render() {
+    return (
+      <svg
+        width="130"
+        height="89"
+        viewBox="0 0 130 89"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M42.1055 11.8008C39.1909 10.118 35.464 11.1167 33.7813 14.0312L29.7188 21.0677C28.036 23.9823 29.0346 27.7092 31.9492 29.3919L63.6133 47.6732C66.5278 49.3559 70.2547 48.3573 71.9375 45.4427L76 38.4062C77.6827 35.4917 76.684 31.7647 73.7695 30.082L42.1055 11.8008Z"
+            fill="#6A6968"
+          />
+          <path
+            d="M28.3159 34.3294L29.3315 32.5703L62.1683 51.5286L61.1527 53.2878C59.47 56.2023 55.743 57.2009 52.8285 55.5182L30.5464 42.6536C27.6318 40.9709 26.6332 37.2439 28.3159 34.3294Z"
+            fill="#6A6968"
+          />
+          <path
+            d="M29.1084 46.5156L50.2139 58.7009L48.4706 61.7227C47.3669 63.6342 45.324 64.7887 43.141 64.7695L42.6713 64.7473L22.9034 63.0484C21.5143 62.929 20.6829 61.4943 21.1971 60.2541L21.3182 60.009L29.1084 46.5156Z"
+            fill="#898989"
+          />
+        </g>
+        <rect x="65.0005" y="63" width="65" height="2" rx="1" fill="#898989" />
+      </svg>
+    )
+  }
+}
+
+class EmptyHighlightsIconLight extends React.Component<IconProps> {
+  render() {
+    return (
+      <svg
+        width="130"
+        height="89"
+        viewBox="0 0 130 89"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M42.1055 11.8008C39.1909 10.118 35.464 11.1167 33.7813 14.0312L29.7188 21.0677C28.036 23.9823 29.0346 27.7092 31.9492 29.3919L63.6133 47.6732C66.5278 49.3559 70.2547 48.3573 71.9375 45.4427L76 38.4062C77.6827 35.4917 76.684 31.7647 73.7695 30.082L42.1055 11.8008Z"
+            fill="#D9D9D9"
+          />
+          <path
+            d="M28.3159 34.3294L29.3315 32.5703L62.1683 51.5286L61.1527 53.2878C59.47 56.2023 55.743 57.2009 52.8285 55.5182L30.5464 42.6536C27.6318 40.9709 26.6332 37.2439 28.3159 34.3294Z"
+            fill="#898989"
+          />
+          <path
+            d="M29.1084 46.5156L50.2139 58.7009L48.4706 61.7227C47.3669 63.6342 45.324 64.7887 43.141 64.7695L42.6713 64.7473L22.9034 63.0484C21.5143 62.929 20.6829 61.4943 21.1971 60.2541L21.3182 60.009L29.1084 46.5156Z"
+            fill="#6A6968"
+          />
+        </g>
+        <rect x="65.0005" y="63" width="65" height="2" rx="1" fill="#D9D9D9" />
+      </svg>
+    )
+  }
+}
+
+class EmptyHighlightsIconSepia extends React.Component<IconProps> {
+  render() {
+    return (
+      <svg
+        width="130"
+        height="89"
+        viewBox="0 0 130 89"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M42.1055 11.8008C39.1909 10.118 35.464 11.1167 33.7813 14.0312L29.7188 21.0677C28.036 23.9823 29.0346 27.7092 31.9492 29.3919L63.6133 47.6732C66.5278 49.3559 70.2547 48.3573 71.9375 45.4427L76 38.4062C77.6827 35.4917 76.684 31.7647 73.7695 30.082L42.1055 11.8008Z"
+            fill="#E6DFC9"
+          />
+          <path
+            d="M28.3159 34.3294L29.3315 32.5703L62.1683 51.5286L61.1527 53.2878C59.47 56.2023 55.743 57.2009 52.8285 55.5182L30.5464 42.6536C27.6318 40.9709 26.6332 37.2439 28.3159 34.3294Z"
+            fill="#D2CBB5"
+          />
+          <path
+            d="M29.1084 46.5156L50.2139 58.7009L48.4706 61.7227C47.3669 63.6342 45.324 64.7887 43.141 64.7695L42.6713 64.7473L22.9034 63.0484C21.5143 62.929 20.6829 61.4943 21.1971 60.2541L21.3182 60.009L29.1084 46.5156Z"
+            fill="#ACA590"
+          />
+        </g>
+        <rect x="65.0005" y="63" width="65" height="2" rx="1" fill="#ACA590" />
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/elements/icons/EmptyLibraryNotes.tsx b/packages/web/components/elements/icons/EmptyLibraryNotes.tsx
@@ -0,0 +1,175 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { useCurrentTheme } from '../../../lib/hooks/useCurrentTheme'
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export function EmptyLibraryIcon(): JSX.Element {
+  const { currentTheme } = useCurrentTheme()
+  switch (currentTheme) {
+    case 'Sepia':
+      return <EmptyLibraryIconSepia />
+    case 'Apollo':
+    case 'Dark':
+      return <EmptyLibraryIconDark />
+    case 'Light':
+      return <EmptyLibraryIconLight />
+  }
+  return <EmptyLibraryIconLight />
+}
+
+class EmptyLibraryIconDark extends React.Component<IconProps> {
+  render() {
+    return (
+      <svg
+        width="68"
+        height="79"
+        viewBox="0 0 68 79"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M51.9818 10.7298L59.1106 62.7233L59.751 67.9395C59.9574 69.62 58.7624 71.1495 57.0819 71.3558L12.2024 76.8663C10.522 77.0727 8.99247 75.8777 8.78614 74.1972L1.87662 17.9237C1.77345 17.0835 2.37095 16.3187 3.21116 16.2155C3.21647 16.2149 3.22178 16.2143 3.22709 16.2137L6.95046 15.796M9.96143 15.4576L13.4769 15.0632L9.96143 15.4576Z"
+          fill="#6A6968"
+        />
+        <path
+          d="M53.2202 10.56C53.1264 9.87609 52.4959 9.39765 51.812 9.49143C51.128 9.5852 50.6496 10.2157 50.7433 10.8996L53.2202 10.56ZM59.1106 62.7233L60.3512 62.571C60.3505 62.5652 60.3498 62.5593 60.349 62.5535L59.1106 62.7233ZM59.751 67.9395L60.9917 67.7872L59.751 67.9395ZM57.0819 71.3558L57.2343 72.5965L57.0819 71.3558ZM12.2024 76.8663L12.3548 78.107L12.2024 76.8663ZM8.78614 74.1972L10.0268 74.0449L8.78614 74.1972ZM1.87662 17.9237L0.635934 18.076L1.87662 17.9237ZM3.22709 16.2137L3.36644 17.4559L3.22709 16.2137ZM7.0898 17.0382C7.77586 16.9613 8.26963 16.3427 8.19267 15.6567C8.11571 14.9706 7.49717 14.4768 6.81112 14.5538L7.0898 17.0382ZM9.82209 14.2154C9.13604 14.2923 8.64227 14.9109 8.71922 15.5969C8.79618 16.283 9.41472 16.7768 10.1008 16.6998L9.82209 14.2154ZM13.6162 16.3055C14.3023 16.2285 14.796 15.61 14.7191 14.9239C14.6421 14.2378 14.0236 13.7441 13.3375 13.821L13.6162 16.3055ZM50.7433 10.8996L57.8721 62.8931L60.349 62.5535L53.2202 10.56L50.7433 10.8996ZM57.8699 62.8757L58.5103 68.0919L60.9917 67.7872L60.3512 62.571L57.8699 62.8757ZM58.5103 68.0919C58.6325 69.0871 57.9248 69.9929 56.9296 70.1151L57.2343 72.5965C59.5999 72.306 61.2822 70.1528 60.9917 67.7872L58.5103 68.0919ZM56.9296 70.1151L12.0501 75.6257L12.3548 78.107L57.2343 72.5965L56.9296 70.1151ZM12.0501 75.6257C11.0549 75.7478 10.149 75.0401 10.0268 74.0449L7.54546 74.3496C7.83592 76.7152 9.98912 78.3975 12.3548 78.107L12.0501 75.6257ZM10.0268 74.0449L3.1173 17.7713L0.635934 18.076L7.54546 74.3496L10.0268 74.0449ZM3.1173 17.7713C3.09827 17.6163 3.20849 17.4753 3.3635 17.4562L3.05882 14.9749C1.5334 15.1622 0.448635 16.5506 0.635934 18.076L3.1173 17.7713ZM3.3635 17.4562C3.36448 17.4561 3.36545 17.456 3.36644 17.4559L3.08775 14.9715C3.0781 14.9725 3.06846 14.9737 3.05882 14.9749L3.3635 17.4562ZM3.36644 17.4559L7.0898 17.0382L6.81112 14.5538L3.08775 14.9715L3.36644 17.4559ZM10.1008 16.6998L13.6162 16.3055L13.3375 13.821L9.82209 14.2154L10.1008 16.6998Z"
+          fill="#3D3D3D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M50.0416 14.0005L56.4942 61.1206L57.0746 65.8478C57.2616 67.3707 56.1932 68.755 54.6884 68.9398L14.4978 73.8745C12.9929 74.0593 11.6214 72.9746 11.4344 71.4517L5.24533 21.0456C5.11071 19.9493 5.89034 18.9514 6.98668 18.8168L11.4949 18.2633"
+          fill="#3D3D3D"
+        />
+        <path
+          d="M17.212 4C17.212 2.48122 18.4433 1.25 19.962 1.25H53.5546C54.2836 1.25 54.9828 1.5395 55.4985 2.05485L65.2536 11.8039C65.7697 12.3197 66.0597 13.0194 66.0597 13.7491V60.3761C66.0597 61.8949 64.8284 63.1261 63.3097 63.1261H19.962C18.4433 63.1261 17.212 61.8949 17.212 60.3761V4Z"
+          fill="#898989"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+        />
+        <path
+          d="M54.2806 1.83984V10.7277C54.2806 11.9975 55.31 13.0269 56.5798 13.0269H62.66"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M24.6434 13.0273H44.5694M24.6434 22.2239H57.5979M24.6434 32.1869H57.5979M24.6434 42.1499H57.5979M24.6434 52.1128H44.5694"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+}
+
+class EmptyLibraryIconLight extends React.Component<IconProps> {
+  render() {
+    return (
+      <svg
+        width="68"
+        height="79"
+        viewBox="0 0 68 79"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M51.9819 11.2298L59.1107 63.2233L59.7512 68.4395C59.9575 70.12 58.7625 71.6495 57.0821 71.8558L12.2025 77.3663C10.5221 77.5727 8.99259 76.3777 8.78626 74.6972L1.87674 18.4237C1.77357 17.5835 2.37107 16.8187 3.21128 16.7155C3.21659 16.7149 3.2219 16.7143 3.22721 16.7137L6.95058 16.296M9.96156 15.9576L13.477 15.5632L9.96156 15.9576Z"
+          fill="#D9D9D9"
+        />
+        <path
+          d="M53.2203 11.06C53.1265 10.3761 52.496 9.89765 51.8121 9.99143C51.1281 10.0852 50.6497 10.7157 50.7435 11.3996L53.2203 11.06ZM59.1107 63.2233L60.3514 63.071C60.3506 63.0652 60.3499 63.0593 60.3491 63.0535L59.1107 63.2233ZM59.7512 68.4395L60.9918 68.2872L59.7512 68.4395ZM57.0821 71.8558L57.2344 73.0965L57.0821 71.8558ZM12.2025 77.3663L12.3549 78.607L12.2025 77.3663ZM8.78626 74.6972L10.0269 74.5449L8.78626 74.6972ZM1.87674 18.4237L0.636056 18.576L1.87674 18.4237ZM3.22721 16.7137L3.36656 17.9559L3.22721 16.7137ZM7.08992 17.5382C7.77598 17.4613 8.26975 16.8427 8.19279 16.1567C8.11583 15.4706 7.49729 14.9768 6.81124 15.0538L7.08992 17.5382ZM9.82221 14.7154C9.13616 14.7923 8.64239 15.4109 8.71935 16.0969C8.7963 16.783 9.41485 17.2768 10.1009 17.1998L9.82221 14.7154ZM13.6163 16.8055C14.3024 16.7285 14.7962 16.11 14.7192 15.4239C14.6422 14.7378 14.0237 14.2441 13.3376 14.321L13.6163 16.8055ZM50.7435 11.3996L57.8723 63.3931L60.3491 63.0535L53.2203 11.06L50.7435 11.3996ZM57.87 63.3757L58.5105 68.5919L60.9918 68.2872L60.3514 63.071L57.87 63.3757ZM58.5105 68.5919C58.6327 69.5871 57.9249 70.4929 56.9297 70.6151L57.2344 73.0965C59.6 72.806 61.2823 70.6528 60.9918 68.2872L58.5105 68.5919ZM56.9297 70.6151L12.0502 76.1257L12.3549 78.607L57.2344 73.0965L56.9297 70.6151ZM12.0502 76.1257C11.055 76.2478 10.1491 75.5401 10.0269 74.5449L7.54558 74.8496C7.83605 77.2152 9.98924 78.8975 12.3549 78.607L12.0502 76.1257ZM10.0269 74.5449L3.11742 18.2713L0.636056 18.576L7.54558 74.8496L10.0269 74.5449ZM3.11742 18.2713C3.09839 18.1163 3.20862 17.9753 3.36362 17.9562L3.05894 15.4749C1.53352 15.6622 0.448757 17.0506 0.636056 18.576L3.11742 18.2713ZM3.36362 17.9562C3.3646 17.9561 3.36558 17.956 3.36656 17.9559L3.08787 15.4715C3.07822 15.4725 3.06858 15.4737 3.05894 15.4749L3.36362 17.9562ZM3.36656 17.9559L7.08992 17.5382L6.81124 15.0538L3.08787 15.4715L3.36656 17.9559ZM10.1009 17.1998L13.6163 16.8055L13.3376 14.321L9.82221 14.7154L10.1009 17.1998Z"
+          fill="#3D3D3D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M50.0417 14.5005L56.4943 61.6206L57.0747 66.3478C57.2617 67.8707 56.1934 69.255 54.6885 69.4398L14.4979 74.3745C12.993 74.5593 11.6215 73.4746 11.4345 71.9517L5.24545 21.5456C5.11083 20.4493 5.89047 19.4514 6.9868 19.3168L11.495 18.7633"
+          fill="#2A2A2A"
+        />
+        <path
+          d="M17.2122 4.5C17.2122 2.98122 18.4434 1.75 19.9622 1.75H53.5547C54.2837 1.75 54.983 2.0395 55.4986 2.55485L65.2537 12.3039C65.7698 12.8197 66.0598 13.5194 66.0598 14.2491V60.8761C66.0598 62.3949 64.8286 63.6261 63.3098 63.6261H19.9622C18.4434 63.6261 17.2122 62.3949 17.2122 60.8761V4.5Z"
+          fill="#EDEDED"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+        />
+        <path
+          d="M54.2808 2.33984V11.2277C54.2808 12.4975 55.3101 13.5269 56.5799 13.5269H62.6601"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M24.6436 13.5273H44.5695M24.6436 22.7239H57.598M24.6436 32.6869H57.598M24.6436 42.6499H57.598M24.6436 52.6128H44.5695"
+          stroke="#2A2A2A"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+}
+
+class EmptyLibraryIconSepia extends React.Component<IconProps> {
+  render() {
+    console.log('rendering sepia icon')
+
+    return (
+      <svg
+        width="68"
+        height="79"
+        viewBox="0 0 68 79"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M51.9818 10.7298L59.1106 62.7233L59.751 67.9395C59.9574 69.62 58.7624 71.1495 57.0819 71.3558L12.2024 76.8663C10.522 77.0727 8.99247 75.8777 8.78614 74.1972L1.87662 17.9237C1.77345 17.0835 2.37095 16.3187 3.21116 16.2155C3.21647 16.2149 3.22178 16.2143 3.22709 16.2137L6.95046 15.796M9.96143 15.4576L13.4769 15.0632L9.96143 15.4576Z"
+          fill="#D9D9D9"
+        />
+        <path
+          d="M53.2202 10.56C53.1264 9.87609 52.4959 9.39765 51.812 9.49143C51.128 9.5852 50.6496 10.2157 50.7433 10.8996L53.2202 10.56ZM59.1106 62.7233L60.3512 62.571C60.3505 62.5652 60.3498 62.5593 60.349 62.5535L59.1106 62.7233ZM59.751 67.9395L60.9917 67.7872L59.751 67.9395ZM57.0819 71.3558L57.2343 72.5965L57.0819 71.3558ZM12.2024 76.8663L12.3548 78.107L12.2024 76.8663ZM8.78614 74.1972L10.0268 74.0449L8.78614 74.1972ZM1.87662 17.9237L3.1173 17.7713L1.87662 17.9237ZM3.22709 16.2137L3.36644 17.4559L3.22709 16.2137ZM7.0898 17.0382C7.77586 16.9613 8.26963 16.3427 8.19267 15.6567C8.11571 14.9706 7.49717 14.4768 6.81112 14.5538L7.0898 17.0382ZM9.82209 14.2154C9.13604 14.2923 8.64227 14.9109 8.71922 15.5969C8.79618 16.283 9.41472 16.7768 10.1008 16.6998L9.82209 14.2154ZM13.6162 16.3055C14.3023 16.2285 14.796 15.61 14.7191 14.9239C14.6421 14.2378 14.0236 13.7441 13.3375 13.821L13.6162 16.3055ZM50.7433 10.8996L57.8721 62.8931L60.349 62.5535L53.2202 10.56L50.7433 10.8996ZM57.8699 62.8757L58.5103 68.0919L60.9917 67.7872L60.3512 62.571L57.8699 62.8757ZM58.5103 68.0919C58.6325 69.0871 57.9248 69.9929 56.9296 70.1151L57.2343 72.5965C59.5999 72.306 61.2822 70.1528 60.9917 67.7872L58.5103 68.0919ZM56.9296 70.1151L12.0501 75.6257L12.3548 78.107L57.2343 72.5965L56.9296 70.1151ZM12.0501 75.6257C11.0549 75.7478 10.149 75.0401 10.0268 74.0449L7.54546 74.3496C7.83592 76.7152 9.98912 78.3975 12.3548 78.107L12.0501 75.6257ZM10.0268 74.0449L3.1173 17.7713L0.635934 18.076L7.54546 74.3496L10.0268 74.0449ZM3.1173 17.7713C3.09827 17.6163 3.20849 17.4753 3.3635 17.4562L3.05882 14.9749C1.5334 15.1622 0.448635 16.5506 0.635934 18.076L3.1173 17.7713ZM3.3635 17.4562C3.36448 17.4561 3.36545 17.456 3.36644 17.4559L3.08775 14.9715C3.0781 14.9725 3.06846 14.9737 3.05882 14.9749L3.3635 17.4562ZM3.36644 17.4559L7.0898 17.0382L6.81112 14.5538L3.08775 14.9715L3.36644 17.4559ZM10.1008 16.6998L13.6162 16.3055L13.3375 13.821L9.82209 14.2154L10.1008 16.6998Z"
+          fill="#3D3D3D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M50.0416 14.0005L56.4942 61.1206L57.0746 65.8478C57.2616 67.3707 56.1932 68.755 54.6884 68.9398L14.4978 73.8745C12.9929 74.0593 11.6214 72.9746 11.4344 71.4517L5.24533 21.0456C5.11071 19.9493 5.89034 18.9514 6.98668 18.8168L11.4949 18.2633"
+          fill="#2A2A2A"
+        />
+        <path
+          d="M17.212 4C17.212 2.48122 18.4433 1.25 19.962 1.25H53.5546C54.2836 1.25 54.9828 1.5395 55.4985 2.05485L65.2536 11.8039C65.7697 12.3197 66.0597 13.0194 66.0597 13.7491V60.3761C66.0597 61.8949 64.8284 63.1261 63.3097 63.1261H19.962C18.4433 63.1261 17.212 61.8949 17.212 60.3761V4Z"
+          fill="#EEE8D5"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+        />
+        <path
+          d="M54.2806 1.83984V10.7277C54.2806 11.9975 55.31 13.0269 56.5798 13.0269H62.66"
+          stroke="#3D3D3D"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M24.6434 13.0273H44.5694M24.6434 22.2239H57.5979M24.6434 32.1869H57.5979M24.6434 42.1499H57.5979M24.6434 52.1128H44.5694"
+          stroke="#2A2A2A"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+}