Files
supabase/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
T
Danny White 0a96a5d0ce chore(studio): polish database settings (#42970)
## What kind of change does this PR introduce?

UI update

## What is the current behavior?

- Database settings uses an older, much wider, layout
- This will become problematic later on as more complex elements are
added to the page
- Titles and descriptions are inconsistently formatted

## What is the new behavior?

| Before | After |
| --- | --- |
| <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-EE998752-3696-45E4-A842-9666049153D8"
src="https://github.com/user-attachments/assets/8f0004cf-3bb4-4b00-900a-b116b80371a6"
/> | <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-7E86FD58-35BB-4912-8B2F-8C7AAA03B462"
src="https://github.com/user-attachments/assets/606b51b4-21a0-4b7b-870b-ac92ed363f3c"
/> |
2026-02-27 11:16:02 +11:00

51 lines
1.6 KiB
TypeScript

import { Truck } from 'lucide-react'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { TransferProjectButton } from './TransferProjectButton'
import { Card, CardContent } from 'ui'
import {
PageSection,
PageSectionContent,
PageSectionDescription,
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
export const TransferProjectPanel = () => {
const { data: project } = useSelectedProjectQuery()
if (project === undefined) return null
return (
<PageSection id="transfer-project">
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Transfer project</PageSectionTitle>
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Card>
<CardContent>
<div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
<div className="flex space-x-4">
<Truck className="mt-1" />
<div className="space-y-1 xl:max-w-lg">
<p className="text-sm">Transfer project to another organization</p>
<p className="text-sm text-foreground-light">
To transfer projects, the owner must be a member of both the source and target
organizations.
</p>
</div>
</div>
<div>
<TransferProjectButton />
</div>
</div>
</CardContent>
</Card>
</PageSectionContent>
</PageSection>
)
}