fix(web): standardize modal button layout across all dialog modals
Apply symmetrical full-width button pattern to: - Delete Identity dialog (ConnectedInstances) - Transfer Ownership confirmation - Image Crop modal
This commit is contained in:
@@ -516,16 +516,16 @@ function DeleteIdentityDialog({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex justify-end gap-2">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
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
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleConfirm}
|
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
|
Delete Identity
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -94,10 +94,10 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
|
|||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-txt-tertiary mt-1.5">You will become a regular member.</p>
|
<p className="text-xs text-txt-tertiary mt-1.5">You will become a regular member.</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2 justify-end">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => setSelectedUserId(null)}
|
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}
|
disabled={transferring}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
@@ -105,7 +105,7 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
|
|||||||
<button
|
<button
|
||||||
onClick={handleTransfer}
|
onClick={handleTransfer}
|
||||||
disabled={transferring}
|
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'}
|
{transferring ? 'Transferring...' : 'Transfer'}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -122,11 +122,11 @@ export function ImageCropModal({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex justify-end gap-2 p-4">
|
<div className="flex gap-3 p-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onClose}
|
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
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
@@ -134,7 +134,7 @@ export function ImageCropModal({
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={handleApply}
|
onClick={handleApply}
|
||||||
disabled={isProcessing || !croppedAreaPixels}
|
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'}
|
{isProcessing ? 'Applying...' : 'Apply'}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user