chore: switch to using the StatusIcon component in meganav & footer

For the meganav this resolves the issue of invalid markup (a > a)
ably · Nov 25, 2024 · d0271c0 · d0271c0
1 parent 398c4a2
commit d0271c0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/src/core/Footer.tsx b/src/core/Footer.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
-import Status from "./Status.js";
+import { StatusIcon } from "./Status.js";
 
 type FooterProps = {
   paths: {
@@ -209,14 +209,16 @@ const Footer = ({ paths, urlBase, statusUrl }: FooterProps) => {
                 SDKs
               </a>
             </li>
-            <li className="p-menu-row-snug flex items-center -mt-4">
+            <li className="p-menu-row-snug">
               <a
-                className="pr-8 ui-footer-menu-row-link"
+                className="ui-footer-menu-row-link flex items-center gap-4"
                 href="https://status.ably.com/"
+                target="_blank"
+                rel="noreferrer"
               >
                 System status
+                <StatusIcon statusUrl={statusUrl} />
               </a>
-              <Status statusUrl={statusUrl} />
             </li>
           </ul>
         </div>

diff --git a/src/core/MeganavContentDevelopers.tsx b/src/core/MeganavContentDevelopers.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "./Icon";
 import { AbsUrl } from "./Meganav";
-import Status from "./Status";
+import { StatusIcon } from "./Status";
 
 const MeganavContentDevelopers = ({
   absUrl,
@@ -186,12 +186,9 @@ const MeganavContentDevelopers = ({
               href="https://status.ably.com/"
               className="group ui-meganav-media py-12"
             >
-              <p className="ui-meganav-media-heading">
+              <p className="ui-meganav-media-heading flex items-center gap-4">
                 Status
-                <Status
-                  statusUrl={statusUrl}
-                  additionalCSS="ml-4 align-middle"
-                />
+                <StatusIcon statusUrl={statusUrl} />
               </p>
             </a>
           </li>