Cde design system

apps/cde-ui/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 
-import { HeaderComponent } from './components/header/header.component';
 import { ScreenSizeNoticeComponent } from './components/screen-size-notice/screen-size-notice.component';
 
 /** Max width to show screen size notice */
@@ -14,7 +13,7 @@ export const SCREEN_SIZE_NOTICE_MAX_HEIGHT = 832;
  */
 @Component({
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent],
+  imports: [RouterOutlet],
   selector: 'cde-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/cde-ui/src/app/components/visual-card/visual-card.component.html

@@ -1,9 +1,9 @@
 @for (card of cardData(); track card.label) {
   <a [routerLink]="card.route" class="visual-card cta-flat" rel="noopener noreferrer">
     <img [attr.src]="card.image" [alt]="card.alt" />
-    <div class="label">
+    <button class="label" mat-flat-button hraCallToActionButton hraSecondaryButton>
       {{ card.label }}
-      <mat-icon iconPositionEnd> east </mat-icon>
-    </div>
+      <mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
+    </button>
   </a>
 }

apps/cde-ui/src/app/components/visual-card/visual-card.component.scss

@@ -1,87 +1,57 @@
-// @use '../../../styles/cta' as cta;
-
 :host {
   display: flex;
   flex-wrap: wrap;
   gap: 2.5rem;
   column-gap: 1.75rem;
-  justify-content: center;
+  margin: 0 auto;
+  width: min-content;
+
+  @media (min-width: 768px) {
+    margin: 0;
+    width: auto;
+  }
+
+  @media (min-width: 1280px) {
+    justify-content: space-between;
+  }
 
   .visual-card {
+    @media (min-width: 1012px) {
+      width: 24.5rem;
+      height: 24.5rem;
+    }
+
+    @media (min-width: 1920px) {
+      width: 30.5rem;
+      height: 30.5rem;
+    }
+
     border-radius: 1rem;
     overflow: hidden;
-    box-shadow: 0px 5px 1rem 0px rgba(32, 30, 61, 0.24);
+    box-shadow: 0px 5px 1rem 0px rgb(from var(--sys-shadow) r g b / 0.24);
     outline-offset: 0;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    font-family: Metropolis;
     width: 17.5rem;
     height: 17.5rem;
 
     &:hover {
-      box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24);
+      box-shadow: 0px 5px 1rem 5px rgb(from var(--sys-shadow) r g b / 0.24);
     }
 
-    // &:focus-visible .label {
-    //   @include cta.flatFocus();
-    // }
-
     img {
       width: 100%;
       object-fit: contain;
     }
 
     .label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       margin: auto auto;
-      font-size: 0.75rem;
-      line-height: 1.125rem;
     }
 
     mat-icon {
-      vertical-align: middle;
-      height: 1rem;
-      width: 1rem;
-      font-size: 1rem;
-      margin-left: 0.5rem;
-    }
-  }
-
-  @media (min-width: 768px) {
-    justify-content: space-between;
-  }
-
-  @media (min-width: 1012px) {
-    .visual-card {
-      width: 24.5rem;
-      height: 24.5rem;
-
-      .label {
-        font-size: 1rem;
-        line-height: 1.5rem;
-      }
-
-      mat-icon {
-        height: 1.5rem;
-        width: 1.5rem;
-        font-size: 1.5rem;
-        margin-left: 0.75rem;
-      }
-    }
-  }
-
-  @media (min-width: 1280px) {
-    column-gap: 2rem;
-  }
-
-  @media (min-width: 1920px) {
-    .visual-card {
-      width: 30.5rem;
-      height: 30.5rem;
+      margin-left: 0.25rem;
     }
   }
 }

apps/cde-ui/src/app/components/visual-card/visual-card.component.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
+import { ButtonModule } from '@hra-ui/design-system/button';
 
 /**
  * Interface for the visual card
@@ -24,7 +24,7 @@ export interface VisualCard {
 @Component({
   selector: 'cde-visual-card',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, ButtonModule, MatIconModule, RouterModule],
   templateUrl: './visual-card.component.html',
   styleUrl: './visual-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,