update: enhance global card styling and sidebar menu appearance

src/layout/LayoutMenu.jsx

@@ -180,12 +180,18 @@ const LayoutMenu = () => {
 
     return (
         <Menu
-            theme="dark"
             mode="inline"
             items={items}
             defaultSelectedKeys={['home']}
             openKeys={stateOpenKeys}
             onOpenChange={onOpenChange}
+            style={{
+                background: 'transparent',
+                color: 'white',
+                border: 'none',
+            }}
+            theme="dark"
+            className="custom-orange-menu"
         />
     );
 };

src/layout/LayoutSidebar.jsx

@@ -6,7 +6,8 @@ import LayoutMenu from './LayoutMenu';
 const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
-        <Sider width={300}
+        <Sider
+            width={300}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {
@@ -15,6 +16,9 @@ const LayoutSidebar = () => {
             onCollapse={(collapsed, type) => {
                 // console.log(collapsed, type);
             }}
+            style={{
+                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+            }}
         >
             <LayoutLogo />
             <LayoutMenu />

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;