From 93092a4855aa666953ca4a709d6f4b71e7357593 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 09:54:20 -0700
Subject: [PATCH 1/8] add footer

---
 theme/src/components/App/App.tsx         |  3 +
 theme/src/components/Footer.tsx          | 87 ++++++++++++++++++++++++
 theme/src/components/icons/GitHub.tsx    |  6 +-
 theme/src/components/icons/ImageSC.tsx   | 46 +++++++++++++
 theme/src/components/icons/Twitter.tsx   |  6 +-
 theme/src/components/icons/Zulip.tsx     | 27 ++++++++
 theme/src/components/icons/icons.type.ts |  4 ++
 theme/src/components/icons/index.ts      |  2 +
 theme/src/theme.js                       |  1 +
 9 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 theme/src/components/Footer.tsx
 create mode 100644 theme/src/components/icons/ImageSC.tsx
 create mode 100644 theme/src/components/icons/Zulip.tsx

diff --git a/theme/src/components/App/App.tsx b/theme/src/components/App/App.tsx
index 2fbce7335c..86894bfc04 100644
--- a/theme/src/components/App/App.tsx
+++ b/theme/src/components/App/App.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import slug from 'slug';
 
 import { AppBar } from '@/components/AppBar';
+import { Footer } from '@/components/Footer';
 import { Media } from '@/components/media';
 import {
   GlobalTableOfContents,
@@ -169,6 +170,8 @@ export function App() {
       <main className="mt-6">
         <Content />
       </main>
+
+      <Footer />
     </>
   );
 }
diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
new file mode 100644
index 0000000000..a1b47dc4d8
--- /dev/null
+++ b/theme/src/components/Footer.tsx
@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import { ComponentType } from 'react';
+
+import {
+  GitHub,
+  IconPropsColor,
+  ImageSC,
+  Twitter,
+  Zulip,
+} from '@/components/icons';
+import { Link } from '@/components/Link';
+
+interface FooterItem {
+  title: string;
+  link: string;
+  alt: string;
+  icon: ComponentType<IconPropsColor>;
+}
+
+const FOOTER_LINKS: FooterItem[] = [
+  {
+    title: 'GitHub',
+    link: 'https://github.com/napari/napari',
+    alt: 'Visit GitHub repository',
+    icon: GitHub,
+  },
+  {
+    title: 'Twitter',
+    link: 'https://twitter.com/napari-imaging',
+    alt: 'Visit Twitter page',
+    icon: Twitter,
+  },
+  {
+    title: 'image.sc',
+    link: 'https://image.sc',
+    alt: 'Visit image.sc forum',
+    icon: ImageSC,
+  },
+  {
+    title: 'Zulip',
+    link: 'https://image.sc',
+    alt: 'Visit Zulip chatroom',
+    icon: Zulip,
+  },
+];
+
+const COMMON_STYLES =
+  'whitespace-nowrap text-xs screen-450:text-sm text-white mr-6 last:mr-0';
+
+function FooterLinks() {
+  return (
+    <>
+      {FOOTER_LINKS.map((item) => (
+        <Link
+          className={clsx(COMMON_STYLES, 'flex flex-row items-center')}
+          href={item.link}
+          newTab
+        >
+          <item.icon
+            className="inline-block mr-1 h-4 w-4"
+            color="white"
+            alt={item.alt}
+          />
+          {item.title}
+        </Link>
+      ))}
+    </>
+  );
+}
+
+export function Footer() {
+  return (
+    <div
+      className={clsx(
+        'flex flex-row items-center justify-start',
+        'h-[4.6875em] w-full',
+        'px-6 screen-450:px-12',
+        'bg-black',
+      )}
+    >
+      <Link className={COMMON_STYLES} href="https://napari-hub.org" newTab>
+        napari <span className="font-semibold">hub</span>
+      </Link>
+      <FooterLinks />
+    </div>
+  );
+}
diff --git a/theme/src/components/icons/GitHub.tsx b/theme/src/components/icons/GitHub.tsx
index 40dbd61ce7..97d5dcc3de 100644
--- a/theme/src/components/icons/GitHub.tsx
+++ b/theme/src/components/icons/GitHub.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from './icons.type';
+import { IconPropsColor } from './icons.type';
 
-export function GitHub({ className, alt }: IconProps) {
+export function GitHub({ className, alt, color = 'black' }: IconPropsColor) {
   return (
     <svg
       className={className}
@@ -13,7 +13,7 @@ export function GitHub({ className, alt }: IconProps) {
       {alt && <title>{alt}</title>}
       <path
         d="M7 0.173252C3.1325 0.173252 0 3.3075 0 7.17325C0 10.2667 2.0055 12.8899 4.78625 13.8145C5.13625 13.8804 5.26458 13.664 5.26458 13.4779C5.26458 13.3117 5.25875 12.8713 5.25583 12.2879C3.30867 12.7103 2.898 11.3488 2.898 11.3488C2.5795 10.5408 2.11925 10.325 2.11925 10.325C1.48517 9.891 2.16825 9.89975 2.16825 9.89975C2.87117 9.94875 3.24042 10.6208 3.24042 10.6208C3.86458 11.6912 4.879 11.382 5.27917 11.2029C5.34217 10.7503 5.52242 10.4417 5.7225 10.2667C4.16792 10.0917 2.534 9.48967 2.534 6.8075C2.534 6.04334 2.80525 5.41917 3.25442 4.92917C3.17567 4.75242 2.93942 4.04075 3.31567 3.0765C3.31567 3.0765 3.90192 2.88867 5.24067 3.794C5.80067 3.63825 6.39567 3.56125 6.99067 3.55775C7.58567 3.56125 8.18067 3.63825 8.74067 3.794C10.0707 2.88867 10.6569 3.0765 10.6569 3.0765C11.0332 4.04075 10.7969 4.75242 10.7269 4.92917C11.1732 5.41917 11.4444 6.04334 11.4444 6.8075C11.4444 9.49667 9.80817 10.0888 8.25067 10.2608C8.49567 10.4708 8.72317 10.9002 8.72317 11.5558C8.72317 12.4927 8.71442 13.2452 8.71442 13.4727C8.71442 13.6564 8.83692 13.8752 9.19567 13.8052C11.9962 12.887 14 10.262 14 7.17325C14 3.3075 10.8657 0.173252 7 0.173252Z"
-        fill="black"
+        fill={color}
       />
     </svg>
   );
diff --git a/theme/src/components/icons/ImageSC.tsx b/theme/src/components/icons/ImageSC.tsx
new file mode 100644
index 0000000000..7456bb1cd0
--- /dev/null
+++ b/theme/src/components/icons/ImageSC.tsx
@@ -0,0 +1,46 @@
+import { IconPropsColor } from './icons.type';
+
+export function ImageSC({ className, alt, color = 'black' }: IconPropsColor) {
+  return (
+    <svg
+      className={className}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {alt && <title>{alt}</title>}
+      <path
+        d="M12.9987 4.65361V2.01143C12.9987 2.00512 12.9936 2 12.9873 2H6.95296C6.94665 2 6.94153 2.00512 6.94153 2.01143V8.04571C6.94153 8.05203 6.94665 8.05714 6.95296 8.05714H10.9701"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+      <path
+        d="M6.94153 15.3464V17.9886C6.94153 17.9949 6.94665 18 6.95296 18H12.9873C12.9936 18 12.9987 17.9949 12.9987 17.9886V11.9543C12.9987 11.948 12.9936 11.9429 12.9873 11.9429H8.9701"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+      <path
+        d="M16.1145 9.9496L18.4027 8.62852C18.4082 8.62536 18.4101 8.61837 18.4069 8.6129L15.3898 3.38706C15.3866 3.38159 15.3796 3.37972 15.3742 3.38288L10.1483 6.40002C10.1429 6.40317 10.141 6.41016 10.1441 6.41563L12.1527 9.89458"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+      <path
+        d="M3.82577 10.0503L1.53758 11.3714C1.53211 11.3745 1.53024 11.3815 1.5334 11.387L4.55054 16.6128C4.5537 16.6183 4.56069 16.6202 4.56615 16.617L9.792 13.5999C9.79746 13.5967 9.79934 13.5897 9.79618 13.5842L7.78761 10.1053"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+      <path
+        d="M13.086 15.2962L15.3742 16.6173C15.3796 16.6205 15.3866 16.6186 15.3898 16.6131L18.4069 11.3873C18.4101 11.3818 18.4082 11.3748 18.4027 11.3717L13.1769 8.35456C13.1714 8.35141 13.1644 8.35328 13.1613 8.35875L11.1527 11.8377"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+      <path
+        d="M6.85434 4.70397L4.56614 3.38288C4.56068 3.37973 4.55369 3.3816 4.55053 3.38707L1.53339 8.61291C1.53023 8.61838 1.53211 8.62537 1.53757 8.62852L6.76342 11.6457C6.76888 11.6488 6.77587 11.647 6.77903 11.6415L8.7876 8.16254"
+        stroke={color}
+        strokeWidth="2.34286"
+      />
+    </svg>
+  );
+}
diff --git a/theme/src/components/icons/Twitter.tsx b/theme/src/components/icons/Twitter.tsx
index 9e26387311..2f8142fb84 100644
--- a/theme/src/components/icons/Twitter.tsx
+++ b/theme/src/components/icons/Twitter.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from './icons.type';
+import { IconPropsColor } from './icons.type';
 
-export function Twitter({ className, alt }: IconProps) {
+export function Twitter({ className, alt, color = 'black' }: IconPropsColor) {
   return (
     <svg
       className={className}
@@ -13,7 +13,7 @@ export function Twitter({ className, alt }: IconProps) {
       {alt && <title>{alt}</title>}
       <path
         d="M13.4581 3.44478C13.4676 3.57802 13.4676 3.7113 13.4676 3.84454C13.4676 7.9086 10.3744 12.5914 4.72082 12.5914C2.97906 12.5914 1.36105 12.0869 7.62939e-06 11.2113C0.247478 11.2398 0.485398 11.2494 0.742391 11.2494C2.17955 11.2494 3.50254 10.764 4.55901 9.93591C3.20749 9.90735 2.07487 9.0222 1.68464 7.80392C1.87501 7.83246 2.06535 7.8515 2.26524 7.8515C2.54125 7.8515 2.81728 7.81341 3.07425 7.74682C1.66562 7.46127 0.609119 6.22397 0.609119 4.72968V4.69163C1.01837 4.92006 1.49429 5.06282 1.9987 5.08183C1.17065 4.52979 0.628162 3.58755 0.628162 2.52155C0.628162 1.9505 0.780418 1.42702 1.04693 0.970164C2.56026 2.83564 4.83502 4.05389 7.38575 4.18717C7.33817 3.95874 7.30961 3.72082 7.30961 3.48287C7.30961 1.78869 8.68017 0.40863 10.3838 0.40863C11.269 0.40863 12.0685 0.779822 12.63 1.37944C13.3248 1.2462 13.9911 0.989207 14.5812 0.637058C14.3527 1.35091 13.8673 1.95052 13.2297 2.33121C13.8483 2.26462 14.4479 2.09326 14.9999 1.85534C14.5812 2.46445 14.0577 3.00694 13.4581 3.44478Z"
-        fill="black"
+        fill={color}
       />
     </svg>
   );
diff --git a/theme/src/components/icons/Zulip.tsx b/theme/src/components/icons/Zulip.tsx
new file mode 100644
index 0000000000..c80cb2552e
--- /dev/null
+++ b/theme/src/components/icons/Zulip.tsx
@@ -0,0 +1,27 @@
+import { IconPropsColor } from './icons.type';
+
+export function Zulip({ className, alt, color = 'black' }: IconPropsColor) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {alt && <title>{alt}</title>}
+      <g clipPath="url(#clip0)">
+        <path
+          d="M15.178 2.39267C15.178 3.19867 14.816 3.91467 14.2647 4.34867L8.90869 9.13133C8.80935 9.21667 8.68002 9.07933 8.75202 8.96467L10.716 5.03133C10.7714 4.92133 10.7 4.786 10.5867 4.786H2.96802C1.78802 4.786 0.822021 3.70933 0.822021 2.39267C0.822021 1.07733 1.78802 3.09431e-07 2.96802 3.09431e-07H13.032C14.212 -0.000666357 15.178 1.076 15.178 2.39267ZM2.96802 16H13.032C14.212 16 15.178 14.9227 15.178 13.6067C15.178 12.2907 14.212 11.2133 13.032 11.2133H5.41335C5.30002 11.2133 5.22869 11.0787 5.28402 10.9687L7.24802 7.03533C7.32002 6.92067 7.19069 6.78333 7.09135 6.86867L1.73602 11.6507C1.18402 12.084 0.822688 12.8007 0.822688 13.6067C0.822688 14.9227 1.78802 16 2.96802 16Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="16" height="16" fill={color} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/theme/src/components/icons/icons.type.ts b/theme/src/components/icons/icons.type.ts
index 28357b7274..025c7ab6f9 100644
--- a/theme/src/components/icons/icons.type.ts
+++ b/theme/src/components/icons/icons.type.ts
@@ -2,3 +2,7 @@ export interface IconProps {
   className?: string;
   alt?: string;
 }
+
+export interface IconPropsColor extends IconProps {
+  color?: string;
+}
diff --git a/theme/src/components/icons/index.ts b/theme/src/components/icons/index.ts
index 7dd430f4db..53b7ed074e 100644
--- a/theme/src/components/icons/index.ts
+++ b/theme/src/components/icons/index.ts
@@ -2,7 +2,9 @@ export * from './Close';
 export * from './ExternalLink';
 export * from './GitHub';
 export * from './icons.type';
+export * from './ImageSC';
 export * from './Menu';
 export * from './NapariLogo';
 export * from './Search';
 export * from './Twitter';
+export * from './Zulip';
diff --git a/theme/src/theme.js b/theme/src/theme.js
index 0c4d86c773..0a3cb7b085 100644
--- a/theme/src/theme.js
+++ b/theme/src/theme.js
@@ -18,6 +18,7 @@ const breakpoints = {
   // Special screen size for fresnel when using `lessThan` queries.
   zero: 0,
   'screen-300': 300,
+  'screen-450': 450,
   'screen-495': 495,
   'screen-875': 875,
   'screen-1150': 1150,

From 7dfdeb8d91a56abf7560ab37fff465e9a92275fc Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 13:22:42 -0700
Subject: [PATCH 2/8] rename IconPropsColor -> IconColorProps

---
 theme/src/components/Footer.tsx          | 4 ++--
 theme/src/components/icons/GitHub.tsx    | 4 ++--
 theme/src/components/icons/ImageSC.tsx   | 4 ++--
 theme/src/components/icons/Twitter.tsx   | 4 ++--
 theme/src/components/icons/Zulip.tsx     | 4 ++--
 theme/src/components/icons/icons.type.ts | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index a1b47dc4d8..ce1e41c07f 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { ComponentType } from 'react';
 
 import {
   GitHub,
-  IconPropsColor,
+  IconColorProps,
   ImageSC,
   Twitter,
   Zulip,
@@ -14,7 +14,7 @@ interface FooterItem {
   title: string;
   link: string;
   alt: string;
-  icon: ComponentType<IconPropsColor>;
+  icon: ComponentType<IconColorProps>;
 }
 
 const FOOTER_LINKS: FooterItem[] = [
diff --git a/theme/src/components/icons/GitHub.tsx b/theme/src/components/icons/GitHub.tsx
index 97d5dcc3de..531e923692 100644
--- a/theme/src/components/icons/GitHub.tsx
+++ b/theme/src/components/icons/GitHub.tsx
@@ -1,6 +1,6 @@
-import { IconPropsColor } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function GitHub({ className, alt, color = 'black' }: IconPropsColor) {
+export function GitHub({ className, alt, color = 'black' }: IconColorProps) {
   return (
     <svg
       className={className}
diff --git a/theme/src/components/icons/ImageSC.tsx b/theme/src/components/icons/ImageSC.tsx
index 7456bb1cd0..f61b924c0f 100644
--- a/theme/src/components/icons/ImageSC.tsx
+++ b/theme/src/components/icons/ImageSC.tsx
@@ -1,6 +1,6 @@
-import { IconPropsColor } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function ImageSC({ className, alt, color = 'black' }: IconPropsColor) {
+export function ImageSC({ className, alt, color = 'black' }: IconColorProps) {
   return (
     <svg
       className={className}
diff --git a/theme/src/components/icons/Twitter.tsx b/theme/src/components/icons/Twitter.tsx
index 2f8142fb84..b6b8614811 100644
--- a/theme/src/components/icons/Twitter.tsx
+++ b/theme/src/components/icons/Twitter.tsx
@@ -1,6 +1,6 @@
-import { IconPropsColor } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function Twitter({ className, alt, color = 'black' }: IconPropsColor) {
+export function Twitter({ className, alt, color = 'black' }: IconColorProps) {
   return (
     <svg
       className={className}
diff --git a/theme/src/components/icons/Zulip.tsx b/theme/src/components/icons/Zulip.tsx
index c80cb2552e..0d73a1c6ca 100644
--- a/theme/src/components/icons/Zulip.tsx
+++ b/theme/src/components/icons/Zulip.tsx
@@ -1,6 +1,6 @@
-import { IconPropsColor } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function Zulip({ className, alt, color = 'black' }: IconPropsColor) {
+export function Zulip({ className, alt, color = 'black' }: IconColorProps) {
   return (
     <svg
       className={className}
diff --git a/theme/src/components/icons/icons.type.ts b/theme/src/components/icons/icons.type.ts
index 025c7ab6f9..588a10942c 100644
--- a/theme/src/components/icons/icons.type.ts
+++ b/theme/src/components/icons/icons.type.ts
@@ -3,6 +3,6 @@ export interface IconProps {
   alt?: string;
 }
 
-export interface IconPropsColor extends IconProps {
+export interface IconColorProps extends IconProps {
   color?: string;
 }

From eee4ec6f23142f1054906b914e64593ccbf13d0b Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 13:30:37 -0700
Subject: [PATCH 3/8] make imagesc icon bigger as according to designs

---
 theme/src/components/Footer.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index ce1e41c07f..bac310e8f4 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -15,6 +15,7 @@ interface FooterItem {
   link: string;
   alt: string;
   icon: ComponentType<IconColorProps>;
+  size?: string;
 }
 
 const FOOTER_LINKS: FooterItem[] = [
@@ -35,6 +36,7 @@ const FOOTER_LINKS: FooterItem[] = [
     link: 'https://image.sc',
     alt: 'Visit image.sc forum',
     icon: ImageSC,
+    size: 'h-5 w-5',
   },
   {
     title: 'Zulip',
@@ -44,8 +46,11 @@ const FOOTER_LINKS: FooterItem[] = [
   },
 ];
 
-const COMMON_STYLES =
-  'whitespace-nowrap text-xs screen-450:text-sm text-white mr-6 last:mr-0';
+const COMMON_STYLES = clsx(
+  'text-xs screen-450:text-sm text-white',
+  'whitespace-nowrap mr-6 last:mr-0',
+);
+const STANDARD_ICON_SIZE = 'h-4 w-4';
 
 function FooterLinks() {
   return (
@@ -57,7 +62,10 @@ function FooterLinks() {
           newTab
         >
           <item.icon
-            className="inline-block mr-1 h-4 w-4"
+            className={clsx(
+              item.size ? item.size : STANDARD_ICON_SIZE,
+              'inline-block mr-1',
+            )}
             color="white"
             alt={item.alt}
           />

From 797e7b2c0ecd2737fc4e3c115f69915eb7069ec1 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 13:39:42 -0700
Subject: [PATCH 4/8] change breakpoint 450->495

---
 theme/src/components/Footer.tsx | 4 ++--
 theme/src/theme.js              | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index bac310e8f4..81441221d7 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -47,7 +47,7 @@ const FOOTER_LINKS: FooterItem[] = [
 ];
 
 const COMMON_STYLES = clsx(
-  'text-xs screen-450:text-sm text-white',
+  'text-xs screen-495:text-sm text-white',
   'whitespace-nowrap mr-6 last:mr-0',
 );
 const STANDARD_ICON_SIZE = 'h-4 w-4';
@@ -82,7 +82,7 @@ export function Footer() {
       className={clsx(
         'flex flex-row items-center justify-start',
         'h-[4.6875em] w-full',
-        'px-6 screen-450:px-12',
+        'px-6 screen-495:px-12',
         'bg-black',
       )}
     >
diff --git a/theme/src/theme.js b/theme/src/theme.js
index 0a3cb7b085..0c4d86c773 100644
--- a/theme/src/theme.js
+++ b/theme/src/theme.js
@@ -18,7 +18,6 @@ const breakpoints = {
   // Special screen size for fresnel when using `lessThan` queries.
   zero: 0,
   'screen-300': 300,
-  'screen-450': 450,
   'screen-495': 495,
   'screen-875': 875,
   'screen-1150': 1150,

From ae70e0cb7a44e8cc29f3daedd2026ac6408f6666 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 13:54:15 -0700
Subject: [PATCH 5/8] make footer always go to bottom of page

---
 theme/src/components/App/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/theme/src/components/App/App.tsx b/theme/src/components/App/App.tsx
index 86894bfc04..05e8334fed 100644
--- a/theme/src/components/App/App.tsx
+++ b/theme/src/components/App/App.tsx
@@ -164,14 +164,14 @@ function Content() {
  */
 export function App() {
   return (
-    <>
+    <div className="min-h-screen flex flex-col">
       <AppBar />
 
-      <main className="mt-6">
+      <main className="mt-6 flex-grow">
         <Content />
       </main>
 
       <Footer />
-    </>
+    </div>
   );
 }

From 0107ba1c75ade11b924a4d6b5963c86d3f51b254 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 22 Sep 2021 14:58:05 -0700
Subject: [PATCH 6/8] fix footer links

---
 theme/src/components/Footer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index 81441221d7..39dfb574d5 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -27,20 +27,20 @@ const FOOTER_LINKS: FooterItem[] = [
   },
   {
     title: 'Twitter',
-    link: 'https://twitter.com/napari-imaging',
+    link: 'https://twitter.com/napari_imaging',
     alt: 'Visit Twitter page',
     icon: Twitter,
   },
   {
     title: 'image.sc',
-    link: 'https://image.sc',
+    link: 'https://forum.image.sc/tag/napari',
     alt: 'Visit image.sc forum',
     icon: ImageSC,
     size: 'h-5 w-5',
   },
   {
     title: 'Zulip',
-    link: 'https://image.sc',
+    link: 'https://napari.zulipchat.com',
     alt: 'Visit Zulip chatroom',
     icon: Zulip,
   },

From a38340b6340c06524e87580c98af71b676f64385 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Thu, 23 Sep 2021 15:52:31 -0700
Subject: [PATCH 7/8] add napari hub logo

---
 theme/src/components/Footer.tsx          |  30 ++++---
 theme/src/components/icons/NapariHub.tsx | 100 +++++++++++++++++++++++
 theme/src/components/icons/index.ts      |   1 +
 3 files changed, 120 insertions(+), 11 deletions(-)
 create mode 100644 theme/src/components/icons/NapariHub.tsx

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index 39dfb574d5..aa85dad1de 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -1,17 +1,18 @@
 import clsx from 'clsx';
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 import {
   GitHub,
   IconColorProps,
   ImageSC,
+  NapariHub,
   Twitter,
   Zulip,
 } from '@/components/icons';
 import { Link } from '@/components/Link';
 
 interface FooterItem {
-  title: string;
+  title: ReactNode | string;
   link: string;
   alt: string;
   icon: ComponentType<IconColorProps>;
@@ -19,6 +20,16 @@ interface FooterItem {
 }
 
 const FOOTER_LINKS: FooterItem[] = [
+  {
+    title: (
+      <>
+        <span className="font-normal">napari</span> hub
+      </>
+    ),
+    link: 'https://napari-hub.org',
+    alt: 'Visit napari hub',
+    icon: NapariHub,
+  },
   {
     title: 'GitHub',
     link: 'https://github.com/napari/napari',
@@ -46,10 +57,6 @@ const FOOTER_LINKS: FooterItem[] = [
   },
 ];
 
-const COMMON_STYLES = clsx(
-  'text-xs screen-495:text-sm text-white',
-  'whitespace-nowrap mr-6 last:mr-0',
-);
 const STANDARD_ICON_SIZE = 'h-4 w-4';
 
 function FooterLinks() {
@@ -57,7 +64,11 @@ function FooterLinks() {
     <>
       {FOOTER_LINKS.map((item) => (
         <Link
-          className={clsx(COMMON_STYLES, 'flex flex-row items-center')}
+          className={clsx(
+            'text-xs screen-495:text-sm text-white',
+            'whitespace-nowrap mr-6 last:mr-0',
+            'flex flex-row items-center',
+          )}
           href={item.link}
           newTab
         >
@@ -69,7 +80,7 @@ function FooterLinks() {
             color="white"
             alt={item.alt}
           />
-          {item.title}
+          <span className="font-semibold">{item.title}</span>
         </Link>
       ))}
     </>
@@ -86,9 +97,6 @@ export function Footer() {
         'bg-black',
       )}
     >
-      <Link className={COMMON_STYLES} href="https://napari-hub.org" newTab>
-        napari <span className="font-semibold">hub</span>
-      </Link>
       <FooterLinks />
     </div>
   );
diff --git a/theme/src/components/icons/NapariHub.tsx b/theme/src/components/icons/NapariHub.tsx
new file mode 100644
index 0000000000..f746d3d2b7
--- /dev/null
+++ b/theme/src/components/icons/NapariHub.tsx
@@ -0,0 +1,100 @@
+import { IconColorProps } from './icons.type';
+
+export function NapariHub({
+  className,
+  alt,
+  color = '#009BF2',
+}: IconColorProps) {
+  return (
+    <svg
+      className={className}
+      width="487"
+      height="512"
+      viewBox="0 0 487 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {alt && <title>{alt}</title>}
+      <circle
+        cx="243.036"
+        cy="256"
+        r="85.3333"
+        fill={color}
+        stroke={color}
+        strokeWidth="56.8889"
+      />
+      <circle cx="243.036" cy="42.6667" r="42.6667" fill={color} />
+      <circle cx="243.036" cy="469.333" r="42.6667" fill={color} />
+      <path
+        d="M243.036 28.4444L243.036 142.222"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M243.036 369.778L243.036 483.556"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="58.2838"
+        cy="149.333"
+        r="42.6667"
+        transform="rotate(-60 58.2838 149.333)"
+        fill={color}
+      />
+      <circle
+        cx="427.788"
+        cy="362.667"
+        r="42.6667"
+        transform="rotate(-60 427.788 362.667)"
+        fill={color}
+      />
+      <path
+        d="M45.967 142.222L144.501 199.111"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M341.57 312.889L440.105 369.778"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="58.2838"
+        cy="362.667"
+        r="42.6667"
+        transform="rotate(-120 58.2838 362.667)"
+        fill={color}
+      />
+      <circle
+        cx="427.788"
+        cy="149.333"
+        r="42.6667"
+        transform="rotate(-120 427.788 149.333)"
+        fill={color}
+      />
+      <path
+        d="M45.967 369.778L144.501 312.889"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M341.57 199.111L440.105 142.222"
+        stroke={color}
+        strokeWidth="56.8889"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/theme/src/components/icons/index.ts b/theme/src/components/icons/index.ts
index 53b7ed074e..fc1dfcb25a 100644
--- a/theme/src/components/icons/index.ts
+++ b/theme/src/components/icons/index.ts
@@ -4,6 +4,7 @@ export * from './GitHub';
 export * from './icons.type';
 export * from './ImageSC';
 export * from './Menu';
+export * from './NapariHub';
 export * from './NapariLogo';
 export * from './Search';
 export * from './Twitter';

From 657b88674105936ff9aabb20dad7d637196f1c86 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Thu, 23 Sep 2021 16:26:29 -0700
Subject: [PATCH 8/8] follow design scaling more faithfully

---
 theme/src/components/Footer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
index aa85dad1de..9910e2860a 100644
--- a/theme/src/components/Footer.tsx
+++ b/theme/src/components/Footer.tsx
@@ -47,7 +47,7 @@ const FOOTER_LINKS: FooterItem[] = [
     link: 'https://forum.image.sc/tag/napari',
     alt: 'Visit image.sc forum',
     icon: ImageSC,
-    size: 'h-5 w-5',
+    size: 'h-[1.25em] w-[1.25em]',
   },
   {
     title: 'Zulip',
@@ -57,7 +57,7 @@ const FOOTER_LINKS: FooterItem[] = [
   },
 ];
 
-const STANDARD_ICON_SIZE = 'h-4 w-4';
+const STANDARD_ICON_SIZE = 'h-[1em] w-[1em]';
 
 function FooterLinks() {
   return (
@@ -65,8 +65,8 @@ function FooterLinks() {
       {FOOTER_LINKS.map((item) => (
         <Link
           className={clsx(
-            'text-xs screen-495:text-sm text-white',
-            'whitespace-nowrap mr-6 last:mr-0',
+            'text-white',
+            'whitespace-nowrap mr-4 last:mr-0',
             'flex flex-row items-center',
           )}
           href={item.link}
@@ -80,7 +80,7 @@ function FooterLinks() {
             color="white"
             alt={item.alt}
           />
-          <span className="font-semibold">{item.title}</span>
+          <span className="font-semibold text-[0.875em]">{item.title}</span>
         </Link>
       ))}
     </>