button css (#127)

cmu-sei · Apr 1, 2024 · cf04a85 · cf04a85
1 parent 6f74c33
commit cf04a85
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/src/app/components/landing/dashboard/dashboard.component.html b/src/app/components/landing/dashboard/dashboard.component.html
@@ -16,38 +16,50 @@
 
     <mat-card
       *ngIf="joinMselList.length > 0"
-      class="base-card"
-      tabindex="0"
+      [ngClass]="joinClass"
+      tabindex="1"
+      role="button"
+      (click)="gotoUrl('join')"
+      (mouseover)="joinClass='base-card outline'"
+      (mouseout)="joinClass='base-card'"
     >
-    <mat-card-header>
-      <mat-card-title>Join an Event</mat-card-title>
-      <mat-card-subtitle>Access In-Progress Events</mat-card-subtitle>
-    </mat-card-header>
-    <img class="card-image" (click)="gotoUrl('join')" src="assets/img/join.png" alt="Join image">
+      <mat-card-header>
+        <mat-card-title>Join an Event</mat-card-title>
+        <mat-card-subtitle>Access In-Progress Events</mat-card-subtitle>
+      </mat-card-header>
+      <img class="card-image" src="assets/img/join.png" alt="Join image">
     </mat-card>
 
     <mat-card
       *ngIf="launchMselList.length > 0"
-      class="base-card"
-      tabindex="0"
+      [ngClass]="launchClass"
+      tabindex="2"
+      role="button"
+      (click)="gotoUrl('launch')"
+      (mouseover)="launchClass='base-card outline'"
+      (mouseout)="launchClass='base-card'"
     >
-    <mat-card-header>
-      <mat-card-title>Start an Event</mat-card-title>
-      <mat-card-subtitle>Launch New events</mat-card-subtitle>
-    </mat-card-header>
-    <img class="card-image" (click)="gotoUrl('launch')" src="assets/img/start.png" alt="Start image">
+      <mat-card-header>
+        <mat-card-title>Start an Event</mat-card-title>
+        <mat-card-subtitle>Launch New events</mat-card-subtitle>
+      </mat-card-header>
+      <img class="card-image" src="assets/img/start.png" alt="Start image">
     </mat-card>
 
     <mat-card
       *ngIf="buildMselList.length > 0"
-      class="base-card"
-      tabindex="0"
+      [ngClass]="buildClass"
+      tabindex="3"
+      role="button"
+      (click)="gotoUrl('build')"
+      (mouseover)="buildClass='base-card outline'"
+      (mouseout)="buildClass='base-card'"
     >
-    <mat-card-header>
-      <mat-card-title>Manage an Event</mat-card-title>
-      <mat-card-subtitle>Design and Plan Events</mat-card-subtitle>
-    </mat-card-header>
-    <img class="card-image" (click)="gotoUrl('build')" src="assets/img/build.png" alt="Build image">
+      <mat-card-header>
+        <mat-card-title>Manage an Event</mat-card-title>
+        <mat-card-subtitle>Design and Plan Events</mat-card-subtitle>
+      </mat-card-header>
+      <img class="card-image" src="assets/img/build.png" alt="Build image">
     </mat-card>
 
   </div>

diff --git a/src/app/components/landing/dashboard/dashboard.component.scss b/src/app/components/landing/dashboard/dashboard.component.scss
@@ -32,6 +32,7 @@
   min-width: 200px;
   max-width: 300px;
   max-height: 350px;
+  cursor: pointer;
 }
 
 .card-image {
@@ -40,3 +41,8 @@
   margin-top: 40px;
   margin-bottom: 40px;
 }
+
+.outline {
+  border-width: 1px;
+  border-style: solid;
+}
diff --git a/src/app/components/landing/dashboard/dashboard.component.ts b/src/app/components/landing/dashboard/dashboard.component.ts
@@ -1,7 +1,7 @@
 // Copyright 2024 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, ElementRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject, Observable } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -35,6 +35,9 @@ export class DashboardComponent implements OnDestroy {
   topbarImage = this.settingsService.settings.AppTopBarImage;
   TopbarView = TopbarView;
   appTitle = 'Event Dashboard';
+  joinClass = 'base-card';
+  launchClass = 'base-card';
+  buildClass = 'base-card';
   private unsubscribe$ = new Subject();
 
   constructor(