Create a frontend wireframe. (#7)

Sets up API methods and types.
Sets up a colorscheme.
Sets up a homepage.

Removes tailwind in favor of mui for now.

Reviewed-on: #7
Co-authored-by: Drew Galbraith <drew@tiramisu.one>
Co-committed-by: Drew Galbraith <drew@tiramisu.one>

frontend/app/theme.ts

@@ -0,0 +1,178 @@
+import { createTheme } from '@mui/material/styles'
+
+// Color palette constants
+const colors = {
+  // Primary Colors
+  deepNavy: '#1e3a5f', // Main brand color for headers and primary actions
+  oceanBlue: '#2c5282', // Secondary blue for links and active states
+  compassGold: '#d69e2e', // Accent color for highlights and call-to-actions
+
+  // Status Colors
+  chartGreen: '#48bb78', // Completed tasks and success states
+  sunsetCoral: '#f56565', // Urgent tasks and error states
+  seaFoam: '#4fd1c7', // Information and notification states
+
+  // Neutrals
+  parchment: '#f7fafc', // Clean background color
+  fogGray: '#e2e8f0', // Subtle borders and dividers
+  stormGray: '#718096', // Secondary text
+  anchorDark: '#2d3748', // Primary text and headings
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    custom: {
+      task: {
+        todo: string
+        done: string
+        backlog: string
+      }
+    }
+  }
+
+  interface ThemeOptions {
+    custom?: {
+      task?: {
+        todo?: string
+        done?: string
+        backlog?: string
+      }
+    }
+  }
+}
+
+export const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: colors.deepNavy,
+      light: colors.oceanBlue,
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: colors.compassGold,
+      contrastText: '#ffffff',
+    },
+    success: {
+      main: colors.chartGreen,
+    },
+    error: {
+      main: colors.sunsetCoral,
+    },
+    info: {
+      main: colors.seaFoam,
+    },
+    background: {
+      default: colors.parchment,
+      paper: '#ffffff',
+    },
+    text: {
+      primary: colors.anchorDark,
+      secondary: colors.stormGray,
+    },
+    grey: {
+      100: '#edf2f7',
+      200: colors.fogGray,
+      300: '#cbd5e0',
+      500: colors.stormGray,
+      700: colors.anchorDark,
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    h1: {
+      fontSize: '2rem',
+      fontWeight: 700,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: '1.5rem',
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    h3: {
+      fontSize: '1.25rem',
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+    body1: {
+      fontSize: '1rem',
+      lineHeight: 1.6,
+    },
+    body2: {
+      fontSize: '0.875rem',
+      lineHeight: 1.5,
+    },
+  },
+  shape: {
+    borderRadius: 12,
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: colors.deepNavy,
+          color: '#ffffff',
+          boxShadow:
+            '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+          borderBottom: 'none',
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '#ffffff',
+          borderRight: `1px solid ${colors.fogGray}`,
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: '0.75rem',
+          fontWeight: 500,
+        },
+        contained: {
+          boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+          '&:hover': {
+            boxShadow:
+              '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '0.75rem',
+          boxShadow:
+            '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+          border: `1px solid ${colors.fogGray}`,
+          '&:hover': {
+            boxShadow:
+              '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            borderColor: '#cbd5e0',
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: '0.75rem',
+          },
+        },
+      },
+    },
+  },
+  custom: {
+    task: {
+      todo: colors.oceanBlue,
+      done: colors.chartGreen,
+      backlog: colors.stormGray,
+    },
+  },
+})