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">

5
src/components/ChangePasswordDialog.js
View File

@@ -127,16 +127,15 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
<DialogFooter className="mt-6">
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
className="rounded-full px-6"
className="btn-outline mr-33"
>
Cancel
</Button>
<Button
type="submit"
disabled={loading}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 disabled:opacity-50"
className=" btn-primary"
>
{loading ? 'Changing...' : 'Change Password'}
</Button>

31
src/components/ui/badge.jsx
View File

@@ -1,7 +1,7 @@
import * as React from "react"
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -15,20 +15,31 @@ const badgeVariants = cva(
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
green:
"border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]",
orange:
"border-transparent bg-orange-500 text-white hover:bg-orange-500/80",
orange2:
"border-transparent bg-orange-100 text-orange-700 hover:bg-orange-100/80",
pink: "border-transparent bg-[var(--pink-500)] text-white hover:bg-[var(--pink-500)]/80",
red: "border-transparent bg-red-100 text-red-700 hover:bg-red-100/80",
red2: "border-transparent bg-red-500 text-white hover:bg-red-500/80",
gray: "border-transparent bg-gray-200 text-gray-700 hover:bg-gray-200/80",
gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
gray3:
"border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
},
},
defaultVariants: {
variant: "default",
},
}
)
);
function Badge({
className,
variant,
...props
}) {
return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
function Badge({ className, variant, ...props }) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
);
}
export { Badge, badgeVariants }
export { Badge, badgeVariants };