feat(extension): add logo back

Author: collectedmind

clients/extension/components/action-header/index.tsx

@@ -1,14 +1,16 @@
 import style from './style.module.css'
 import { OverflowMenuIcon } from '../icons/OverflowMenuIcon'
-import { SaveFilledIcon } from '../icons/SaveFilledIcon'
-import { SaveIcon } from '../icons/SaveIcon'
+import { PocketLogo } from '../icons/Pocket'
+// import { SaveFilledIcon } from '../icons/SaveFilledIcon'
+// import { SaveIcon } from '../icons/SaveIcon'
 import { SavedLoader } from '../saved-loader'
 
 export function ExtensionHeader({ saveStatus }: { saveStatus?: string }) {
   const loaded = saveStatus !== 'saving'
   return (
     <header className={style.header}>
-      {loaded ? <SaveFilledIcon className={style.icon} /> : <SaveIcon className={style.icon} />}
+      {/* {loaded ? <SaveFilledIcon className={style.icon} /> : <SaveIcon className={style.icon} />} */}
+      <PocketLogo />
       {loaded ? <div /> : <SavedLoader />}
       <OverflowMenuIcon />
     </header>

clients/extension/components/icons/Pocket.tsx

@@ -0,0 +1,63 @@
+import type { SVGProps } from 'react'
+
+export const PocketLogo = ({ className, ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="122"
+      height="32"
+      viewBox="0 0 122 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M33.9558 22.4002C30.5648 22.4002 27.7335 19.5375 27.7335 16.0496C27.7335 12.5287 30.5648 9.6002 33.9558 9.6002C37.4125 9.6002 40.178 12.5287 40.178 16.0496C40.178 19.5375 37.4125 22.4002 33.9558 22.4002ZM34.0692 7.59717C31.5382 7.59717 29.2993 9.03263 27.7093 10.9575L27.6444 8.67377C27.6119 7.85816 27.2225 7.46667 26.6385 7.46667C26.0219 7.46667 25.6001 7.95604 25.6001 8.64114V30.8908C25.6001 31.5433 26.0544 32 26.6709 32C27.3199 32 27.7093 31.5106 27.7093 30.8582V21.1362C29.2993 23.0284 31.5382 24.3333 34.0692 24.3333C38.6769 24.3333 42.3112 20.6142 42.3112 16.0142C42.3112 11.4142 38.6769 7.59717 34.0692 7.59717Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M86.9504 15.208L93.1805 9.66067C93.7494 9.1644 93.8164 8.43654 93.3813 7.97336C92.9128 7.47709 92.2101 7.60943 91.7081 8.07261L83.2415 15.9252V1.25721C83.2415 0.496267 82.9069 0 82.2041 0C81.4345 0 81.0663 0.496267 81.0663 1.25721V23.2584C81.0663 23.9862 81.5014 24.4825 82.2041 24.4825C82.84 24.4825 83.2415 23.9862 83.2415 23.2584V18.5104L85.4104 16.5793L92.2435 24.0855C92.6786 24.5487 93.4148 24.7141 93.8833 24.284C94.4187 23.7877 94.2514 23.126 93.8498 22.6629L86.9504 15.208Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.7994 22.4002C49.4084 22.4002 46.5771 19.5375 46.5771 16.0496C46.5771 12.5287 49.4084 9.6002 52.7994 9.6002C56.2561 9.6002 59.0216 12.5287 59.0216 16.0496C59.0216 19.5375 56.2561 22.4002 52.7994 22.4002ZM52.8488 7.46667C48.1069 7.46667 44.4442 11.3591 44.4442 16.0499C44.4442 20.7408 48.1069 24.5333 52.8488 24.5333C57.2963 24.5333 61.1553 20.7408 61.1553 16.0499C61.1553 11.3591 57.2636 7.46667 52.8488 7.46667Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M120.667 21.3153C120.333 21.3153 120 21.5144 119.8 21.6802C119.333 22.0784 118.767 22.4765 117.967 22.4765C116.6 22.4765 115.833 21.6471 115.833 19.7559V9.53716L120.067 9.60352C120.667 9.60352 121.067 9.23856 121.067 8.67454C121.067 8.07734 120.667 7.71238 120.067 7.71238L115.833 7.74556V4.32824C115.833 3.66468 115.367 3.2002 114.8 3.2002C114.2 3.2002 113.7 3.66468 113.7 4.32824V7.74556L111.9 7.71238C111.333 7.71238 110.933 8.07734 110.933 8.67454C110.933 9.20538 111.367 9.63669 111.9 9.60352L113.7 9.53716V19.8223C113.7 23.0405 115.667 24.5335 117.933 24.5335C119.333 24.5335 120.4 24.0027 121.133 23.2396C121.367 22.9742 121.6 22.6756 121.6 22.2774C121.6 21.7134 121.233 21.3153 120.667 21.3153Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M97.0667 14.9335C97.541 11.4349 100.044 9.6002 102.86 9.6002C105.862 9.6002 107.96 12.2002 108.089 14.9335H97.0667ZM102.896 7.46667C98.1331 7.46667 94.5776 11.3591 94.5776 16.0499C94.5776 20.7408 98.2002 24.5333 102.93 24.5333C105.278 24.5333 107.559 23.6684 109.068 22.2046C109.404 21.8719 109.672 21.5059 109.672 21.14C109.672 20.6077 109.336 20.1752 108.699 20.1752C108.364 20.1752 108.028 20.3083 107.76 20.5411C106.351 21.7721 104.909 22.4707 102.93 22.4707C99.8505 22.4707 97.1021 20.1462 96.8164 16.682H108.8C109.94 16.682 110.578 16.0832 110.578 15.1184C110.578 11.3923 107.29 7.46667 102.896 7.46667Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M77.2315 19.246C76.9343 19.246 76.6041 19.4803 76.4059 19.748C75.4813 20.9862 73.5001 22.4586 71.2876 22.4586C67.9855 22.4586 65.1457 19.8149 65.1457 16C65.1457 11.9174 67.9855 9.47452 71.2876 9.47452C73.6982 9.47452 75.019 10.6458 76.1418 12.0178C76.3399 12.252 76.6371 12.4863 77.0003 12.4863C77.4957 12.4863 77.991 12.1182 77.991 11.6162C77.991 11.2481 77.7598 10.88 77.5617 10.5788C76.2078 8.60445 73.9293 7.46667 71.2876 7.46667C66.6977 7.46667 62.9332 11.2816 62.9332 16C62.9332 20.6515 66.6977 24.5333 71.2876 24.5333C74.1275 24.5333 76.5711 22.8601 77.8589 21.12C78.09 20.8188 78.2221 20.5177 78.2221 20.2499C78.2221 19.6476 77.7928 19.246 77.2315 19.246Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5879 14.6474L10.1126 18.8397C9.88226 19.1017 9.52029 19.1999 9.25704 19.1999C8.92797 19.1999 8.59891 19.1017 8.33566 18.8397L3.92621 14.6474C3.46552 14.1561 3.39971 13.3373 3.92621 12.8132C4.4198 12.3547 5.24246 12.2892 5.73606 12.8132L9.25704 16.1867L12.8438 12.8132C13.3045 12.2892 14.1272 12.3547 14.5879 12.8132C15.0486 13.3373 15.0486 14.1561 14.5879 14.6474ZM17.0922 7.46667H1.81826C0.82645 7.46667 -6.10352e-05 8.23938 -6.10352e-05 9.24725V14.9921C-6.10352e-05 20.1995 4.23168 24.5333 9.45523 24.5333C14.6457 24.5333 18.8444 20.1995 18.8444 14.9921V9.24725C18.8444 8.23938 18.0509 7.46667 17.0922 7.46667Z"
+        fill="#EF4156"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5876 14.6473L10.1124 18.8396C9.88201 19.1016 9.52004 19.1999 9.25679 19.1999C8.92773 19.1999 8.59867 19.1016 8.33542 18.8396L3.92597 14.6473C3.46528 14.156 3.39946 13.3372 3.92597 12.8132C4.41956 12.3547 5.24222 12.2892 5.73581 12.8132L9.25679 16.1867L12.8436 12.8132C13.3043 12.2892 14.1269 12.3547 14.5876 12.8132C15.0483 13.3372 15.0483 14.156 14.5876 14.6473Z"
+        fill="white"
+      />
+    </svg>
+  )
+}