Refactor dashboard actions to use button component and enhance styling

src/angular/frontend/src/app/components/dashboard/dashboard.component.html

@@ -15,7 +15,7 @@
       {{description}}
     </span>
     <div class="actions">
-      <app-link [href]="'/' + label.toLowerCase()">View {{label}}</app-link>
+      <button [routerLink]="'/' + label.toLowerCase()" class="primary outline">View {{label}}</button>
     </div>
   </app-panel>
 </ng-template>

src/angular/frontend/src/app/components/dashboard/dashboard.component.scss

@@ -17,5 +17,10 @@
     .description {
       color: var(--neutral-30);
     }
+
+    .actions {
+      display: flex;
+      gap: 1rem;
+    }
   }
 }

src/angular/frontend/src/styles.scss

@@ -20,3 +20,46 @@ body {
   scrollbar-color: var(--neutral-70)var(--neutral-80);
   scrollbar-width: thin;
 }
+
+button {
+  border: none;
+
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-weight: bold;
+
+  white-space: nowrap;
+
+  background-color: var(--button-bg-color);
+  color: var(--button-fg-color);
+
+  &:hover {
+    background-color: var(--button-bg-hover-color);
+    cursor: pointer;
+  }
+
+  --button-fg-color: var(--neutral-90);
+
+  &.primary {
+    --button-bg-color: var(--primary-30);
+    --button-bg-hover-color: var(--primary-20);
+  }
+
+  &.secondary {
+    --button-bg-color: var(--secondary-30);
+    --button-bg-hover-color: var(--secondary-20);
+  }
+
+  &.outline {
+    padding: calc(0.5rem - 1px) calc(1rem - 1px);
+    border: 1px solid var(--button-bg-color);
+    background-color: transparent;
+    color: var(--button-bg-color);
+
+    &:hover {
+      border: 1px solid var(--button-bg-hover-color);
+      background-color: transparent;
+      color: var(--button-bg-hover-color);
+    }
+  }
+}