link-society · coyote2190 · Mar 20, 2026
diff --git a/web/app/index.html b/web/app/index.html
@@ -15,7 +15,7 @@
 
     <script type="module" src="/src/main.tsx" defer></script>
   </head>
-  <body class="w-screen h-screen bg-slate-200 overflow-hidden">
-    <div id="root" class="w-screen h-screen"></div>
+  <body>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/web/app/src/App.tsx b/web/app/src/App.tsx
@@ -1,28 +1,13 @@
-import { RouterProvider } from 'react-router'
+import { ThemeRegistry } from '@/theme'
 
-import * as colors from '@mui/material/colors'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { RouterProvider } from 'react-router'
 
 import router from '@/router'
 
-const theme = createTheme({
-  shape: {
-    borderRadius: 0,
-  },
-  palette: {
-    primary: {
-      main: colors.blue[800],
-    },
-    secondary: {
-      main: colors.teal[400],
-    },
-  },
-})
-
 const App = () => (
-  <ThemeProvider theme={theme}>
+  <ThemeRegistry>
     <RouterProvider router={router} />
-  </ThemeProvider>
+  </ThemeRegistry>
 )
 
 export default App
diff --git a/web/app/src/layouts/app.tsx → web/app/src/layouts/AppLayout/component.tsx b/web/app/src/layouts/app.tsx → web/app/src/layouts/AppLayout/component.tsx
@@ -10,6 +10,8 @@ import NavBar from '@/components/NavBar'
 import PageFooter from '@/components/PageFooter'
 import ProfileProvider from '@/components/ProfileProvider'
 
+import { StyledAppLayout } from './styles'
+
 export const loader = async () => {
   return await loginRequired(authApi.whoami)()
 }
@@ -20,15 +22,15 @@ const AppLayout = () => {
 
   return (
     <ProfileProvider value={profile}>
-      <div className="h-full flex flex-col overflow-hidden">
+      <StyledAppLayout>
         <NavBar />
 
-        <main className="grow shrink h-0">
+        <main>
           <Outlet key={location.key} />
         </main>
 
         <PageFooter />
-      </div>
+      </StyledAppLayout>
     </ProfileProvider>
   )
 }

diff --git a/web/app/src/layouts/AppLayout/styles.tsx b/web/app/src/layouts/AppLayout/styles.tsx
@@ -0,0 +1,14 @@
+import { styled } from '@mui/material'
+
+export const StyledAppLayout = styled('div')`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  > main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    height: 0px;
+  }
+`
diff --git a/web/app/src/layouts/base.tsx → web/app/src/layouts/BaseLayout/component.tsx b/web/app/src/layouts/base.tsx → web/app/src/layouts/BaseLayout/component.tsx
@@ -6,17 +6,19 @@ import { Outlet } from 'react-router'
 import { DialogsProvider } from '@toolpad/core/useDialogs'
 import { NotificationsProvider } from '@toolpad/core/useNotifications'
 
+import { StyledBaseLayout } from './styles'
+
 const BaseLayout = () => {
   return (
-    <div className="h-full flex flex-col overflow-hidden">
+    <StyledBaseLayout>
       <DialogsProvider>
         <NotificationsProvider>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <Outlet />
           </LocalizationProvider>
         </NotificationsProvider>
       </DialogsProvider>
-    </div>
+    </StyledBaseLayout>
   )
 }
 

diff --git a/web/app/src/layouts/BaseLayout/styles.tsx b/web/app/src/layouts/BaseLayout/styles.tsx
@@ -0,0 +1,8 @@
+import { styled } from '@mui/material'
+
+export const StyledBaseLayout = styled('div')`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`
diff --git a/web/app/src/router/index.tsx b/web/app/src/router/index.tsx
@@ -8,7 +8,8 @@ export default createBrowserRouter([
   {
     path: '/web/',
     lazy: async () => {
-      const { default: Component } = await import('@/layouts/base')
+      const { default: Component } =
+        await import('@/layouts/BaseLayout/component')
       return {
         Component,
         HydrateFallback: () => <LinearProgress />,
@@ -34,7 +35,8 @@ export default createBrowserRouter([
       {
         path: '',
         lazy: async () => {
-          const { default: Component, loader } = await import('@/layouts/app')
+          const { default: Component, loader } =
+            await import('@/layouts/AppLayout/component')
           return { Component, loader }
         },
         children: [

diff --git a/web/app/src/theme/ThemeRegistry.tsx b/web/app/src/theme/ThemeRegistry.tsx
@@ -0,0 +1,29 @@
+import { CacheProvider } from '@emotion/react'
+
+import { type ReactNode, useMemo } from 'react'
+
+import CssBaseline from '@mui/material/CssBaseline'
+import GlobalStyles from '@mui/material/GlobalStyles'
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createEmotionCache } from './emotionCache'
+import globalStyles from './globalStyles'
+import theme from './theme'
+
+interface ThemeRegistryProps {
+  children: ReactNode
+}
+
+export default function ThemeRegistry({ children }: ThemeRegistryProps) {
+  const cache = useMemo(() => createEmotionCache(), [])
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles styles={globalStyles} />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  )
+}
diff --git a/web/app/src/theme/emotionCache.ts b/web/app/src/theme/emotionCache.ts
@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache'
+
+export function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true })
+}
diff --git a/web/app/src/theme/globalStyles.ts b/web/app/src/theme/globalStyles.ts
@@ -0,0 +1,26 @@
+import type { GlobalStylesProps } from '@mui/material/GlobalStyles'
+
+import { colors } from './tokens'
+
+const globalStyles: GlobalStylesProps['styles'] = {
+  'html, body': {
+    margin: 0,
+    padding: 0,
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: colors.backgroundBody,
+    overflow: 'hidden',
+  },
+  '#root': {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  a: {
+    textDecoration: 'none',
+    color: 'inherit',
+  },
+}
+
+export default globalStyles
diff --git a/web/app/src/theme/index.ts b/web/app/src/theme/index.ts
@@ -0,0 +1,3 @@
+export { default as ThemeRegistry } from './ThemeRegistry'
+export { default as theme } from './theme'
+export { createEmotionCache } from './emotionCache'
diff --git a/web/app/src/theme/theme.ts b/web/app/src/theme/theme.ts
@@ -0,0 +1,31 @@
+import { colors } from '@mui/material'
+
+import { createTheme } from '@mui/material/styles'
+
+import { type TokensType, tokens } from './tokens'
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    tokens: TokensType
+  }
+  interface ThemeOptions {
+    tokens?: TokensType
+  }
+}
+
+const theme = createTheme({
+  tokens,
+  shape: {
+    borderRadius: 0,
+  },
+  palette: {
+    primary: {
+      main: colors.blue[800],
+    },
+    secondary: {
+      main: colors.teal[400],
+    },
+  },
+})
+
+export default theme
diff --git a/web/app/src/theme/tokens/breakpoints.ts b/web/app/src/theme/tokens/breakpoints.ts
@@ -0,0 +1,19 @@
+export type BreakpointsType = {
+  xs: string
+  sm: string
+  md: string
+  lg: string
+  xl: string
+  xxl: string
+}
+
+export const breakpoints: BreakpointsType = {
+  xs: '320px',
+  sm: '480px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  xxl: '1536px',
+}
+
+export default breakpoints
diff --git a/web/app/src/theme/tokens/colors.ts b/web/app/src/theme/tokens/colors.ts
@@ -0,0 +1,11 @@
+export type ColorsType = {
+  white: string
+  backgroundBody: string
+}
+
+export const colors: ColorsType = {
+  white: '#ffffff',
+  backgroundBody: '#e2e8f0',
+}
+
+export default colors
diff --git a/web/app/src/theme/tokens/index.ts b/web/app/src/theme/tokens/index.ts
@@ -0,0 +1,15 @@
+import breakpoints, { BreakpointsType } from './breakpoints'
+import colors, { ColorsType } from './colors'
+
+export const tokens = {
+  breakpoints,
+  colors,
+}
+
+export type TokensType = {
+  breakpoints: BreakpointsType
+  colors: ColorsType
+}
+
+export { breakpoints, colors }
+export type { BreakpointsType, ColorsType }