chore: local CSS imports and TS fixes

ably · Mar 20, 2024 · 9e9dd8e · 9e9dd8e
1 parent 657c989
commit 9e9dd8e
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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[];