Polish portal banner actions and alignment

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>

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()}

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.

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")}

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")}