From 93818d8292547d32df4303b6da37ebb972ec745e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Thu, 30 Jul 2026 16:14:56 +0200
Subject: [PATCH] Polish portal banner actions and alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prefer the saved locale as the primary CTA, soften secondary
and NDA actions, tint dismiss hovers to the banner palette,
and center the leading icon with the message.

Signed-off-by: Émile Ré <emile@probo.com>
---
 .../src/components/Banner/Banner.tsx          |  8 +++----
 .../src/components/Banner/variants.ts         |  4 ++--
 .../LocaleMismatchBanner.tsx                  | 22 +++++++++----------
 .../UnsignedNDABanner/UnsignedNDABanner.tsx   |  2 +-
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/compliance-portal/src/components/Banner/Banner.tsx b/apps/compliance-portal/src/components/Banner/Banner.tsx
index c986f401c..4abd833d2 100644
--- a/apps/compliance-portal/src/components/Banner/Banner.tsx
+++ b/apps/compliance-portal/src/components/Banner/Banner.tsx
@@ -59,8 +59,8 @@ export function Banner({
           <div className={slots.message()}>{message}</div>
           <IconButton
             size={1}
-            variant="ghost"
-            color="neutral"
+            variant="soft"
+            color={color}
             aria-label={dismissLabel}
             disabled={dismissDisabled}
             className={slots.dismissMobile()}
@@ -73,8 +73,8 @@ export function Banner({
           {actions}
           <IconButton
             size={1}
-            variant="ghost"
-            color="neutral"
+            variant="soft"
+            color={color}
             aria-label={dismissLabel}
             disabled={dismissDisabled}
             className={slots.dismissDesktop()}
diff --git a/apps/compliance-portal/src/components/Banner/variants.ts b/apps/compliance-portal/src/components/Banner/variants.ts
index 7a6f33876..831b1399d 100644
--- a/apps/compliance-portal/src/components/Banner/variants.ts
+++ b/apps/compliance-portal/src/components/Banner/variants.ts
@@ -28,8 +28,8 @@ export const banner = tv({
     root: "w-full px-8 py-2.5 max-md:px-4 max-md:py-3",
     inner:
       "mx-auto flex w-full max-w-5xl items-center gap-3 max-md:flex-col max-md:items-stretch max-md:gap-3",
-    content: "flex min-w-0 flex-1 items-start gap-2",
-    icon: "mt-0.5 shrink-0 [&_svg]:size-4",
+    content: "flex min-w-0 flex-1 items-center gap-2",
+    icon: "inline-flex shrink-0 [&_svg]:size-4",
     message: "min-w-0 flex-1",
     dismissMobile: "md:hidden",
     // Full-width CTAs on small screens; leave the trailing dismiss control alone.
diff --git a/apps/compliance-portal/src/components/LocaleMismatchBanner/LocaleMismatchBanner.tsx b/apps/compliance-portal/src/components/LocaleMismatchBanner/LocaleMismatchBanner.tsx
index 5e0c1d6b9..e34281fe2 100644
--- a/apps/compliance-portal/src/components/LocaleMismatchBanner/LocaleMismatchBanner.tsx
+++ b/apps/compliance-portal/src/components/LocaleMismatchBanner/LocaleMismatchBanner.tsx
@@ -118,9 +118,19 @@ export function LocaleMismatchBanner({ identityKey }: LocaleMismatchBannerProps)
         <>
           <Button
             size={1}
-            variant="outline"
+            variant="ghost"
             color="sky"
             disabled={busy}
+            onClick={adoptUrlLocale}
+          >
+            {t("locale.mismatch.useThis", { language: urlLabel })}
+          </Button>
+          <Button
+            size={1}
+            variant="solid"
+            color="neutral"
+            highContrast
+            disabled={busy}
             onClick={switchToSaved}
           >
             {t("locale.mismatch.switchToMine", {
@@ -130,16 +140,6 @@ export function LocaleMismatchBanner({ identityKey }: LocaleMismatchBannerProps)
               lng: savedLanguage,
             })}
           </Button>
-          <Button
-            size={1}
-            variant="solid"
-            color="neutral"
-            highContrast
-            disabled={busy}
-            onClick={adoptUrlLocale}
-          >
-            {t("locale.mismatch.useThis", { language: urlLabel })}
-          </Button>
         </>
       )}
       dismissLabel={t("locale.mismatch.dismiss")}
diff --git a/apps/compliance-portal/src/components/UnsignedNDABanner/UnsignedNDABanner.tsx b/apps/compliance-portal/src/components/UnsignedNDABanner/UnsignedNDABanner.tsx
index 59972aaf2..4d846cc9a 100644
--- a/apps/compliance-portal/src/components/UnsignedNDABanner/UnsignedNDABanner.tsx
+++ b/apps/compliance-portal/src/components/UnsignedNDABanner/UnsignedNDABanner.tsx
@@ -75,7 +75,7 @@ export function UnsignedNDABanner({ compliancePortalKey }: UnsignedNDABannerProp
         <Link
           to={ndaHref}
           size={1}
-          variant="solid"
+          variant="ghost"
           color="amber"
         >
           {t("nda.unsignedBanner.sign")}