From c1005cf9271650199c4b3765557b0ea1a8df7e5a Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:40:58 +0000
Subject: [PATCH] refactor: replace dimmed text hint with an alert box and
 remove opacity styling on locked license cards

---
 .../licensing/components/LicenseCatalogue.tsx | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index f0042b260..c948e5e58 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+  Alert,
   Anchor,
   Badge,
   Box,
@@ -278,13 +279,7 @@ function LicenseTypeCard({
       withBorder
       radius="md"
       padding="md"
-      style={{
-        cursor: canApply ? 'pointer' : 'default',
-        height: '100%',
-        // Dimmed rather than hidden: browse-all exists so an applicant can see
-        // what else the authority issues. It just must not look actionable.
-        opacity: canApply ? 1 : 0.6,
-      }}
+      style={{ cursor: canApply ? 'pointer' : 'default', height: '100%' }}
       onClick={canApply ? () => onSelect(type) : undefined}
     >
       <Stack gap="xs" justify="space-between" h="100%">
@@ -352,14 +347,26 @@ function LicenseTypeCard({
             {/* A disabled button on its own only says "no". This says why, and
                 where to go about it — the licence is offered against a declared
                 mode of operation, and the server refuses a create for one the
-                applicant has not declared. */}
+                applicant has not declared. Called out rather than set in dimmed
+                small print: it is the only thing on a locked card the applicant
+                can act on. */}
             {!canApply && (
-              <Text size="xs" c="dimmed" mt={6} ta="center">
-                {t('licensing.catalogue.lockedHint')}{' '}
+              <Alert
+                variant="light"
+                color="orange"
+                radius="md"
+                mt="sm"
+                p="xs"
+              >
+                <Text size="xs" lh={1.4}>
+                  {t('licensing.catalogue.lockedHint')}
+                </Text>
                 <Anchor
                   size="xs"
+                  fw={600}
                   component="button"
                   type="button"
+                  mt={4}
                   onClick={(event) => {
                     // The card is inert while locked, but the anchor inside it
                     // must not re-trigger anything if that ever changes.
@@ -369,7 +376,7 @@ function LicenseTypeCard({
                 >
                   {t('licensing.catalogue.addToOperations')}
                 </Anchor>
-              </Text>
+              </Alert>
             )}
           </RequirePermission>
         </Box>