Converted /components/banner to typescript

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%",

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}>

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}

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}