add global styles to layout head

calblueprint · Nov 26, 2024 · 69e4558 · 69e4558
1 parent d744c2c
commit 69e4558
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import StyledComponentsRegistry from '@/lib/registry';
+import { GlobalStyle } from '@/styles/globalStyles';
 import ProfileProvider from '@/utils/ProfileProvider';
 import { AuthProvider } from '../utils/AuthProvider';
 
@@ -12,8 +13,9 @@ const sans = Inter({
 
 // site metadata - what shows up on embeds
 export const metadata: Metadata = {
-  title: 'Project Name',
-  description: 'Description of project',
+  title: 'Trap Garden',
+  description:
+    'A web app to assist individuals, schools, and small organizations in establishing and maintaining their own gardens.',
 };
 
 export default function RootLayout({
@@ -23,6 +25,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <GlobalStyle />
+      </head>
       <body className={sans.className}>
         <AuthProvider>
           <ProfileProvider>

diff --git a/styles/globalStyles.tsx b/styles/globalStyles.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`;
+
+export default function GlobalStyleWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <GlobalStyle />
+      {children}
+    </>
+  );
+}