Updates

src/components/Header.tsx

@@ -4,6 +4,8 @@ import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
 
 import { Types } from '@meshtastic/meshtasticjs';
 
+import typelogo from '../../public/typelogo.svg';
+
 interface HeaderProps {
   status: Types.DeviceStatusEnum;
   IsReady: boolean;
@@ -14,7 +16,8 @@ const Header = (props: HeaderProps) => {
   return (
     <nav className="w-full shadow-md">
       <div className="flex w-full container mx-auto justify-between px-6 py-4">
-        <img src="/typelogo.svg" height="30" width="200" />
+        <img src={typelogo} height="30" width="200" />
+        <div></div>
 
         <div className="flex items-center">
           <div className="flex pl-4">

src/components/NavItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React from 'react';
 
 import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
 
@@ -6,19 +6,19 @@ interface NavItemProps {
   isDropdown: boolean;
   open: boolean;
   isNested: boolean;
-  titleContent: ReactNode;
-  dropdownContent?: ReactNode;
+  titleContent: React.ReactNode;
+  dropdownContent?: React.ReactNode;
   onClick?: Function;
   isLoading?: boolean;
 }
 
 const NavItem = (props: NavItemProps) => {
-  useEffect(() => {
+  React.useEffect(() => {
     if (props.open) {
       setNavItemOpen(props.open);
     }
   }, []);
-  const [navItemOpen, setNavItemOpen] = useState(false);
+  const [navItemOpen, setNavItemOpen] = React.useState(false);
   return (
     <>
       <div

src/components/Sidebar.tsx

@@ -20,7 +20,7 @@ interface SidebarProps {
   Connection: IHTTPConnection;
   MobileNavOpen: boolean;
   Language: LanguageEnum;
-  SetLanguage: Function;
+  SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   Translations: languageTemplate;
   myId: number;
 }

src/components/Sidebar/SidebarUISettings.tsx

@@ -10,7 +10,7 @@ import NavItem from '../NavItem';
 
 interface SidebarUISettingsProps {
   Language: LanguageEnum;
-  SetLanguage: Function;
+  SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   Translations: languageTemplate;
 }
 

src/components/basic/Timeline.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface TimelineProps {}
-
-const Timeline = (props: TimelineProps) => {
-  return <div></div>;
-};
-
-export default Timeline;

src/components/basic/TimelineItem.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-interface TimelineItemProps {
-  time: number;
-  color: string;
-}
-
-const TimelineItem = (props: TimelineItemProps) => {
-  return <div className={`rounded-full h-6 w-6 bg-${props.color}`}>Test</div>;
-};
-
-export default TimelineItem;

src/components/basic/ToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 interface ToggleSwitchProps {
   active: boolean;
@@ -6,9 +6,9 @@ interface ToggleSwitchProps {
 }
 
 const ToggleSwitch = (props: ToggleSwitchProps) => {
-  const [active, setActive] = useState(false);
+  const [active, setActive] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setActive(props.active);
   }, []);