From d0271c078d67c0c8498cc2ccda64a0d31c62c770 Mon Sep 17 00:00:00 2001
From: Kenneth Kalmer <kenneth.kalmer@ably.com>
Date: Mon, 25 Nov 2024 15:12:50 +0000
Subject: [PATCH] chore: switch to using the StatusIcon component in meganav &
 footer

For the meganav this resolves the issue of invalid markup (a > a)
---
 src/core/Footer.tsx                   | 10 ++++++----
 src/core/MeganavContentDevelopers.tsx |  9 +++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/core/Footer.tsx b/src/core/Footer.tsx
index a6b754f21..ab4936f63 100644
--- 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
index 226e297e3..31ca9d96e 100644
--- 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>