From eb70db4f2f76293325dfbd4d8685efdef2d12412 Mon Sep 17 00:00:00 2001 From: Mitchell Magro Date: Wed, 18 Jun 2025 16:09:34 +0200 Subject: [PATCH] Added theme configuration --- app/components/sidebar/SideBarLink.tsx | 6 ++++-- app/components/sidebar/Sidebar.tsx | 2 +- app/layout.tsx | 29 +++++++------------------- config/ThemeRegistry.tsx | 14 +++++++++++++ config/theme.ts | 1 + 5 files changed, 27 insertions(+), 25 deletions(-) create mode 100644 config/ThemeRegistry.tsx diff --git a/app/components/sidebar/SideBarLink.tsx b/app/components/sidebar/SideBarLink.tsx index 5d08673..498d70b 100644 --- a/app/components/sidebar/SideBarLink.tsx +++ b/app/components/sidebar/SideBarLink.tsx @@ -20,11 +20,13 @@ const LinkContainer = styled('div')(({ theme }) => ({ cursor: 'pointer', }, })); + // background-color: rgb(69, 190, 171); -const LinkText = styled('span')({ +const LinkText = styled('span')(({ theme }) => ({ + color: theme.palette.text.tertiary, marginLeft: '12px', fontWeight: 500, -}); +})); export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) { return ( diff --git a/app/components/sidebar/Sidebar.tsx b/app/components/sidebar/Sidebar.tsx index d74be7d..128dd40 100644 --- a/app/components/sidebar/Sidebar.tsx +++ b/app/components/sidebar/Sidebar.tsx @@ -22,7 +22,7 @@ export const Sidebar = styled('div')(({ theme }) => ({ export const MainContent = styled('div')(({ theme }) => ({ marginLeft: '240px', padding: theme.spacing(3), - backgroundColor: 'green', + backgroundColor: theme.palette.secondary.main, minHeight: '100vh', })); diff --git a/app/layout.tsx b/app/layout.tsx index 42fc323..e7709d0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,31 +1,16 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +import ThemeRegistry from '@/config/ThemeRegistry'; +import type { Metadata } from 'next'; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: 'Your App', + description: 'Generated by Next.js', }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - {children} + + {children} ); diff --git a/config/ThemeRegistry.tsx b/config/ThemeRegistry.tsx new file mode 100644 index 0000000..19ddc63 --- /dev/null +++ b/config/ThemeRegistry.tsx @@ -0,0 +1,14 @@ + +'use client'; + +import { ThemeProvider, CssBaseline } from '@mui/material'; +import theme from './theme'; + +export default function ThemeRegistry({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + ); +} diff --git a/config/theme.ts b/config/theme.ts index f8f151f..375685e 100644 --- a/config/theme.ts +++ b/config/theme.ts @@ -15,6 +15,7 @@ const lightPalette = { text: { primary: '#000000', secondary: '#555555', + tertiary: '#fff', }, };