Merge pull request #380 from topcoder-platform/maintenance

add maintenance banner

Author: vas3a

.circleci/config.yml

@@ -220,6 +220,7 @@ workflows:
               only:
                 - dev
                 - TOP-2044_show-signin-modal
+                - maintenance
 
       - deployProd:
           context: org-global

src/lib/components/Maintenance.module.scss

@@ -0,0 +1,43 @@
+@import 'lib/styles/fonts.scss';
+
+.bannerWrap {
+  position: relative;
+  height: 48px;
+  width: 100%;
+}
+
+.banner {
+  background: rgb(157, 27, 27);
+  color: #fff;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+
+  &:before {
+    content: "";
+    display: block;
+  }
+}
+
+.bannerContent {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 1rem;
+  row-gap: 0.5rem;
+  margin: 0 0.5rem;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.bannerText {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: $roboto;
+  font-size: 16px;
+  color: #fff;
+  line-height: 24px;
+  font-weight: bold;
+}
+

src/lib/components/Maintenance.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import styles from './Maintenance.module.scss';
+  const bannerName = 'maintenance';
+</script>
+
+<div class={styles.banner}>
+  <div class={styles.bannerContent}>
+    <div class={styles.bannerText}>
+      Topcoder will be undergoing maintenance on Tuesday, October 21, 2025 from 1 AM to 6 AM EST
+    </div>
+  </div>
+</div>

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -12,6 +12,7 @@
   import { checkAndLoadFonts } from 'lib/utils/fonts';
   import NavigationBar from './components/NavigationBar.svelte';
   import UserArea from 'lib/components/user-area/UserArea.svelte';
+  import Maintenance from 'lib/components/Maintenance.svelte';
 
   const ctx = getAppContext()
   $: ({auth, navigationHandler} = $ctx)
@@ -35,6 +36,7 @@
 
 <div class="tc-universal-nav-wrap">
   <!-- <Banner /> -->
+  <Maintenance />
   <NavigationBar
     activeRoutePath={activeRoute}
     activeRoute={primaryRoute}

src/lib/tool-navigation/ToolNavigation.svelte

@@ -15,6 +15,7 @@
   import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
   import { useSessionStorage } from 'lib/utils/use-storage';
   import { marketingRightItems } from 'lib/functions/marketing-navigation.provider'
+  import Maintenance from 'lib/components/Maintenance.svelte';
 
   import styles from './ToolNavigation.module.scss';
   import ToolNavSeparator from './tool-nav-separator/ToolNavSeparator.svelte';
@@ -48,6 +49,7 @@
   onMount(checkAndLoadFonts)
 </script>
 
+<Maintenance />
 <TopNavbar class={classnames(styles.navbar, 'tc-universal-nav-wrap')} style="primary" minVersionLogo>
   {#if $isMobile}
     <MobileNavigation