mirror of
https://github.com/supabase/supabase.git
synced 2026-05-09 02:09:50 -04:00
Danny White
16db81cc9c
## What kind of change does this PR introduce? Studio UI copy and visual polish for the Stripe Projects connect flow. - Resolves DEPR-428 - Resolves DEPR-429 ## What is the current behaviour? - The Stripe Projects connect flow copy is awkward in request, linked, wrong-account, and success states. - The API authorisation layout logo is slightly misaligned. - The bundled Stripe icon is outdated. ## What is the new behaviour? - Tightens Stripe Projects copy and CTA text around authorising the request. - Keeps the real `ar_id` account-request flow intact without local preview shortcuts. - Centres the logo link in `APIAuthorizationLayout`. - Updates the Stripe icon SVG. - Note that this affects other areas too, such as Stripe integrations ([more](https://supabase.slack.com/archives/C0429V78ACX/p1777268209661729)). - Fixes CLI login copy capitalisation. | Before | After | | --- | --- | | <img width="1380" height="856" alt="CleanShot 2026-04-29 at 15 10 26@2x" src="https://github.com/user-attachments/assets/4ad242c2-1e9e-4128-9661-ef8deee111c1" /> | <img width="1486" height="892" alt="CleanShot 2026-04-29 at 15 10 36@2x" src="https://github.com/user-attachments/assets/f6aa4d0a-e5a7-40ff-87b7-845a22ef1c50" /> | ## Verification - `pnpm exec eslint pages/partners/stripe/projects/login.tsx` - `git diff --check` --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { useTheme } from 'next-themes'
|
|
import Image from 'next/legacy/image'
|
|
import Link from 'next/link'
|
|
import type { PropsWithChildren } from 'react'
|
|
import { Separator } from 'ui'
|
|
|
|
import { Head, type HeadProvider } from '@/components/ui/Head'
|
|
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
export interface APIAuthorizationLayoutProps {
|
|
HeadProvider: HeadProvider
|
|
}
|
|
|
|
export const APIAuthorizationLayout = ({
|
|
HeadProvider,
|
|
children,
|
|
}: PropsWithChildren<APIAuthorizationLayoutProps>) => {
|
|
const { resolvedTheme } = useTheme()
|
|
const { appTitle } = useCustomContent(['app:title'])
|
|
|
|
return (
|
|
<>
|
|
<Head
|
|
HeadProvider={HeadProvider}
|
|
title={`Authorize API access | ${appTitle || 'Supabase'}`}
|
|
/>
|
|
<main className="h-screen flex flex-col w-full h-full overflow-y-auto">
|
|
<div>
|
|
<div className="mx-auto px-4 sm:px-6">
|
|
<div className="max-w-xl flex justify-between items-center mx-auto py-4">
|
|
<div className="flex justify-start lg:w-0 lg:flex-1 items-center">
|
|
<Link href="/" className="inline-flex items-center leading-none">
|
|
<span className="sr-only">Supabase</span>
|
|
<Image
|
|
src={
|
|
resolvedTheme?.includes('dark')
|
|
? `${BASE_PATH}/img/supabase-dark.svg`
|
|
: `${BASE_PATH}/img/supabase-light.svg`
|
|
}
|
|
alt="Supabase Logo"
|
|
height={20}
|
|
width={105}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex flex-col justify-center grow mx-auto w-[90vw] max-w-[600px] space-y-4">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|