GLobal Styling part 1

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 14:54:27 +00:00
parent 0e57c50e56
commit e96069775c
60 changed files with 812 additions and 1712 deletions

View File

@@ -6,9 +6,9 @@
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import {
Save, Loader2, Settings, User, Users, UserPlus, Shield, Lock, X
} from 'lucide-react';
import {
SaveIcon, Loader2Icon, SettingsIcon, UserIcon, UsersIcon, UserIcon as UserPlusIcon, LockIcon, LockIcon as ShieldIcon, XIcon
} from '../../icons';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Badge from '../../components/ui/badge/Badge';
@@ -259,9 +259,9 @@ export default function AccountSettingsPage() {
};
const tabs = [
{ id: 'account' as TabType, label: 'Account', icon: <Settings className="w-4 h-4" /> },
{ id: 'profile' as TabType, label: 'Profile', icon: <User className="w-4 h-4" /> },
{ id: 'team' as TabType, label: 'Team', icon: <Users className="w-4 h-4" /> },
{ id: 'account' as TabType, label: 'Account', icon: <SettingsIcon className="w-4 h-4" /> },
{ id: 'profile' as TabType, label: 'Profile', icon: <UserIcon className="w-4 h-4" /> },
{ id: 'team' as TabType, label: 'Team', icon: <UsersIcon className="w-4 h-4" /> },
];
if (loading) {
@@ -270,12 +270,12 @@ export default function AccountSettingsPage() {
<PageMeta title="Account Settings" description="Manage your account, profile, and team" />
<PageHeader
title="Account Settings"
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <SettingsIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
</div>
</div>
@@ -297,7 +297,7 @@ export default function AccountSettingsPage() {
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <SettingsIcon className="w-4 h-4" />, color: 'blue' }}
parent="Account Settings"
/>
<div className="p-6">
@@ -468,7 +468,7 @@ export default function AccountSettingsPage() {
variant="primary"
tone="brand"
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Changes'}
</Button>
@@ -608,7 +608,7 @@ export default function AccountSettingsPage() {
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
<Lock className="w-5 h-5" />
<LockIcon className="w-5 h-5" />
Security
</h2>
<Button
@@ -627,7 +627,7 @@ export default function AccountSettingsPage() {
variant="primary"
tone="brand"
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Profile'}
</Button>
@@ -658,7 +658,7 @@ export default function AccountSettingsPage() {
{teamLoading ? (
<div className="flex items-center justify-center h-32">
<Loader2 className="w-6 h-6 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-6 h-6 animate-spin text-[var(--color-brand-500)]" />
</div>
) : (
<Card className="overflow-hidden">
@@ -714,7 +714,7 @@ export default function AccountSettingsPage() {
{members.length === 0 && (
<tr>
<td colSpan={6} className="py-12 text-center text-gray-500 dark:text-gray-400">
<Users className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
<UsersIcon className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
No team members yet. Invite your first team member!
</td>
</tr>
@@ -728,7 +728,7 @@ export default function AccountSettingsPage() {
{/* Role Permissions Info */}
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
<Shield className="w-5 h-5" />
<ShieldIcon className="w-5 h-5" />
Role Permissions
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -841,14 +841,14 @@ export default function AccountSettingsPage() {
<Card className="relative z-10 w-full max-w-md p-6 m-4">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Lock className="w-5 h-5" />
<LockIcon className="w-5 h-5" />
Change Password
</h2>
<button
onClick={() => setShowPasswordModal(false)}
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<X className="w-5 h-5" />
<XIcon className="w-5 h-5" />
</button>
</div>