From 4d1d8c93a2efc67a3ec7cab2f22b569d0ddf3208 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Sat, 12 Apr 2025 23:34:36 +0000
Subject: [PATCH] cursor rules, sidebar change

---
 .cursorrules                               | 18 +++++++++
 frontend/src/components/AsideMenuItem.tsx  | 11 ++----
 frontend/src/components/AsideMenuLayer.tsx |  4 +-
 frontend/src/css/_app.css                  | 32 ++++++++++++++++
 frontend/src/css/_theme.css                | 43 +++++++++++++++++++---
 5 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/.cursorrules b/.cursorrules
index 0bd5ff5..7ecee4e 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -137,3 +137,21 @@
    • Validate input data and sanitize requests where necessary.
    • Restrict sensitive operations to authenticated users with proper role-based permissions.
 
+
+────────────────────────────────────────
+Group 6 – Accessibility, UI, and Styling Guidelines (Updated)
+────────────────────────────────────────
+1. Sidebar Styling:
+   • The sidebar is implemented in the authenticated layout via the AsideMenu component, with the actual element defined in AsideMenuLayer (located at frontend/src/components/AsideMenuLayer.tsx) as an <aside> element with id="asideMenu".
+   • When modifying sidebar styles, target #asideMenu and its child elements rather than generic selectors (e.g., avoid .app-sidebar) to ensure that the changes affect the actual rendered sidebar.
+   • Remove or override any conflicting background utilities (such as an unwanted bg-white) so our desired background color (#F8F4E1) is fully visible. Use a highly specific selector if necessary, e.g.,
+       #asideMenu {
+           background-color: #F8F4E1 !important;
+       }
+   • Adjust spacing (padding/margins) at both the container (#asideMenu) and the individual menu item level to maintain a consistent, compact design.
+
+2. General Project Styling and Tailwind CSS Usage:
+   • The application leverages Tailwind CSS extensively, with core styling defined in _theme.css using the @apply directive. Any new modifications should follow this pattern to ensure consistency.
+   • The themed blocks (like .theme-pink and .theme-green) standardize the UI’s appearance. When applying custom overrides, ensure they integrate cleanly into these structures and avoid conflicts or circular dependency errors (e.g., issues when redefining utilities such as text-blue-600).
+   • Adjustments via Tailwind CSS generally require modifying class names in the components and ensuring that global overrides are applied in the correct order. Consistent use of design tokens and custom color codes (e.g., #F8F4E1) throughout the app is crucial to a cohesive design.
+   • Specificity is key. If a change isn’t visually reflected as expected, inspect the rendered HTML to identify which classes are taking precedence.
diff --git a/frontend/src/components/AsideMenuItem.tsx b/frontend/src/components/AsideMenuItem.tsx
index c5a8b8a..9cdddee 100644
--- a/frontend/src/components/AsideMenuItem.tsx
+++ b/frontend/src/components/AsideMenuItem.tsx
@@ -76,16 +76,13 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
   const componentClass = [
     'flex cursor-pointer py-1.5 ',
     isDropdownList ? 'px-6 text-sm' : '',
-    item.color
-      ? getButtonColor(item.color, false, true)
-      : `${asideMenuItemStyle}`,
-    isLinkActive
-      ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800`
-      : '',
+    item.color ? getButtonColor(item.color, false, true) : `${asideMenuItemStyle}`,
+    isLinkActive ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800` : '',
+    'hover:text-blue-600'
   ].join(' ');
 
   return (
-    <li className={'px-3 py-1.5'}>
+    <li className={'px-1 py-1'}>
       {item.withDevider && <hr className={`${borders} mb-3`} />}
       {item.href && (
         <Link href={item.href} target={item.target} className={componentClass}>
diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx
index 90b2be5..b095e90 100644
--- a/frontend/src/components/AsideMenuLayer.tsx
+++ b/frontend/src/components/AsideMenuLayer.tsx
@@ -65,10 +65,10 @@ export default function AsideMenuLayer({
   return (
     <aside
       id='asideMenu'
-      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
+      className={`${className} bg-[#F8F4E1] p-1 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
     >
       <div
-        className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}
+        className="flex-1 flex flex-col overflow-hidden dark:bg-dark-900 bg-transparent"
       >
         <div
           className={`flex flex-row h-14 items-center justify-between ${asideBrandStyle}`}
diff --git a/frontend/src/css/_app.css b/frontend/src/css/_app.css
index 4179b23..e169d4a 100644
--- a/frontend/src/css/_app.css
+++ b/frontend/src/css/_app.css
@@ -32,3 +32,35 @@ li.stack-item:not(:last-child):after {
 .app-sidebar-brand {
   box-shadow: 0px -1px 40px rgba(112, 144, 176, 0.2);
 }
+
+
+
+/* Ultra high specificity sidebar override */
+html body #app .app-sidebar {
+  background-color: #F8F4E1 !important;
+  padding: 0.125rem !important;
+  margin: 0.125rem !important;
+}
+html body #app .app-sidebar .menu-item-link:hover {
+  color: blue !important;
+}
+/* Ultra ultra high specificity sidebar override */
+html body #app [class*='app-sidebar'] {
+  background-color: #F8F4E1 !important;
+  padding: 0.125rem !important;
+  margin: 0.125rem !important;
+}
+html body #app [class*='app-sidebar'] .menu-item-link:hover {
+  color: blue !important;
+}
+/* Final ultra override for sidebar styling */
+html body #app .app-sidebar {
+  background: #F8F4E1 !important;
+  padding: 2px !important;
+  margin: 2px !important;
+}
+html body #app .app-sidebar a.menu-item-link:hover {
+  color: blue !important;
+}
+
+
diff --git a/frontend/src/css/_theme.css b/frontend/src/css/_theme.css
index 765b8d3..8d5331f 100644
--- a/frontend/src/css/_theme.css
+++ b/frontend/src/css/_theme.css
@@ -1,6 +1,6 @@
 .theme-pink {
   .app-sidebar {
-    @apply bg-pavitra-900 text-white;
+    @apply bg-[#F8F4E1] text-white p-0.5 m-0.5;
 
     .menu-title,
     .menu-item-icon,
@@ -43,7 +43,7 @@
 
 .theme-green {
   .app-sidebar {
-    @apply bg-pavitra-800 text-white;
+    @apply bg-[#F8F4E1] text-white p-0.5 m-0.5;
 
     .menu-title,
     .menu-item-icon,
@@ -68,9 +68,6 @@
     @apply bg-pavitra-700;
   }
 
-  .text-blue-600 {
-    @apply text-pavitra-900;
-  }
 
   .checkbox input[type='checkbox']:checked + .check,
   .radio input[type='radio']:checked + .check {
@@ -97,9 +94,45 @@
 
   .hover\:text-blue-600:hover {
     @apply text-pavitra-800;
+
+/* Sidebar custom overrides */
+#asideMenu {
+  @apply bg-[#F8F4E1] !important;
+}
+#asideMenu li {
+  @apply p-0.5 m-0.5 !important;
+}
+#asideMenu a:hover {
+  @apply text-blue-600 !important;
+}
+
   }
 
   .active\:text-blue-700:active {
     @apply text-pavitra-800;
   }
 }
+
+.app-sidebar .menu-item-link:hover {
+  @apply text-blue-600;
+}
+
+/* Override sidebar styles as per user request */
+.app-sidebar {
+  background-color: #F8F4E1 !important;
+  padding: 0.5rem !important;
+  margin: 0.5rem !important;
+}
+.app-sidebar .menu-item-link:hover {
+  color: blue !important;
+}
+/* Additional override for sidebar styles with theme specificity */
+.theme-pink .app-sidebar, .theme-green .app-sidebar {
+  background-color: #F8F4E1 !important;
+  padding: 0.5rem !important;
+  margin: 0.5rem !important;
+}
+.theme-pink .app-sidebar .menu-item-link:hover,
+.theme-green .app-sidebar .menu-item-link:hover {
+  color: blue !important;
+}