update: enhance global card styling and sidebar menu appearance

src/layout/MainLayout.jsx

@@ -4,30 +4,30 @@ import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
-
 const { Content } = Layout;
 
 const MainLayout = ({ children }) => {
-  const {
-    token: { colorBgContainer, borderRadiusLG },
-  } = theme.useToken();
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
 
-  return (
-    <Layout style={{ height: '100vh' }}>
-      <LayoutSidebar />
-      <Layout
-      style={{
-        overflow: 'auto',
-
-      }}>
-        <LayoutHeader />
-        <Content
-          style={{
-            margin: '24px 16px 0',
-            flex: '1 0 auto',
-          }}
-        >
-          {/* <div
+    return (
+        <Layout style={{ height: '100vh' }}>
+            <LayoutSidebar />
+            <Layout
+                style={{
+                    overflow: 'auto',
+                }}
+            >
+                <LayoutHeader />
+                <Content
+                    style={{
+                        margin: '0 25px',
+                        flex: '1 0 auto',
+                        padding: '8px 8px',
+                    }}
+                >
+                    {/* <div
             style={{
               padding: 24,
               minHeight: '100%',
@@ -35,12 +35,12 @@ const MainLayout = ({ children }) => {
               borderRadius: borderRadiusLG,
             }}
           > */}
-            {children}
-          {/* </div> */}
-        </Content>
-        {/* <LayoutFooter /> */}
-      </Layout>
-    </Layout>
-  );
+                    {children}
+                    {/* </div> */}
+                </Content>
+                {/* <LayoutFooter /> */}
+            </Layout>
+        </Layout>
+    );
 };
-export default MainLayout;
+export default MainLayout;