Fix all TypeScript errors so far

5 files changed, 43 insertions, 14 deletions

diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx
index d58e34e..0aab74b 100644
--- a/thallium-frontend/src/App.tsx
+++ b/thallium-frontend/src/App.tsx
@@ -5,7 +5,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 
-import themes from './themes.tsx';
+import themes from './themes';
 
 import Header from "./components/Header";
 
@@ -68,8 +68,7 @@ function App() {
   const theme = isDarkMode ? themes.dark : themes.light;
 
   useEffect(() => {
-    const prefersDark = window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
     setIsDarkMode(prefersDark);
   }, []);
diff --git a/thallium-frontend/src/components/Card.tsx b/thallium-frontend/src/components/Card.tsx
index 9aac6b2..f5b8c13 100644
--- a/thallium-frontend/src/components/Card.tsx
+++ b/thallium-frontend/src/components/Card.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-
 const CardContainer = styled.div`
   border: 3px solid ${({ theme }) => theme.borderColor};
   padding: 16px;
@@ -28,7 +27,7 @@ interface CardProps {
     children: React.ReactNode;
 }
 
-const Card: React.FC<CardProps> = ({ title, children }) => {
+const Card: React.FC<CardProps> = ({ title, children }: CardProps) => {
     return (
         <CardContainer>
             <CardTitle>{title}</CardTitle>
diff --git a/thallium-frontend/src/pages/ErrorPage.tsx b/thallium-frontend/src/pages/ErrorPage.tsx
index a649e25..ffc6f8a 100644
--- a/thallium-frontend/src/pages/ErrorPage.tsx
+++ b/thallium-frontend/src/pages/ErrorPage.tsx
@@ -1,18 +1,28 @@
-import { useRouteError } from 'react-router-dom';
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
 
 import Card from '../components/Card';
 
 const LandingPage = () => {
-    const error: any = useRouteError() || {};
+    const error = useRouteError();
 
-    let title, message, isUnexpected = false;
+    let title = 'Unexpected Error', message, isUnexpected = false;
 
-    if (error.status === 404) {
-        title = 'Not Found';
-        message = 'The requested page could not be found.';
+    if (isRouteErrorResponse(error)) {
+        if (error.status === 404) {
+            title = 'Not Found';
+            message = 'The requested page could not be found.';
+        } else {
+            message = error.statusText;
+        }
+    } else if (error instanceof Error) {
+        message = error.message;
+        isUnexpected = true;
+    } else if (typeof error === 'string') {
+        message = error;
+        isUnexpected = true;
     } else {
-        title = 'Error';
-        message = error.message || error.statusText;
+        console.error(error);
+        message = 'Unknown error';
         isUnexpected = true;
     }
 
diff --git a/thallium-frontend/src/styled-components.d.ts b/thallium-frontend/src/styled-components.d.ts
new file mode 100644
index 0000000..d6527d3
--- /dev/null
+++ b/thallium-frontend/src/styled-components.d.ts
@@ -0,0 +1,5 @@
+import type { Theme } from './themes';
+
+declare module "styled-components" {
+    export interface DefaultTheme extends Theme { }
+}
diff --git a/thallium-frontend/src/themes.tsx b/thallium-frontend/src/themes.ts
index 9bc4f77..010300e 100644
--- a/thallium-frontend/src/themes.tsx
+++ b/thallium-frontend/src/themes.ts
@@ -1,4 +1,18 @@
-const themes = {
+interface Theme {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+    linkColor: string;
+    cardBackgroundColor: string;
+    cardShadow: string;
+}
+
+interface ThemesStore {
+    light: Theme;
+    dark: Theme;
+}
+
+const themes: ThemesStore = {
     light: {
         backgroundColor: '#f0f0f0',
         textColor: '#000',
@@ -18,3 +32,5 @@ const themes = {
 };
 
 export default themes;
+
+export type { Theme, ThemesStore };