GLobal Styling part 1
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user