From 90ec769f05bd2df86cf5a3389a75e09b62016957 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 1 Nov 2024 00:28:34 +0800
Subject: [PATCH 1/2] Add a shutdown banner

---
 .../components/elements/MaintenanceBanner.tsx | 42 -------------------
 .../web/components/templates/AuthLayout.tsx   |  2 +-
 .../web/components/templates/LoginLayout.tsx  |  3 +-
 .../components/templates/NavigationLayout.tsx |  3 +-
 .../components/templates/SettingsLayout.tsx   |  2 +
 5 files changed, 7 insertions(+), 45 deletions(-)
 delete mode 100644 packages/web/components/elements/MaintenanceBanner.tsx

diff --git a/packages/web/components/elements/MaintenanceBanner.tsx b/packages/web/components/elements/MaintenanceBanner.tsx
deleted file mode 100644
index fd24c743a6..0000000000
--- a/packages/web/components/elements/MaintenanceBanner.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { usePersistedState } from '../../lib/hooks/usePersistedState'
-import { CloseButton } from './CloseButton'
-import { HStack, SpanBox } from './LayoutPrimitives'
-
-export const MaintenanceBanner = () => {
-  const [
-    showMaintenanceMode,
-    setShowMaintenanceMode,
-    isLoadingShowMaintenanceMode,
-  ] = usePersistedState({
-    key: 'show-maintenance-mode',
-    isSessionStorage: false,
-    initialValue: false,
-  })
-  return (
-    <>
-      {!isLoadingShowMaintenanceMode && showMaintenanceMode && (
-        <HStack
-          css={{
-            p: '5px',
-            width: '100%',
-            position: 'fixed',
-            bg: '#FF5733',
-            color: '#FFFFFF',
-            zIndex: '100',
-          }}
-          alignment="center"
-          distribution="center"
-        >
-          Omnivore will be undergoing maintenance for 30 minutes at 05:00 UTC,
-          during that time the website and APIs will be unavailable.
-          <SpanBox css={{ width: '50px' }} />
-          <CloseButton
-            close={() => {
-              setShowMaintenanceMode(false)
-            }}
-          />
-        </HStack>
-      )}
-    </>
-  )
-}
diff --git a/packages/web/components/templates/AuthLayout.tsx b/packages/web/components/templates/AuthLayout.tsx
index 5b945b903f..b64d3cfb61 100644
--- a/packages/web/components/templates/AuthLayout.tsx
+++ b/packages/web/components/templates/AuthLayout.tsx
@@ -1,5 +1,5 @@
 import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
-import { MaintenanceBanner } from '../elements/MaintenanceBanner'
+import { ShutdownBanner } from '../elements/ShutdownBanner'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
 import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx
index 4b6819bc2e..7c27b390d2 100644
--- a/packages/web/components/templates/LoginLayout.tsx
+++ b/packages/web/components/templates/LoginLayout.tsx
@@ -10,11 +10,12 @@ import type { LoginFormProps } from './LoginForm'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 
 import featureFullWidthImage from '../../public/static/images/login/login-feature-image-full.png'
-import { MaintenanceBanner } from '../elements/MaintenanceBanner'
+import { ShutdownBanner } from '../elements/ShutdownBanner'
 
 export function LoginLayout(props: LoginFormProps): JSX.Element {
   return (
     <>
+      <ShutdownBanner />
       <MediumBreakpointBox
         smallerLayoutNode={<MobileLoginLayout {...props} />}
         largerLayoutNode={<MediumLoginLayout {...props} />}
diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index 9e640434ef..d5bbbf4a2f 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@@ -23,7 +23,7 @@ import { useGetViewer } from '../../lib/networking/viewer/useGetViewer'
 import { useQueryClient } from '@tanstack/react-query'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 import { CloseButton } from '../elements/CloseButton'
-import { MaintenanceBanner } from '../elements/MaintenanceBanner'
+import { ShutdownBanner } from '../elements/ShutdownBanner'
 
 export type NavigationSection =
   | 'home'
@@ -207,6 +207,7 @@ const Header = (props: HeaderProps): JSX.Element => {
         height: '58px',
       }}
     >
+      <ShutdownBanner />
       <Button
         style="plainIcon"
         onClick={(event) => {
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index 706601c787..e73e5bdaa8 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -13,6 +13,7 @@ import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth'
 import Link from 'next/link'
 import { CaretLeft } from '@phosphor-icons/react'
 import { DEFAULT_HOME_PATH } from '../../lib/navigations'
+import { ShutdownBanner } from '../elements/ShutdownBanner'
 
 type SettingsLayoutProps = {
   title?: string
@@ -82,6 +83,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
       css={{ width: '100%', height: '100%', minHeight: '100vh' }}
     >
       <PageMetaData path="settings" title="Settings" />
+      <ShutdownBanner />
       <VStack css={{ width: '100%', height: '100%' }}>
         <Box
           css={{

From 97b392aff6c849dd47b4941979659fe16563abec Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 1 Nov 2024 00:40:00 +0800
Subject: [PATCH 2/2] Add missing file

---
 .../components/elements/ShutdownBanner.tsx    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 packages/web/components/elements/ShutdownBanner.tsx

diff --git a/packages/web/components/elements/ShutdownBanner.tsx b/packages/web/components/elements/ShutdownBanner.tsx
new file mode 100644
index 0000000000..ea7f3ea2ef
--- /dev/null
+++ b/packages/web/components/elements/ShutdownBanner.tsx
@@ -0,0 +1,52 @@
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { CloseButton } from './CloseButton'
+import { HStack, SpanBox } from './LayoutPrimitives'
+
+export const ShutdownBanner = () => {
+  const [
+    showMaintenanceMode,
+    setShowMaintenanceMode,
+    isLoadingShowMaintenanceMode,
+  ] = usePersistedState({
+    key: 'show-shutdown-mode',
+    isSessionStorage: true,
+    initialValue: true,
+  })
+  return (
+    <>
+      {!isLoadingShowMaintenanceMode && showMaintenanceMode && (
+        <HStack
+          css={{
+            p: '5px',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            position: 'absolute',
+            bg: '#FF5733',
+            color: '#FFFFFF',
+            zIndex: '100',
+            font: '$inter',
+            gap: '10px',
+          }}
+          alignment="start"
+          distribution="center"
+        >
+          Omnivore is shutting down on Nov. 30th.
+          <a
+            href="https://blog.omnivore.app/p/details-on-omnivore-shutting-down"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Read More
+          </a>
+          <SpanBox css={{ width: '50px' }} />
+          <CloseButton
+            close={() => {
+              setShowMaintenanceMode(false)
+            }}
+          />
+        </HStack>
+      )}
+    </>
+  )
+}