fix(dashboard): improve status cards styles

src/app/pages/dashboard/status-cards/status-cards.component.scss

@@ -6,61 +6,107 @@
     flex-direction: row;
     align-items: center;
     height: 6rem;
-    box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
     overflow: visible;
     cursor: pointer;
+    color: nga-theme(card-fg-heading);
 
-    position: relative;
+    $bevel: btn-hero-bevel(nga-theme(card-bg));
-    &::before {
+    $shadow: btn-hero-shadow();
-      position: absolute;
+    box-shadow: $bevel, $shadow;
-      content: '';
+    transition: all 0.1s ease-out;
-      height: calc(100% + 3px);
-      width: 100%;
-      left: 0;
-      top: 0;
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: nga-theme(card-border-radius);
-    }
-
-    &.on {
-      box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
-
-      .icon-container {
-        box-shadow: none;
-        &.success {
-          box-shadow: inset 0 5px 9px 0 #00967d,
-                            0 4px 10px 0 rgba(33, 7, 77, 0.5),
-                            0 2px 12px 0 rgba(35, 255, 181, 0.6);
-        }
-      }
-      &::before {
-        display: none;
-      }
-    }
-  }
 
+    $border-radius: nga-theme(card-border-radius);
     .icon-container {
       font-size: 4em;
       padding: 0.5rem 1.75rem;
-    color: nga-theme(card-foreground);
+      border-radius: $border-radius 0 0 $border-radius;
-    border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
+      transition: all 0.1s ease-out, color 0s;
 
       &.primary {
-      @include btn-hero-primary();
+        @include btn-hero-primary-gradient();
+        @include btn-hero-primary-bevel-glow-shadow();
       }
       &.success {
-      @include btn-hero-success();
+        @include btn-hero-success-gradient();
+        @include btn-hero-success-bevel-glow-shadow();
       }
       &.info {
-      @include btn-hero-info();
+        @include btn-hero-info-gradient();
+        @include btn-hero-info-bevel-glow-shadow();
       }
       &.warning {
-      @include btn-hero-warning();
+        @include btn-hero-warning-gradient();
+        @include btn-hero-warning-bevel-glow-shadow();
+      }
+    }
+
+    &:hover {
+      background: lighten(nga-theme(card-bg), 5%);
+
+      .icon-container {
+        &.primary {
+          background-image: btn-hero-primary-light-gradient();
+        }
+        &.success {
+          background-image: btn-hero-success-light-gradient();
+        }
+        &.info {
+          background-image: btn-hero-info-light-gradient();
+        }
+        &.warning {
+          background-image: btn-hero-warning-light-gradient();
+        }
+      }
+    }
+
+    &:active {
+      box-shadow: none;
+      background: nga-theme(card-bg);
+
+      .icon-container {
+        &.primary, &.success, &.info, &.warning {
+          box-shadow: none;
+        }
+        &.primary {
+          background-image: btn-hero-primary-dark-gradient();
+        }
+        &.success {
+          background-image: btn-hero-success-dark-gradient();
+        }
+        &.info {
+          background-image: btn-hero-info-dark-gradient();
+        }
+        &.warning {
+          background-image: btn-hero-warning-dark-gradient();
+        }
+      }
+    }
+
+    &.off {
+      color: nga-theme(card-fg);
+
+      .icon-container {
+        &.primary, &.success, &.info, &.warning {
+          box-shadow: none;
+          background-image: linear-gradient(to right, transparent, transparent);
         }
       }
 
       .details {
-    margin-left: 1.5rem;
+        border-left: 1px solid nga-theme(separator);
+      }
+      .status {
+        color: nga-theme(card-fg);
+      }
+    }
+
+    .details {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      padding-left: 1.5rem;
+      border-left: 1px solid transparent;
     }
     .title {
       font-size: 1.5rem;
@@ -69,6 +115,7 @@
       font-size: 1.125rem;
       font-weight: nga-theme(font-weight-light);
       text-transform: uppercase;
-    color: nga-theme(card-foreground-secondary);
+      color: nga-theme(card-fg-heading);
+    }
   }
 }

src/app/pages/dashboard/status-cards/status-cards.component.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   template: `
     <div class="row">
       <div class="col-lg-3" *ngFor="let card of statusCards">
-        <nga-card (click)="card.on = !card.on" [ngClass]="{'on': card.on}">
+        <nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
           <div class="icon-container {{card.type}}">
             <i class="{{card.icon}}"></i>
           </div>