andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure styles and components for improved theming and consistency

Browse Source
This commit is contained in:
kayela
2026-01-13 22:01:49 -06:00
parent e04d39fe17
commit 21a269998d
13 changed files with 209 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AdminSidebar.js
View File

@@ -283,7 +283,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
/>
{isOpen && (
<div className="flex-1 min-w-0">
<h2 className="text-xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-xl font-semibold text-primary dark:text-brand-light-lavender " style={{ fontFamily: "'Inter', sans-serif" }}>
Admin
</h2>
<p className="text-xs text-muted-foreground group-hover:text-accent transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -384,7 +384,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{user.first_name?.[0]}{user.last_name?.[0]}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-primary truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-sm font-medium text-primary dark:text-brand-light-lavender truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
{user.first_name} {user.last_name}
</p>
<p className="text-xs text-muted-foreground capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -392,7 +392,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</p>
</div>
</div>
<Link to='/profile'><Settings size={16} />
<Link className='dark:text-brand-lavender ' to='/profile'><Settings size={16} />
</Link>
</div>
)}
@@ -406,16 +406,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
className={`
flex items-center gap-3 px-4 py-3 rounded-lg w-full
text-primary hover:bg-muted/20 transition-colors
text-primary dark:text-brand-lavender hover:bg-muted/20 transition-colors
${!isOpen && 'justify-center'}
`}
>
{isDark ? (
<Sun className="h-5 w-5 flex-shrink-0" />
<Sun className="h-5 w-5 flex-shrink-0 " />
) : (
<Moon className="h-5 w-5 flex-shrink-0" />
)}
{isOpen && <span>{isDark ? 'Light mode' : 'Dark mode'}</span>}
{isOpen && <span >{isDark ? 'Light mode' : 'Dark mode'}</span>}
</button>
{!isOpen && (
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
@@ -429,7 +429,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{isOpen ? (
<div className="px-4 py-3 bg-[var(--lavender-500)] rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-primary">Storage Usage</span>
<span className="text-sm font-medium text-primary dark:text-brand-light-lavender ">Storage Usage</span>
<span className="text-xs text-muted-foreground">{storagePercentage}%</span>
</div>
<div className="w-full bg-[var(--neutral-800)] rounded-full h-2">