style: some touch ups

apps/studio/components/interfaces/Organization/OAuthApps/Consent/AuthorizingAsCard.tsx

@@ -1,56 +1,45 @@
-import { LogOut, RefreshCcw } from 'lucide-react'
-import { Button } from 'ui'
+import { LogOut } from 'lucide-react'
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 export interface AuthorizingAsCardProps {
   email: string
   organizationSlug: string
   onSignOut: () => void
-  showSwitcher?: boolean
-  onSwitchOrg?: () => void
 }
 
 export const AuthorizingAsCard = ({
   email,
   organizationSlug,
   onSignOut,
-  showSwitcher = false,
-  onSwitchOrg,
 }: AuthorizingAsCardProps) => {
   return (
     <section className="flex flex-col gap-2">
       <div className="divide-y rounded-md border bg-surface-75 px-4">
-        <div className="flex items-center justify-between gap-4 py-2.5 text-xs">
+        <div className="flex items-center justify-between gap-4 py-1.5 text-xs">
           <span className="shrink-0 text-foreground-light">Authorizing as</span>
           <span className="flex min-w-0 items-center gap-2">
             <span className="min-w-0 truncate text-right text-foreground">{email}</span>
-            <Button
-              variant="text"
-              size="tiny"
-              icon={<LogOut size={14} />}
-              className="shrink-0 size-6 px-0 text-foreground-light hover:text-foreground"
-              aria-label="Sign out"
-              onClick={onSignOut}
-            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="text"
+                  size="tiny"
+                  icon={<LogOut size={14} />}
+                  className="shrink-0 size-6 px-0 text-foreground-light hover:text-foreground"
+                  aria-label="Sign out"
+                  onClick={onSignOut}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="top">Sign out</TooltipContent>
+            </Tooltip>
           </span>
         </div>
         <div className="flex items-center justify-between gap-4 py-2.5 text-xs">
           <span className="shrink-0 text-foreground-light">Organization</span>
-          <span className="flex min-w-0 items-center gap-2">
-            <span className="min-w-0 truncate text-right text-foreground">{organizationSlug}</span>
-            {showSwitcher && (
-              <Button
-                variant="text"
-                size="tiny"
-                icon={<RefreshCcw size={14} />}
-                className="shrink-0 size-6 px-0 text-foreground-light hover:text-foreground"
-                aria-label="Switch organization"
-                onClick={onSwitchOrg}
-              />
-            )}
-          </span>
+          <span className="min-w-0 truncate text-right text-foreground">{organizationSlug}</span>
         </div>
       </div>
-      <p className="text-xs text-foreground-light">
+      <p className="text-xs text-foreground-lighter">
         This grant acts as you, it can never do more than your role in this organization allows.
       </p>
     </section>

apps/studio/components/interfaces/Organization/OAuthApps/Consent/OAuthAppsAuthorizeScreen.tsx

@@ -171,8 +171,6 @@ export const OAuthAppsAuthorizeScreen = ({
             email={identity.email}
             organizationSlug={memberOrg.slug}
             onSignOut={handleSignOut}
-            showSwitcher={identity.organizations.length > 1}
-            onSwitchOrg={handleSwitchOrg}
           />
 
           {hasProjects ? (
@@ -198,7 +196,7 @@ export const OAuthAppsAuthorizeScreen = ({
           )}
         </fieldset>
 
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2">
           <Button
             block
             variant={isSubmitting ? 'default' : 'primary'}
@@ -215,15 +213,21 @@ export const OAuthAppsAuthorizeScreen = ({
           )}
         </div>
 
-        <div className="border-t pt-6">
-          <p className="text-xs text-foreground-light">
-            {footerMessage ?? (
-              <>
+        <div className="flex flex-col gap-4 border-t pt-6 text-xs text-foreground-lighter">
+          {footerMessage ? (
+            <p>{footerMessage}</p>
+          ) : (
+            <>
+              <p>
+                No admin approval is needed if your role permits this access. This authorization
+                will appear in Authorized apps.
+              </p>
+              <p>
                 Authorizing will redirect you to{' '}
-                <span className="text-foreground">{request.redirect_uri}</span>.
-              </>
-            )}
-          </p>
+                <span className="text-foreground">{request.redirect_uri}</span>
+              </p>
+            </>
+          )}
         </div>
       </div>
     </InterstitialLayout>

apps/studio/components/interfaces/Organization/OAuthApps/Consent/ScopeGroupCard.tsx

@@ -13,11 +13,11 @@ export const ScopeGroupCard = ({
   showHeading = true,
 }: ScopeGroupCardProps) => {
   return (
-    <section className="flex flex-col gap-5">
+    <section className="flex flex-col gap-3">
       {showHeading && (
         <div className="flex flex-col gap-1">
           <p className="text-xs text-foreground">Permissions requested</p>
-          <p className="text-xs text-foreground-light">
+          <p className="text-xs text-foreground-lighter">
             Authorizing {appName} grants it the following access permissions to the selected
             projects.
           </p>