cursor rules, sidebar change
This commit is contained in:
Flatlogic Bot
parent
4169ee4ea5
commit
4d1d8c93a2
18
.cursorrules
18
.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.
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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}`}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user