From c978c50168303a8a0a78e4e24719ad76c07572e9 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Wed, 14 Aug 2024 15:17:37 +0500
Subject: [PATCH] fix: add class bodyMain to root element

---
 src/App.tsx           | 19 +++++++++++++++++++
 src/styles/styles.css | 15 +++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index e2f044d..60b4df3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,27 @@
 import { Route, Routes } from 'react-router-dom'
 import { Layout } from './layout'
 import { routes } from './routes'
+import { useEffect } from 'react'
+import './styles/styles.css'
 
 function App() {
+  useEffect(() => {
+    // Find the element with id 'root'
+    const rootElement = document.getElementById('root')
+
+    if (rootElement) {
+      // Add the class to the element
+      rootElement.classList.add('bodyMain')
+    }
+
+    // Cleanup function (optional): Remove the class when the component unmounts
+    return () => {
+      if (rootElement) {
+        rootElement.classList.remove('bodyMain')
+      }
+    }
+  }, [])
+
   return (
     <Routes>
       <Route element={<Layout />}>
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 7416431..e4a3e1b 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -1,3 +1,18 @@
+.bodyMain {
+  background: unset;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  min-height: 100vh;
+  position: relative;
+  letter-spacing: 1px;
+  font-size: 16px;
+  line-height: 25px;
+  word-break: break-word;
+  color: #ffffff;
+}
+
 .ContainerMain {
   max-width: 1400px;
   width: 100%;