added warning header slide in animation.

components/WarningHeader.module.css

@@ -1,7 +1,11 @@
 .warning{
   background-color: var(--warning-background);
   padding: calc(5rem / 16);
-  color: var(--primary-accent-light);
+  color: var(--warning-text);
   font-size: calc(15rem / 16);
   text-align: center;
+  opacity: 1;
+  
+  max-height: 500px; /* just for smooth fade in purposes */
+  transition: max-height 100ms ease-in;
 }

components/WarningHeader.tsx

@@ -11,7 +11,7 @@ export function WarningHeader() {
   const [warning, setWarning] = useState<Warning | null>(null);
 
   useEffect(() => {
-    fetch("api/currentWarning/")
+    fetch("/api/currentWarning/")
       .then((res) => res.json())
       .then((data) => {
         setWarning(data);
@@ -22,7 +22,12 @@ export function WarningHeader() {
   });
 
   if (!warning || !warning.content || warning.content == "") {
-    return <></>;
+    return (
+      <div
+        className={styles.warning}
+        style={{ maxHeight: 0, opacity: 0 }}
+      ></div>
+    );
   }
 
   return <div className={styles.warning}>{warning.content}</div>;

content/warnings/2022-01-29-testWarning.txt

@@ -2,5 +2,4 @@
 startDate: 'January 29 2022 21:00'
 endDate: 'January 30 2022 18:00'
 ---
-This is a test warning. Again!
-
+Warning: There will be a scheduled system outage on Jan 29, 2022

pages/_app.css

@@ -23,6 +23,7 @@ body {
 
   --form-invalid: #9f616a;
   --warning-background: #dd0014;
+  --warning-text: #ffffff;
 
   --input-background: #f0f0f0;
   --input-placeholder-text: #bbbbbb;