devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix(web): standardize modal button layout across all dialog modals

Browse Source 
Apply symmetrical full-width button pattern to:
- Delete Identity dialog (ConnectedInstances)
- Transfer Ownership confirmation
- Image Crop modal
This commit is contained in:
Jannis Braun
2026-04-03 01:15:14 +02:00
parent 5b9b7fc107
commit a07f2314ed
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/ConnectedInstances.tsx
+3 -3
View File
@@ -516,16 +516,16 @@ function DeleteIdentityDialog({
</div>
{/* Actions */}
<div className="flex justify-end gap-2">
<div className="flex gap-3">
<button
onClick={onClose}
className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors"
>
Cancel
</button>
<button
onClick={handleConfirm}
className="px-3 py-1.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
className="flex-1 py-2.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded-lg transition-colors"
>
Delete Identity
</button>
packages/web/src/components/modals/TransferOwnershipModal.tsx
+3 -3
View File
@@ -94,10 +94,10 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
</p>
<p className="text-xs text-txt-tertiary mt-1.5">You will become a regular member.</p>
</div>
<div className="flex gap-2 justify-end">
<div className="flex gap-3">
<button
onClick={() => setSelectedUserId(null)}
className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors disabled:opacity-50"
disabled={transferring}
>
Cancel
@@ -105,7 +105,7 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
<button
onClick={handleTransfer}
disabled={transferring}
className="px-3 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
className="flex-1 py-2.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
>
{transferring ? 'Transferring...' : 'Transfer'}
</button>
packages/web/src/components/ui/ImageCropModal.tsx
+3 -3
View File
@@ -122,11 +122,11 @@ export function ImageCropModal({
</div>
{/* Actions */}
<div className="flex justify-end gap-2 p-4">
<div className="flex gap-3 p-4">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors"
>
Cancel
</button>
@@ -134,7 +134,7 @@ export function ImageCropModal({
type="button"
onClick={handleApply}
disabled={isProcessing || !croppedAreaPixels}
className="px-4 py-2 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
className="flex-1 py-2.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
>
{isProcessing ? 'Applying...' : 'Apply'}
</button>