mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
7d369571ce
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This takes our dialog to review compute upgrade's and gives it a bit more visual clarity (as it can get confusing). Simplification and clear communication of what differences there are. | Before | After | |--------|--------| | <img width="663" height="722" alt="Screenshot 2026-04-07 at 16 58 33" src="https://github.com/user-attachments/assets/dbb699b4-89ad-4172-8c23-e5d1ca5045f8" /> | <img width="608" height="635" alt="Screenshot 2026-04-08 at 12 28 32" src="https://github.com/user-attachments/assets/9a4a5952-6049-4cda-86e6-73773f001010" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Redesigned disk review dialog to a stacked "Before/After" layout with a clear vertical breakdown of changes. * Replaced badges/tooltips with inline per-line monthly deltas and explicit summed totals. * Replica note moved inline; cooldown and throughput explanations consolidated and more broadly shown when storage type changes. * Arrow between totals updated and "After" state emphasized. * **Chores** * Updated dialog spacing, padding, min-width, confirm button styling, and dialog wording. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { cn } from 'ui'
|
|
|
|
import { formatCurrency } from '@/lib/helpers'
|
|
|
|
export interface BreakdownRowProps {
|
|
label: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const BreakdownRow = ({ label, description, children }: BreakdownRowProps) => (
|
|
<div className="flex items-start justify-between py-3 px-0 border-b border-dashed last:border-b-0">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm text-foreground-light">{label}</span>
|
|
{description && <span className="text-xs text-warning-600 max-w-72">{description}</span>}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
export const ValueChange = ({ from, to }: { from: string; to: string }) => (
|
|
<span className="text-sm font-mono uppercase">
|
|
<span className="text-foreground-lighter">{from}</span>
|
|
<span className="text-foreground-lighter mx-2">→</span>
|
|
<span className="text-foreground">{to}</span>
|
|
</span>
|
|
)
|
|
|
|
export const PriceDelta = ({ delta }: { delta: number }) => (
|
|
<span className={cn('text-xs', delta >= 0 ? 'text-brand' : 'text-destructive')}>
|
|
{delta >= 0 ? `+${formatCurrency(delta)}` : `-${formatCurrency(Math.abs(delta))}`}{' '}
|
|
<span className="text-foreground-lighter">per month</span>
|
|
</span>
|
|
)
|