supabase
diff --git a/‎apps/studio/components/layouts/InterstitialLayout.tsx‎
Lines changed: 25 additions & 1 deletion b/‎apps/studio/components/layouts/InterstitialLayout.tsx‎
Lines changed: 25 additions & 1 deletion
diff --git a/‎apps/studio/components/ui/CopyButton.tsx‎
Lines changed: 13 additions & 2 deletions b/‎apps/studio/components/ui/CopyButton.tsx‎
Lines changed: 13 additions & 2 deletions
@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
+import { ArrowRightLeft } from 'lucide-react'
 import type { PropsWithChildren, ReactNode } from 'react'
 import { Card, CardContent, CardHeader, cn } from 'ui'
 
@@ -11,20 +12,24 @@ interface InterstitialLayoutProps {
   logo?: ReactNode
   title?: ReactNode
   description?: ReactNode
+  subtitle?: ReactNode
   containerClassName?: string
   cardClassName?: string
   titleClassName?: string
   descriptionClassName?: string
+  subtitleClassName?: string
 }
 
 export const InterstitialLayout = ({
   logo,
   title,
   description,
+  subtitle,
   containerClassName,
   cardClassName,
   titleClassName,
   descriptionClassName,
+  subtitleClassName,
   children,
 }: PropsWithChildren<InterstitialLayoutProps>) => {
   const TitleElement = typeof title === 'string' ? 'h1' : 'div'
@@ -42,7 +47,7 @@ export const InterstitialLayout = ({
         transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
         className={cn('mx-auto w-full max-w-[400px] overflow-hidden', cardClassName)}
       >
-        {(logo || title || description) && (
+        {(logo || title || description || subtitle) && (
           <CardHeader className="items-center gap-0 space-y-0 border-0 px-6 py-6 text-center font-normal [--card-padding-x:1.5rem]">
             {logo && <div className="mb-4 flex justify-center">{logo}</div>}
             {(title || description) && (
@@ -69,6 +74,11 @@ export const InterstitialLayout = ({
                 )}
               </div>
             )}
+            {subtitle && (
+              <div className={cn('mt-2.5 text-sm text-foreground-lighter', subtitleClassName)}>
+                {subtitle}
+              </div>
+            )}
           </CardHeader>
         )}
         {children}
@@ -88,12 +98,26 @@ export const LogoBox = ({ children, className }: { children: ReactNode; classNam
   </div>
 )
 
+export const LogoPair = ({ left, right }: { left: ReactNode; right: ReactNode }) => (
+  <div className="flex items-center justify-center gap-2.5">
+    {left}
+    <ArrowRightLeft className="size-4 text-foreground-muted" />
+    {right}
+  </div>
+)
+
 export const SupabaseLogo = () => (
   <LogoBox>
     <img alt="Supabase" src={`${BASE_PATH}/img/supabase-logo.svg`} className="size-7" />
   </LogoBox>
 )
 
+export const InterstitialMetadataPill = ({ children }: PropsWithChildren) => (
+  <span className="mx-auto mt-1.5 flex w-fit items-center gap-1 rounded-full border border-muted px-2 py-1 font-mono text-[11px] tracking-tight text-foreground-lighter">
+    {children}
+  </span>
+)
+
 export const InterstitialAccountRow = ({
   avatarUrl,
   displayName,
 
@@ -31,6 +31,9 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       onClick,
       copyLabel = 'Copy',
       copiedLabel = 'Copied',
+      type = 'primary',
+      icon,
+      className,
       ...props
     },
     ref
@@ -53,9 +56,17 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           onClick?.(e)
         }}
         {...props}
-        className={cn({ 'px-1': iconOnly }, props.className)}
+        type={type}
+        className={cn({ 'px-1': iconOnly }, className)}
         icon={
-          showCopied ? <Check strokeWidth={2} className="text-brand" /> : (props.icon ?? <Copy />)
+          showCopied ? (
+            <Check
+              strokeWidth={2}
+              className={cn(type === 'primary' ? 'text-inherit' : 'text-brand')}
+            />
+          ) : (
+            (icon ?? <Copy />)
+          )
         }
       >
         {!iconOnly && <>{children ?? (showCopied ? copiedLabel : copyLabel)}</>}