From 9e9dd8e0092d0f4bcf8c4e8b2e23bfe6e5aefe55 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Tue, 19 Mar 2024 17:54:33 +0000
Subject: [PATCH] chore: local CSS imports and TS fixes

---
 src/core/ContactFooter/component.tsx          |  1 +
 src/core/CookieMessage/component.tsx          |  1 +
 src/core/Flash/component.tsx                  |  2 +-
 src/core/Footer/component.tsx                 |  2 +-
 src/core/Meganav/component.js                 | 13 ++++++------
 src/core/Meganav/component.tsx                | 21 +++++++++----------
 src/core/MeganavContentCompany/component.tsx  |  2 +-
 .../MeganavContentDevelopers/component.tsx    |  2 +-
 src/core/MeganavItemsMobile/component.tsx     |  6 +++---
 src/core/Notice/component.tsx                 |  1 +
 src/core/Slider/component.tsx                 |  1 +
 11 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/core/ContactFooter/component.tsx b/src/core/ContactFooter/component.tsx
index 1c3f5a12..438a7da2 100644
--- a/src/core/ContactFooter/component.tsx
+++ b/src/core/ContactFooter/component.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
 import Icon from "../Icon/component.tsx";
 import _absUrl from "../url-base.js";
 import toggleChatWidget from "../hubspot-chat-toggle";
+import "./component.css";
 
 type ContactFooterProps = {
   urlBase: string;
diff --git a/src/core/CookieMessage/component.tsx b/src/core/CookieMessage/component.tsx
index fe345119..a61af340 100644
--- a/src/core/CookieMessage/component.tsx
+++ b/src/core/CookieMessage/component.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
+import "./component.css";
 
 import _absUrl from "../url-base";
 
diff --git a/src/core/Flash/component.tsx b/src/core/Flash/component.tsx
index fe845ba1..e1429a2f 100644
--- a/src/core/Flash/component.tsx
+++ b/src/core/Flash/component.tsx
@@ -3,7 +3,7 @@ import DOMPurify from "dompurify";
 import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store.js";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.js";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
 import Icon from "../Icon/component.tsx";
 import "./component.css";
 
diff --git a/src/core/Footer/component.tsx b/src/core/Footer/component.tsx
index 13e4d2bf..4ba85af2 100644
--- a/src/core/Footer/component.tsx
+++ b/src/core/Footer/component.tsx
@@ -219,7 +219,7 @@ const Footer = ({ paths, urlBase }: FooterProps) => {
               <iframe
                 className="w-20 h-20 mb-2"
                 src="https://status.ably.com/embed/icon"
-                allowTransparency
+                style={{ backgroundColor: "transparent" }}
                 frameBorder="0"
                 scrolling="no"
                 title="System Status"
diff --git a/src/core/Meganav/component.js b/src/core/Meganav/component.js
index 704e625a..c4963c26 100644
--- a/src/core/Meganav/component.js
+++ b/src/core/Meganav/component.js
@@ -12,13 +12,12 @@ import "./component.css";
 
 import { queryId, queryIdAll } from "../dom-query";
 
-import MeganavControl from "../MeganavControl/component.tsx";
-
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
-import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component.tsx";
-import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
+import MeganavControl from "../MeganavControl/component.js";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.js";
+import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component.js";
+import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component.js";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.js";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.js";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {
diff --git a/src/core/Meganav/component.tsx b/src/core/Meganav/component.tsx
index d148d61b..2bcedaf3 100644
--- a/src/core/Meganav/component.tsx
+++ b/src/core/Meganav/component.tsx
@@ -3,7 +3,8 @@ import React, { ReactNode, useEffect, useState } from "react";
 import { connectState } from "../remote-data-store.js";
 import { selectSessionData } from "../remote-session-data.js";
 
-import Logo from "../Logo/component.js";
+import Logo from "../Logo/component.tsx";
+import "./component.css";
 
 import MeganavScripts from "./component.js";
 import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
@@ -211,16 +212,14 @@ const Meganav = ({
           <SignInPlaceholder />
         )}
 
-        {sessionState && (
-          <MeganavItemsMobile
-            panels={panels}
-            sessionState={sessionState}
-            paths={paths}
-            theme={theme}
-            loginLink={loginLink}
-            absUrl={absUrl}
-          />
-        )}
+        <MeganavItemsMobile
+          panels={panels}
+          sessionState={sessionState}
+          paths={paths}
+          theme={theme}
+          loginLink={loginLink}
+          absUrl={absUrl}
+        />
       </div>
     </nav>
   );
diff --git a/src/core/MeganavContentCompany/component.tsx b/src/core/MeganavContentCompany/component.tsx
index ba18cbd0..afd78f2c 100644
--- a/src/core/MeganavContentCompany/component.tsx
+++ b/src/core/MeganavContentCompany/component.tsx
@@ -4,7 +4,7 @@ import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
 import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
 import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.js";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;
diff --git a/src/core/MeganavContentDevelopers/component.tsx b/src/core/MeganavContentDevelopers/component.tsx
index 776bb541..ef7296a1 100644
--- a/src/core/MeganavContentDevelopers/component.tsx
+++ b/src/core/MeganavContentDevelopers/component.tsx
@@ -184,7 +184,7 @@ const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
                 <iframe
                   title="Ably status"
                   src="https://status.ably.com/embed/icon"
-                  allowTransparency
+                  style={{ backgroundColor: "transparent" }}
                   frameBorder="0"
                   scrolling="no"
                   className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
diff --git a/src/core/MeganavItemsMobile/component.tsx b/src/core/MeganavItemsMobile/component.tsx
index bab8bb3c..fc539839 100644
--- a/src/core/MeganavItemsMobile/component.tsx
+++ b/src/core/MeganavItemsMobile/component.tsx
@@ -20,7 +20,7 @@ type MeganavItemsMobileProps = {
   paths?: {
     iconSprites: string;
   };
-  sessionState: MeganavSessionState;
+  sessionState?: MeganavSessionState;
   theme: MeganavTheme;
   loginLink: string;
   absUrl: AbsUrl;
@@ -39,7 +39,7 @@ const MeganavItemsMobile = ({
   return (
     <ul className="flex md:hidden" data-id="meganav-items-mobile">
       <li>
-        {sessionState.signedIn && sessionState.logOut ? (
+        {sessionState?.signedIn && sessionState?.logOut ? (
           <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
             {({ text, href, onClick }) => (
               <a
@@ -165,7 +165,7 @@ const MeganavItemsMobile = ({
               >
                 Contact us
               </a>
-              {sessionState.signedIn && sessionState.account ? (
+              {sessionState?.signedIn && sessionState?.account ? (
                 <a
                   href={absUrl(sessionState.account.links.dashboard.href)}
                   className="ui-btn-secondary"
diff --git a/src/core/Notice/component.tsx b/src/core/Notice/component.tsx
index 934ccb46..9adc1ffe 100644
--- a/src/core/Notice/component.tsx
+++ b/src/core/Notice/component.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode, useEffect } from "react";
 
 import NoticeScripts from "./component.js";
+import "./component.css";
 import Icon from "../Icon/component.tsx";
 
 type ContentWrapperProps = {
diff --git a/src/core/Slider/component.tsx b/src/core/Slider/component.tsx
index 734f1e5b..b03dc864 100644
--- a/src/core/Slider/component.tsx
+++ b/src/core/Slider/component.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties, ReactNode, useEffect, useRef } from "react";
 
 import Icon from "../Icon/component.tsx";
 import SliderScripts from "./component.js";
+import "./component.css";
 
 type SliderProps = {
   slides?: ReactNode[];