feat(synapse-interface): create template event maintenance components…

…, remove ecotone + metis event maintenance components (#2294)

* Remove upgrade components from app

* Create Event example for annoucements + progress bar, add comments

* Add comments for example of hook

* Adjust comments

* Adjust comments

* annoucement banner visual tweaks

* Add comment to show where progress bar was last used

* reset ECOTONE_FORK_END_DATE

* Add additional example code snippets

* Reorder imports

* Improve comments

---------

Co-authored-by: Lawson Kight <[email protected]>

packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx

@@ -54,28 +54,16 @@ export const AnnouncementBanner = ({
   if (!showBanner || !hasMounted || !isStarted || isComplete) return null
 
   return (
-    <div
-      className="flex items-center justify-center mx-auto mb-3 lg:flex-row"
-      style={{
-        background:
-          'linear-gradient(310.65deg, rgba(172, 143, 255, 0.2) -17.9%, rgba(255, 0, 255, 0.2) 86.48%)',
-      }}
-    >
+    <div className="flex items-center justify-center mx-auto lg:flex-row text-sm text-left bg-gradient-to-r from-fuchsia-600/25 to-purple-600/25">
       <div
         id="banner-default"
-        className="flex items-center px-8 pt-1 pb-1 rounded-md text-primaryTextColor"
+        className="flex items-center gap-4 px-4 py-2 w-full max-w-[1111px] text-primaryTextColor justify-between leading-normal"
         role="alert"
       >
-        <div className="container p-1 mx-auto">
-          <p className="text-md">{bannerContents}</p>
-        </div>
+        {bannerContents}
         <button
           type="button"
-          className={`
-            inline-flex items-center justify-center
-            h-7 w-7 p-1.5 ml-3
-            text-primaryTextColor
-          `}
+          className="inline-flex items-center justify-center text-primaryTextColor"
           data-dismiss-target="#banner-default"
           aria-label="Close"
           onClick={() => setShowBanner(false)}

packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx

@@ -1,6 +1,15 @@
 import { LinearAnimatedProgressBar } from './LinearAnimatedProgressBar'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 
+/**
+ * Automated Event Countdown Progress bar that displays
+ * time remaining for event target end date to be reached.
+ * Displays a visual progress bar with percentage completion.
+ *
+ * @param eventLabel text to display in progress bar
+ * @param startDate starting date for progress bar to activate
+ * @param endDate ending date for progress bar to disappear
+ */
 export const useEventCountdownProgressBar = (
   eventLabel: string,
   startDate: Date,
@@ -10,11 +19,11 @@ export const useEventCountdownProgressBar = (
   isComplete: boolean
   EventCountdownProgressBar: JSX.Element
 } => {
-  useIntervalTimer(60000)
-
   const { totalTimeRemainingInMinutes, hoursRemaining, isComplete, isPending } =
     getCountdownTimeStatus(startDate, endDate)
 
+  useIntervalTimer(60000, isComplete)
+
   const timeRemaining: string =
     totalTimeRemainingInMinutes > 90
       ? `${hoursRemaining}h`