refactor: enforce shared Modal component (#100)
* 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
@@ -6,6 +6,7 @@ import type { Account, AccountMember, AccountInvite } from '@/types'
|
||||
import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
|
||||
import { LeaveAccountModal } from '@/components/account/LeaveAccountModal'
|
||||
import { DeleteAccountModal } from '@/components/account/DeleteAccountModal'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Spinner } from '@/components/common/Spinner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
@@ -200,29 +201,23 @@ export function AccountSettingsPage() {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
onClick={handleSaveName}
|
||||
disabled={isSavingName}
|
||||
className={cn(
|
||||
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 p-2',
|
||||
'hover:opacity-90 disabled:opacity-50'
|
||||
)}
|
||||
loading={isSavingName}
|
||||
size="icon-sm"
|
||||
>
|
||||
{isSavingName ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Check className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
<Check className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
setEditedName(account?.name ?? '')
|
||||
setIsEditingName(false)
|
||||
}}
|
||||
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
@@ -429,23 +424,13 @@ export function AccountSettingsPage() {
|
||||
<option value="engineer">Engineer</option>
|
||||
<option value="viewer">Viewer</option>
|
||||
</select>
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isInviting || !inviteEmail.trim()}
|
||||
className={cn(
|
||||
'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 disabled:cursor-not-allowed'
|
||||
)}
|
||||
disabled={!inviteEmail.trim()}
|
||||
loading={isInviting}
|
||||
>
|
||||
{isInviting ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Sending...
|
||||
</span>
|
||||
) : (
|
||||
'Send Invite'
|
||||
)}
|
||||
</button>
|
||||
{isInviting ? 'Sending...' : 'Send Invite'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{inviteError && (
|
||||
@@ -633,30 +618,27 @@ export function AccountSettingsPage() {
|
||||
<p className="text-sm font-medium text-foreground">Transfer Ownership</p>
|
||||
<p className="text-xs text-muted-foreground">Make another member the account owner</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setShowTransferModal(true)}
|
||||
className={cn(
|
||||
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
|
||||
'border border-amber-500/30 text-amber-400 hover:bg-amber-500/10'
|
||||
)}
|
||||
className="border-amber-500/30 text-amber-400 hover:bg-amber-500/10"
|
||||
>
|
||||
Transfer
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-t border-border pt-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Delete Account</p>
|
||||
<p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
className={cn(
|
||||
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
|
||||
'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
|
||||
)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -665,15 +647,13 @@ export function AccountSettingsPage() {
|
||||
<p className="text-sm font-medium text-foreground">Leave Account</p>
|
||||
<p className="text-xs text-muted-foreground">Leave this account and create a personal one</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowLeaveModal(true)}
|
||||
className={cn(
|
||||
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
|
||||
'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
|
||||
)}
|
||||
>
|
||||
Leave
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user