feat(training): small UI fixes

- rename menu label from "Trainings & Certs" to "Training & Certifications"
- add Certification Verification Tool to useful links
- move Download button to top-right corner of certification cards
- move Download Certificate button to top-right corner of training cards

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Signed-off-by: Nuno Eufrasio <[email protected]>

Author: nunoeufrasio

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts

@@ -106,7 +106,7 @@ export class MainLayoutComponent {
       expanded: true,
       items: [
         {
-          label: 'Trainings & Certs',
+          label: 'Training & Certifications',
           icon: 'fa-light fa-graduation-cap',
           routerLink: '/me/training',
         },

apps/lfx-one/src/app/modules/trainings/components/certification-card/certification-card.component.html

@@ -16,26 +16,42 @@
 
     <!-- Col 2: Main content -->
     <div class="flex-1 min-w-0 flex flex-col gap-3">
-      <!-- Top row: name + issuedBy | expired badge -->
+      <!-- Top row: name + issuedBy | expired badge + download button -->
       <div class="flex items-start justify-between gap-4">
         <div class="flex flex-col gap-0.5 min-w-0">
           <h3 class="text-sm font-semibold text-gray-900 leading-snug" data-testid="cert-card-name">{{ cert().name }}</h3>
           <p class="text-xs text-gray-500">{{ cert().issuedBy }}</p>
         </div>
-        @if (cert().status === 'expired') {
-          <span
-            class="flex-shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-50 border border-red-200 text-red-700"
-            data-testid="cert-card-expired-badge">
-            Expired
-          </span>
-        }
+        <div class="flex-shrink-0 flex items-center gap-2">
+          @if (cert().status === 'expired') {
+            <span
+              class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-50 border border-red-200 text-red-700"
+              data-testid="cert-card-expired-badge">
+              Expired
+            </span>
+          }
+          @if (cert().downloadUrl) {
+            <div data-testid="cert-card-actions">
+              <lfx-button
+                severity="secondary"
+                styleClass="!text-xs !h-8 !py-0"
+                label="Download"
+                icon="fa-light fa-arrow-down-to-line"
+                [href]="cert().downloadUrl!"
+                target="_blank"
+                rel="noopener noreferrer"
+                [outlined]="true"
+                data-testid="cert-card-download-btn" />
+            </div>
+          }
+        </div>
       </div>
 
       <!-- Description -->
       <p class="text-sm text-gray-600 line-clamp-2" [title]="cert().description" data-testid="cert-card-description">{{ cert().description }}</p>
 
-      <!-- Bottom row: meta fields + download button -->
-      <div class="flex items-end justify-between gap-4 border-t border-gray-100 pt-3" data-testid="cert-card-meta-row">
+      <!-- Bottom row: meta fields -->
+      <div class="border-t border-gray-100 pt-3" data-testid="cert-card-meta-row">
         <div class="flex flex-wrap gap-x-8 gap-y-1.5 text-xs" data-testid="cert-card-meta">
           <div class="flex flex-col gap-0.5">
             <span class="text-gray-400">Date Earned</span>
@@ -54,22 +70,6 @@ <h3 class="text-sm font-semibold text-gray-900 leading-snug" data-testid="cert-c
             <span class="text-gray-500 font-mono" [title]="cert().certificateId" data-testid="cert-card-id">{{ cert().certificateId }}</span>
           </div>
         </div>
-
-        <!-- Download button (only when downloadUrl is available) -->
-        @if (cert().downloadUrl) {
-          <div class="flex-shrink-0" data-testid="cert-card-actions">
-            <lfx-button
-              severity="secondary"
-              styleClass="!text-xs !h-8 !py-0"
-              label="Download"
-              icon="fa-light fa-arrow-down-to-line"
-              [href]="cert().downloadUrl!"
-              target="_blank"
-              rel="noopener noreferrer"
-              [outlined]="true"
-              data-testid="cert-card-download-btn" />
-          </div>
-        }
       </div>
     </div>
   </div>

apps/lfx-one/src/app/modules/trainings/components/training-card/training-card.component.html

@@ -16,7 +16,7 @@
 
     <!-- Col 2: Main content -->
     <div class="flex-1 min-w-0 flex flex-col gap-3">
-      <!-- Top row: name + level badge + issuedBy | Continue Learning button -->
+      <!-- Top row: name + level badge + issuedBy | Continue Learning / Download Certificate button -->
       <div class="flex items-start justify-between gap-4">
         <div class="flex flex-col gap-1 min-w-0">
           <div class="flex items-center gap-2 flex-wrap">
@@ -44,24 +44,7 @@ <h3 class="text-sm font-semibold text-gray-900 leading-snug" data-testid="traini
               [outlined]="true"
               data-testid="training-card-continue-btn" />
           </div>
-        }
-      </div>
-
-      <!-- Description -->
-      <p class="text-sm text-gray-600 line-clamp-2" [title]="training().description" data-testid="training-card-description">
-        {{ training().description }}
-      </p>
-
-      <!-- Bottom row: date meta + download button (completed only) -->
-      <div class="flex items-end justify-between gap-4 border-t border-gray-100 pt-3" data-testid="training-card-meta-row">
-        <div class="flex flex-wrap gap-x-8 gap-y-1.5 text-xs" data-testid="training-card-meta">
-          <div class="flex flex-col gap-0.5">
-            <span class="text-gray-400">{{ dateLabel() }}</span>
-            <span class="text-gray-700 font-medium" data-testid="training-card-date">{{ date() | date: 'MMM d, y' }}</span>
-          </div>
-        </div>
-
-        @if (downloadUrl()) {
+        } @else if (downloadUrl()) {
           <div class="flex-shrink-0" data-testid="training-card-actions">
             <!-- TODO: replace !important overrides with a size="sm" input on ButtonComponent (LFXV2-TODO) -->
             <lfx-button
@@ -77,6 +60,21 @@ <h3 class="text-sm font-semibold text-gray-900 leading-snug" data-testid="traini
           </div>
         }
       </div>
+
+      <!-- Description -->
+      <p class="text-sm text-gray-600 line-clamp-2" [title]="training().description" data-testid="training-card-description">
+        {{ training().description }}
+      </p>
+
+      <!-- Bottom row: date meta -->
+      <div class="border-t border-gray-100 pt-3" data-testid="training-card-meta-row">
+        <div class="flex flex-wrap gap-x-8 gap-y-1.5 text-xs" data-testid="training-card-meta">
+          <div class="flex flex-col gap-0.5">
+            <span class="text-gray-400">{{ dateLabel() }}</span>
+            <span class="text-gray-700 font-medium" data-testid="training-card-date">{{ date() | date: 'MMM d, y' }}</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

apps/lfx-one/src/app/modules/trainings/trainings-dashboard/trainings-dashboard.component.ts

@@ -33,6 +33,11 @@ const USEFUL_LINKS = [
     url: 'https://training.linuxfoundation.org',
     description: 'Browse certifications, explore the full course catalog, and register for exams.',
   },
+  {
+    label: 'Certification Verification Tool',
+    url: 'https://training.linuxfoundation.org/certification/verify/',
+    description: 'Want proof of your certification? Use our Verification Tool to confirm and share the validity of your certifications.',
+  },
 ];
 
 @Component({