SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css

@@ -1,7 +1,17 @@
+#ability-value:hover{
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+#ability-saving-throws:hover{
+  opacity: 0.5;
+  cursor: pointer;
+}
+
 .cardContainerClass {
-  border: 6px solid white;
+  border: 2px solid;
   border-radius: 10px;
-  box-shadow: 0 0 10px gold;
+  box-shadow: 0 0 8px;
 }
 
 #main{
@@ -37,6 +47,7 @@
 
 #ability-card-header {
   font-weight: 600;
+  border-radius: 10px 10px 0 0;
 }
 
 @media (max-width: 468px) {
@@ -51,6 +62,7 @@
   justify-content: space-around;
   padding-top: 10px;
   padding-bottom: 10px;
+  border-radius:  0 0 10px 10px;
 }
 #skill-btn{
   border: 2px solid #9e814d;
@@ -58,7 +70,13 @@
   margin-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
+  border-radius:  5px;
 }
+
+#skill-btn:hover{
+  opacity: 0.5;
+}
+
 #skill-btn-divider{
   border-left: #9e814d 2px solid;
   padding-right: 10px;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html

@@ -1,14 +1,14 @@
 <div *ngIf="ability" id="main">
-  <mat-card class="cardContainerClass">
+  <mat-card [style.border-color]="headStyle.bgColor" [style.color]="headStyle.bgColor" class="cardContainerClass">
     <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
-      {{ability.value}}
+      <div id="ability-value">{{ability.value}}</div>
       <div class="diagonal-line"></div>
       Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
       <div class="diagonal-line"></div>
       {{ability.name}}
       <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
       <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
-        ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : '-' + ability.savingThrows}}
+        <div id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : '-' + ability.savingThrows}}</div>
       </div>
     </mat-card-header>
     <mat-divider [style.border-top-color]="'black'"></mat-divider>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts

@@ -16,5 +16,29 @@ export class AbilityCardComponent implements OnInit {
 
   ngOnInit() {
     this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1));
+    this.changeColors();
+  }
+
+  changeColors(){
+    switch(this.ability.name){
+      case 'Charisma':
+        this.headStyle.bgColor = '#FFEB85';
+        break;
+      case 'Dexterity':
+        this.headStyle.bgColor = '#4BBE9C';
+        break;
+      case 'Constitution':
+        this.headStyle.bgColor = 'red';
+        break;
+      case 'Intelligence':
+        this.headStyle.bgColor = '#5AA9E6';
+        break;
+      case 'Strength':
+        this.headStyle.bgColor = '#C41E3D';
+        break;
+      case 'Wisdom':
+        this.headStyle.bgColor = '#9F4BBE';
+        break;
+    }
   }
 }