From 9806593319cf05c5a053f642c91bfdaf2d6a2f29 Mon Sep 17 00:00:00 2001
From: vinix <nzxtvinix@gmail.com>
Date: Wed, 8 Oct 2025 14:38:00 +0700
Subject: [PATCH] update: enhance global card styling and sidebar menu
 appearance

---
 src/App.css                  |  6 ++++
 src/index.css                | 34 ++++++++++++++++++++++
 src/layout/LayoutMenu.jsx    |  8 +++++-
 src/layout/LayoutSidebar.jsx |  6 +++-
 src/layout/MainLayout.jsx    | 56 ++++++++++++++++++------------------
 src/main.jsx                 |  1 +
 6 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/src/App.css b/src/App.css
index e69de29..464d0c1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,6 @@
+/* Global Card Styling */
+.ant-card {
+    border-radius: 12px !important;
+    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.07) !important;
+    margin-bottom: 24px !important;
+}
diff --git a/src/index.css b/src/index.css
index 30d122f..875f836 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,4 +18,38 @@
 html body {
   margin: 0;
   height: 100vh;
+}
+
+/* Custom Orange Sidebar Menu Styles */
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
+  border-right-color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+  color: white !important;
 }
\ No newline at end of file
diff --git a/src/layout/LayoutMenu.jsx b/src/layout/LayoutMenu.jsx
index 1c7caeb..f813883 100644
--- a/src/layout/LayoutMenu.jsx
+++ b/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"
         />
     );
 };
diff --git a/src/layout/LayoutSidebar.jsx b/src/layout/LayoutSidebar.jsx
index 4589344..8f4eddb 100644
--- a/src/layout/LayoutSidebar.jsx
+++ b/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 />
diff --git a/src/layout/MainLayout.jsx b/src/layout/MainLayout.jsx
index 6d035f9..cc9a9ee 100644
--- a/src/layout/MainLayout.jsx
+++ b/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;
\ No newline at end of file
+export default MainLayout;
diff --git a/src/main.jsx b/src/main.jsx
index a76e718..d5321c1 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import './App.css'
 import { BreadcrumbProvider } from './layout/LayoutBreadcrumb.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(