diff --git a/src/components/banner/Banner.js b/src/components/banner/Banner.tsx
similarity index 85%
rename from src/components/banner/Banner.js
rename to src/components/banner/Banner.tsx
index 6a64017..5e8eb08 100644
--- a/src/components/banner/Banner.js
+++ b/src/components/banner/Banner.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Modal from "react-modal";
 import { useThemeUI, Close } from "theme-ui";
 
@@ -8,6 +7,12 @@ function Banner({
   children,
   allowClose,
   backgroundColor,
+}: {
+  isOpen: boolean, 
+  onRequestClose: any, 
+  children: any, 
+  allowClose: boolean, 
+  backgroundColor?: any
 }) {
   const { theme } = useThemeUI();
 
@@ -18,7 +23,7 @@ function Banner({
       style={{
         overlay: { bottom: "0", top: "initial", zIndex: 2000 },
         content: {
-          backgroundColor: backgroundColor || theme.colors.highlight,
+          backgroundColor: backgroundColor || theme.colors?.highlight,
           color: "hsl(210, 50%, 96%)",
           top: "initial",
           left: "50%",
diff --git a/src/components/banner/ErrorBanner.js b/src/components/banner/ErrorBanner.tsx
similarity index 76%
rename from src/components/banner/ErrorBanner.js
rename to src/components/banner/ErrorBanner.tsx
index 6bb3574..cdfac99 100644
--- a/src/components/banner/ErrorBanner.js
+++ b/src/components/banner/ErrorBanner.tsx
@@ -1,9 +1,8 @@
-import React from "react";
 import { Box, Text } from "theme-ui";
 
 import Banner from "./Banner";
 
-function ErrorBanner({ error, onRequestClose }) {
+function ErrorBanner({ error, onRequestClose }: { error: Error | undefined, onRequestClose: any }) {
   return (
     <Banner isOpen={!!error} onRequestClose={onRequestClose}>
       <Box p={1}>
diff --git a/src/components/banner/OfflineBanner.js b/src/components/banner/OfflineBanner.tsx
similarity index 91%
rename from src/components/banner/OfflineBanner.js
rename to src/components/banner/OfflineBanner.tsx
index d5d90ad..2680e0a 100644
--- a/src/components/banner/OfflineBanner.js
+++ b/src/components/banner/OfflineBanner.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import Banner from "./Banner";
 import OfflineIcon from "../../icons/OfflineIcon";
 
-function OfflineBanner({ isOpen }) {
+function OfflineBanner({ isOpen }: { isOpen: boolean }) {
   return (
     <Banner
       isOpen={isOpen}
diff --git a/src/components/banner/ReconnectBanner.js b/src/components/banner/ReconnectBanner.tsx
similarity index 91%
rename from src/components/banner/ReconnectBanner.js
rename to src/components/banner/ReconnectBanner.tsx
index 7fa917a..33237cc 100644
--- a/src/components/banner/ReconnectBanner.js
+++ b/src/components/banner/ReconnectBanner.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import Banner from "./Banner";
 import ReconnectingIcon from "../../icons/ReconnectingIcon";
 
-function ReconnectBanner({ isOpen }) {
+function ReconnectBanner({ isOpen }: { isOpen: boolean }) {
   return (
     <Banner
       isOpen={isOpen}