Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply commission setting model light mode

Browse Source
This commit is contained in:
Satyam Rastogi
2026-05-15 15:06:16 +05:30
parent d2be9b1abf
commit ff35b3076b
1 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/owner/CommissionSettingsModal.jsx
+47 -47
View File
@@ -38,7 +38,7 @@ const SectionHeader = ({ level, isOpen, onToggle }) => {
<Icon size={18} style={{ color: cfg.color }} /> <Icon size={18} style={{ color: cfg.color }} />
</div> </div>
<div className="text-left"> <div className="text-left">
<h3 className="text-sm font-bold text-white tracking-widest uppercase">{cfg.label}</h3> <h3 className="text-sm font-bold tracking-widest uppercase" style={{ color: cfg.color }}>{cfg.label}</h3>
<p className="text-[10px] text-zinc-500 mt-0.5"> <p className="text-[10px] text-zinc-500 mt-0.5">
{level === 'org' && 'Default commission for all jobs'} {level === 'org' && 'Default commission for all jobs'}
{level === 'role' && 'Per-role commission overrides'} {level === 'role' && 'Per-role commission overrides'}
@@ -49,7 +49,7 @@ const SectionHeader = ({ level, isOpen, onToggle }) => {
</div> </div>
<ChevronDown <ChevronDown
size={16} size={16}
className="text-zinc-400 transition-transform duration-200" className="text-zinc-500 dark:text-zinc-400 transition-transform duration-200"
style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
/> />
</button> </button>
@@ -63,7 +63,7 @@ const CommissionForm = ({ type, rate, onTypeChange, onRateChange, accentColor =
<select <select
value={type} value={type}
onChange={e => onTypeChange(e.target.value)} onChange={e => onTypeChange(e.target.value)}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white outline-none transition-all" className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white outline-none transition-all"
style={{ '--tw-ring-color': accentColor }} style={{ '--tw-ring-color': accentColor }}
> >
{COMMISSION_TYPES.map(ct => ( {COMMISSION_TYPES.map(ct => (
@@ -86,7 +86,7 @@ const CommissionForm = ({ type, rate, onTypeChange, onRateChange, accentColor =
value={rate} value={rate}
onChange={e => onRateChange(e.target.value)} onChange={e => onRateChange(e.target.value)}
placeholder={type === 'percent_gross' || type === 'percent_net' ? 'e.g. 10' : 'e.g. 5000'} placeholder={type === 'percent_gross' || type === 'percent_net' ? 'e.g. 10' : 'e.g. 5000'}
className="w-full bg-[#18181b] border border-white/10 rounded-xl pl-8 pr-4 py-2.5 text-sm text-white placeholder-zinc-600 outline-none transition-all" className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl pl-8 pr-4 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 outline-none transition-all"
/> />
</div> </div>
</div> </div>
@@ -181,26 +181,26 @@ const CommissionSettingsModal = ({
return createPortal( return createPortal(
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true"> <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} /> <div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onClose} />
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95, y: 10 }} initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }} animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95 }} exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="relative w-full max-w-2xl max-h-[90vh] bg-[#121214] rounded-2xl shadow-[0_0_60px_rgba(0,0,0,0.9)] border border-white/10 overflow-hidden flex flex-col" className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-[#121214] rounded-2xl shadow-2xl shadow-zinc-900/20 dark:shadow-[0_0_60px_rgba(0,0,0,0.9)] border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col"
> >
{/* Header */} {/* Header */}
<div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/[0.03] shrink-0"> <div className="px-6 py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50 dark:bg-white/[0.03] shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-amber-500/10"> <div className="p-2 rounded-xl bg-amber-500/10">
<DollarSign size={20} className="text-[#fda913]" /> <DollarSign size={20} className="text-[#fda913]" />
</div> </div>
<div> <div>
<h2 className="text-lg font-bold text-white tracking-widest uppercase">Commission Settings</h2> <h2 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Commission Settings</h2>
<p className="text-[10px] text-zinc-500 mt-0.5">Configure commission hierarchy: Job &rarr; User &rarr; Role &rarr; Org</p> <p className="text-[10px] text-zinc-500 mt-0.5">Configure commission hierarchy: Job &rarr; User &rarr; Role &rarr; Org</p>
</div> </div>
</div> </div>
<button onClick={onClose} className="p-2 rounded-lg hover:bg-white/10 text-zinc-500 hover:text-white transition-colors"> <button onClick={onClose} className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
<X size={18} /> <X size={18} />
</button> </button>
</div> </div>
@@ -214,7 +214,7 @@ const CommissionSettingsModal = ({
const isActive = activeSource === level; const isActive = activeSource === level;
return ( return (
<React.Fragment key={level}> <React.Fragment key={level}>
{i > 0 && <ArrowRight size={12} className="text-zinc-600 mx-1" />} {i > 0 && <ArrowRight size={12} className="text-zinc-400 dark:text-zinc-600 mx-1" />}
<div <div
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border transition-all ${
isActive isActive
@@ -237,7 +237,7 @@ const CommissionSettingsModal = ({
); );
})} })}
</div> </div>
<p className="text-center text-[10px] text-zinc-600 mt-2"> <p className="text-center text-[10px] text-zinc-500 dark:text-zinc-600 mt-2">
Currently using: <span className="font-bold" style={{ color: LEVEL_CONFIG[activeSource]?.color || '#fda913' }}> Currently using: <span className="font-bold" style={{ color: LEVEL_CONFIG[activeSource]?.color || '#fda913' }}>
{LEVEL_CONFIG[activeSource]?.label || 'Org Default'} {LEVEL_CONFIG[activeSource]?.label || 'Org Default'}
</span> </span>
@@ -269,16 +269,16 @@ const CommissionSettingsModal = ({
accentColor="#00f0ff" accentColor="#00f0ff"
/> />
) : ( ) : (
<div className="flex items-center gap-2 px-4 py-3 bg-white/[0.03] rounded-xl border border-white/5"> <div className="flex items-center gap-2 px-4 py-3 bg-zinc-50 dark:bg-white/[0.03] rounded-xl border border-zinc-200 dark:border-white/5">
<Shield size={14} className="text-zinc-500" /> <Shield size={14} className="text-zinc-500" />
<span className="text-xs text-zinc-400"> <span className="text-xs text-zinc-600 dark:text-zinc-400">
{COMMISSION_TYPES.find(c => c.value === orgDefaults.type)?.label} — { {COMMISSION_TYPES.find(c => c.value === orgDefaults.type)?.label} — {
orgDefaults.type === 'percent_gross' || orgDefaults.type === 'percent_net' orgDefaults.type === 'percent_gross' || orgDefaults.type === 'percent_net'
? `${orgDefaults.rate}%` ? `${orgDefaults.rate}%`
: formatCurrency(orgDefaults.rate) : formatCurrency(orgDefaults.rate)
} }
</span> </span>
<span className="text-[10px] text-zinc-600 ml-auto">(Admin only)</span> <span className="text-[10px] text-zinc-400 dark:text-zinc-600 ml-auto">(Admin only)</span>
</div> </div>
)} )}
</div> </div>
@@ -301,7 +301,7 @@ const CommissionSettingsModal = ({
> >
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(16,185,129,0.2)' }}> <div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(16,185,129,0.2)' }}>
{roleOverrides.length === 0 ? ( {roleOverrides.length === 0 ? (
<p className="text-xs text-zinc-600 italic px-2">No role overrides configured.</p> <p className="text-xs text-zinc-400 dark:text-zinc-600 italic px-2">No role overrides configured.</p>
) : ( ) : (
roleOverrides.map(ov => { roleOverrides.map(ov => {
const role = orgRoles.find(r => r.key === ov.roleKey); const role = orgRoles.find(r => r.key === ov.roleKey);
@@ -314,24 +314,24 @@ const CommissionSettingsModal = ({
className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-all ${ className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-all ${
isApplicable isApplicable
? 'bg-emerald-500/10 border-emerald-500/30' ? 'bg-emerald-500/10 border-emerald-500/30'
: 'bg-white/[0.03] border-white/5 opacity-60' : 'bg-zinc-50 dark:bg-white/[0.03] border-zinc-200 dark:border-white/5 opacity-60'
}`} }`}
> >
<div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: role?.color || '#10b981' }} /> <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: role?.color || '#10b981' }} />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<span className="text-sm font-bold text-white">{role?.name || ov.roleKey}</span> <span className="text-sm font-bold text-zinc-900 dark:text-white">{role?.name || ov.roleKey}</span>
<span className="text-xs text-zinc-500 ml-2"> <span className="text-xs text-zinc-500 ml-2">
{typeLabel} — {rateDisplay} {typeLabel} — {rateDisplay}
</span> </span>
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-2 shrink-0">
{ov.enabled ? ( {ov.enabled ? (
<span className="text-[10px] font-bold text-emerald-400 uppercase">Active</span> <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase">Active</span>
) : ( ) : (
<span className="text-[10px] font-bold text-zinc-600 uppercase">Disabled</span> <span className="text-[10px] font-bold text-zinc-400 dark:text-zinc-600 uppercase">Disabled</span>
)} )}
{isApplicable && ( {isApplicable && (
<span className="text-[10px] font-bold text-emerald-400 bg-emerald-500/20 px-1.5 py-0.5 rounded-full">Applies</span> <span className="text-[10px] font-bold text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 px-1.5 py-0.5 rounded-full">Applies</span>
)} )}
</div> </div>
</div> </div>
@@ -339,8 +339,8 @@ const CommissionSettingsModal = ({
}) })
)} )}
<div className="flex items-start gap-2 px-2 pt-1"> <div className="flex items-start gap-2 px-2 pt-1">
<Info size={12} className="text-zinc-600 mt-0.5 shrink-0" /> <Info size={12} className="text-zinc-400 dark:text-zinc-600 mt-0.5 shrink-0" />
<p className="text-[10px] text-zinc-600">Role overrides are managed in <span className="font-bold text-zinc-400">Org Settings → Commission Rules</span>.</p> <p className="text-[10px] text-zinc-500 dark:text-zinc-600">Role overrides are managed in <span className="font-bold text-zinc-700 dark:text-zinc-400">Org Settings → Commission Rules</span>.</p>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -362,23 +362,23 @@ const CommissionSettingsModal = ({
> >
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(168,85,247,0.2)' }}> <div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(168,85,247,0.2)' }}>
{!isAdmin ? ( {!isAdmin ? (
<div className="flex items-center gap-2 px-4 py-3 bg-white/[0.03] rounded-xl border border-white/5"> <div className="flex items-center gap-2 px-4 py-3 bg-zinc-50 dark:bg-white/[0.03] rounded-xl border border-zinc-200 dark:border-white/5">
<Shield size={14} className="text-zinc-500" /> <Shield size={14} className="text-zinc-500" />
<span className="text-xs text-zinc-400">{localUserOverrides.length} user override(s) configured</span> <span className="text-xs text-zinc-600 dark:text-zinc-400">{localUserOverrides.length} user override(s) configured</span>
<span className="text-[10px] text-zinc-600 ml-auto">(Admin only)</span> <span className="text-[10px] text-zinc-400 dark:text-zinc-600 ml-auto">(Admin only)</span>
</div> </div>
) : ( ) : (
<> <>
{localUserOverrides.length === 0 && !addingUser && ( {localUserOverrides.length === 0 && !addingUser && (
<p className="text-xs text-zinc-600 italic px-2">No user overrides configured.</p> <p className="text-xs text-zinc-400 dark:text-zinc-600 italic px-2">No user overrides configured.</p>
)} )}
{localUserOverrides.map((ov, idx) => ( {localUserOverrides.map((ov, idx) => (
<div key={ov.userId} className="bg-white/[0.03] border border-white/5 rounded-xl p-4 space-y-3"> <div key={ov.userId} className="bg-zinc-50 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/5 rounded-xl p-4 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<User size={14} className="text-purple-400" /> <User size={14} className="text-purple-500 dark:text-purple-400" />
<span className="text-sm font-bold text-white">{ov.userName}</span> <span className="text-sm font-bold text-zinc-900 dark:text-white">{ov.userName}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
@@ -388,18 +388,18 @@ const CommissionSettingsModal = ({
prev.map((o, i) => i === idx ? { ...o, enabled: !o.enabled } : o) prev.map((o, i) => i === idx ? { ...o, enabled: !o.enabled } : o)
); );
}} }}
className="p-1 rounded-lg hover:bg-white/10 transition-colors" className="p-1 rounded-lg hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
title={ov.enabled ? 'Disable override' : 'Enable override'} title={ov.enabled ? 'Disable override' : 'Enable override'}
> >
{ov.enabled {ov.enabled
? <ToggleRight size={20} className="text-purple-400" /> ? <ToggleRight size={20} className="text-purple-500 dark:text-purple-400" />
: <ToggleLeft size={20} className="text-zinc-600" /> : <ToggleLeft size={20} className="text-zinc-400 dark:text-zinc-600" />
} }
</button> </button>
<button <button
type="button" type="button"
onClick={() => setLocalUserOverrides(prev => prev.filter((_, i) => i !== idx))} onClick={() => setLocalUserOverrides(prev => prev.filter((_, i) => i !== idx))}
className="p-1 rounded-lg hover:bg-red-500/10 text-zinc-600 hover:text-red-400 transition-colors" className="p-1 rounded-lg hover:bg-red-500/10 text-zinc-400 dark:text-zinc-600 hover:text-red-500 dark:hover:text-red-400 transition-colors"
> >
<Trash2 size={14} /> <Trash2 size={14} />
</button> </button>
@@ -419,7 +419,7 @@ const CommissionSettingsModal = ({
/> />
)} )}
{!ov.enabled && ( {!ov.enabled && (
<p className="text-[10px] text-zinc-600 italic">Override disabled — org default applies</p> <p className="text-[10px] text-zinc-400 dark:text-zinc-600 italic">Override disabled — org default applies</p>
)} )}
</div> </div>
))} ))}
@@ -432,7 +432,7 @@ const CommissionSettingsModal = ({
<select <select
value={newUserOverride.userId} value={newUserOverride.userId}
onChange={e => setNewUserOverride(prev => ({ ...prev, userId: e.target.value }))} onChange={e => setNewUserOverride(prev => ({ ...prev, userId: e.target.value }))}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white outline-none" className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white outline-none"
> >
<option value="">— Select —</option> <option value="">— Select —</option>
{availablePersonnel.map(p => ( {availablePersonnel.map(p => (
@@ -451,7 +451,7 @@ const CommissionSettingsModal = ({
<button <button
type="button" type="button"
onClick={() => setAddingUser(false)} onClick={() => setAddingUser(false)}
className="flex-1 px-4 py-2 rounded-xl border border-white/10 text-zinc-400 text-xs font-semibold hover:bg-white/5 transition-colors" className="flex-1 px-4 py-2 rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 text-xs font-semibold hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
> >
Cancel Cancel
</button> </button>
@@ -459,7 +459,7 @@ const CommissionSettingsModal = ({
type="button" type="button"
onClick={handleAddUserOverride} onClick={handleAddUserOverride}
disabled={!newUserOverride.userId} disabled={!newUserOverride.userId}
className="flex-1 px-4 py-2 rounded-xl bg-purple-500/20 text-purple-300 border border-purple-500/30 text-xs font-bold hover:bg-purple-500/30 disabled:opacity-30 disabled:cursor-not-allowed transition-colors" className="flex-1 px-4 py-2 rounded-xl bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30 text-xs font-bold hover:bg-purple-500/30 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
> >
Add Override Add Override
</button> </button>
@@ -469,7 +469,7 @@ const CommissionSettingsModal = ({
<button <button
type="button" type="button"
onClick={() => setAddingUser(true)} onClick={() => setAddingUser(true)}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-dashed border-purple-500/30 text-purple-400 text-xs font-bold hover:bg-purple-500/5 transition-colors" className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-dashed border-purple-500/30 text-purple-600 dark:text-purple-400 text-xs font-bold hover:bg-purple-500/5 transition-colors"
> >
<Plus size={14} /> Add User Override <Plus size={14} /> Add User Override
</button> </button>
@@ -496,15 +496,15 @@ const CommissionSettingsModal = ({
> >
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(253,169,19,0.2)' }}> <div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(253,169,19,0.2)' }}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs text-zinc-400">Enable job-level override</span> <span className="text-xs text-zinc-600 dark:text-zinc-400">Enable job-level override</span>
<button <button
type="button" type="button"
onClick={() => setLocalJobOverride(prev => ({ ...prev, enabled: !prev.enabled }))} onClick={() => setLocalJobOverride(prev => ({ ...prev, enabled: !prev.enabled }))}
className="p-1 rounded-lg hover:bg-white/10 transition-colors" className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors"
> >
{localJobOverride.enabled {localJobOverride.enabled
? <ToggleRight size={24} className="text-[#fda913]" /> ? <ToggleRight size={24} className="text-[#fda913]" />
: <ToggleLeft size={24} className="text-zinc-600" /> : <ToggleLeft size={24} className="text-zinc-400 dark:text-zinc-600" />
} }
</button> </button>
</div> </div>
@@ -517,7 +517,7 @@ const CommissionSettingsModal = ({
accentColor="#fda913" accentColor="#fda913"
/> />
) : ( ) : (
<p className="text-[10px] text-zinc-600 italic px-2"> <p className="text-[10px] text-zinc-400 dark:text-zinc-600 italic px-2">
No job override — falls back to {activeSource === 'user' ? 'user override' : 'org default'} No job override — falls back to {activeSource === 'user' ? 'user override' : 'org default'}
</p> </p>
)} )}
@@ -528,11 +528,11 @@ const CommissionSettingsModal = ({
</div> </div>
{/* Hierarchy Info */} {/* Hierarchy Info */}
<div className="mt-2 p-4 bg-white/[0.02] rounded-xl border border-white/5"> <div className="mt-2 p-4 bg-zinc-50 dark:bg-white/[0.02] rounded-xl border border-zinc-200 dark:border-white/5">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<Info size={14} className="text-zinc-600 mt-0.5 shrink-0" /> <Info size={14} className="text-zinc-400 dark:text-zinc-600 mt-0.5 shrink-0" />
<div className="text-[11px] text-zinc-500 space-y-1"> <div className="text-[11px] text-zinc-500 space-y-1">
<p><span className="font-bold text-zinc-400">Override Priority:</span> Job Override &rarr; User Override &rarr; Role Override &rarr; Org Default</p> <p><span className="font-bold text-zinc-700 dark:text-zinc-400">Override Priority:</span> Job Override &rarr; User Override &rarr; Role Override &rarr; Org Default</p>
<p>The most specific level always takes precedence. If a job override is set it will be used regardless of user, role, or org settings.</p> <p>The most specific level always takes precedence. If a job override is set it will be used regardless of user, role, or org settings.</p>
</div> </div>
</div> </div>
@@ -540,11 +540,11 @@ const CommissionSettingsModal = ({
</div> </div>
{/* Footer */} {/* Footer */}
<div className="px-6 py-4 border-t border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0"> <div className="px-6 py-4 border-t border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50 dark:bg-white/[0.02] shrink-0">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="px-5 py-2.5 rounded-xl border border-white/10 text-zinc-400 text-sm font-semibold hover:bg-white/5 transition-colors" className="px-5 py-2.5 rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 text-sm font-semibold hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
> >
Cancel Cancel
</button> </button>