chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enforce shared Modal component (#100)

Browse Source 
* refactor: enforce shared Modal component in remaining custom modals

- ShareSessionModal: replaced custom modal markup with <Modal>
- CreateCategoryModal: replaced custom modal markup with <Modal>
- EditCategoryModal: replaced custom modal markup with <Modal>
- All now get focus trapping, Escape close, body scroll lock for free

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: adopt shared Button component in 18 modal components

Replace raw <button> elements with <Button> from ui/Button.tsx:
- Primary buttons (bg-gradient-brand) → <Button variant="primary">
- Secondary buttons (border-border) → <Button variant="secondary">
- Ghost buttons → <Button variant="ghost">
- Loading states use loading prop instead of manual Loader2 spinner

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: adopt shared Button component in 20 page/component files

Replace raw <button> elements with <Button> across pages and remaining
components. 38 total files now use the shared Button component consistently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #100.
This commit is contained in:
chihlasm
2026-03-08 00:25:50 -05:00
committed by GitHub
parent d365c38b61
commit 94b428d168
38 changed files with 705 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/pages/admin/UserDetailPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { StatusBadge } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
import { Spinner } from '@/components/common/Spinner'
@@ -205,12 +206,9 @@ export function UserDetailPage() {
title="User not found"
description="This user may have been removed or is unavailable."
action={(
<button
onClick={() => navigate('/admin/users')}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={() => navigate('/admin/users')}>
Back to Users
</button>
</Button>
)}
/>
)
@@ -525,18 +523,8 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setPlanModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleChangePlan}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Update Plan
</button>
<Button variant="secondary" onClick={() => setPlanModalOpen(false)}>Cancel</Button>
<Button onClick={handleChangePlan}>Update Plan</Button>
</div>
}
>
@@ -563,19 +551,10 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setResetModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleResetPassword}
disabled={resetLoading}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
<Button variant="secondary" onClick={() => setResetModalOpen(false)}>Cancel</Button>
<Button onClick={handleResetPassword} loading={resetLoading}>
{resetLoading ? 'Resetting...' : 'Reset Password'}
</button>
</Button>
</div>
}
>
@@ -624,12 +603,7 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end">
<button
onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Done
</button>
<Button onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}>Done</Button>
</div>
}
>
@@ -663,18 +637,10 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setTrialModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleExtendTrial}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
<Button variant="secondary" onClick={() => setTrialModalOpen(false)}>Cancel</Button>
<Button onClick={handleExtendTrial}>
{user.subscription?.status === 'trialing' ? 'Extend' : 'Start Trial'}
</button>
</Button>
</div>
}
>
@@ -700,23 +666,13 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setSuperAdminModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
<Button variant="secondary" onClick={() => setSuperAdminModalOpen(false)}>Cancel</Button>
<Button
onClick={handleToggleSuperAdmin}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium text-white',
user.is_super_admin
? 'bg-yellow-600 hover:bg-yellow-700'
: 'bg-gradient-brand shadow-lg shadow-primary/20 hover:opacity-90'
)}
className={user.is_super_admin ? 'bg-yellow-600 hover:bg-yellow-700 shadow-none' : ''}
>
{user.is_super_admin ? 'Remove Access' : 'Promote'}
</button>
</Button>
</div>
}
>
@@ -741,19 +697,11 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setHardDeleteModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<Button variant="secondary" onClick={() => setHardDeleteModalOpen(false)}>Cancel</Button>
{hardDeleteBlockers && Object.keys(hardDeleteBlockers).length === 0 && (
<button
onClick={handleHardDelete}
className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-foreground hover:bg-red-700"
>
<Button variant="destructive" onClick={handleHardDelete}>
Delete Permanently
</button>
</Button>
)}
</div>
}