Add a shutdown banner

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'

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} />}

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) => {

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={{