fix: design administration tiles

src/app/features/admin/components/routables/admin-home/admin-home.routable.html

@@ -2,15 +2,12 @@
 
 <div class="cards-container">
   <mat-card *ngFor="let resource of getAdminResources()" class="card" (click)="navigate(resource.path)">
-    <mat-card-header>
+    <mat-card-header class="card-header">
       <div class="avatar" mat-card-avatar>
         <fa-icon [icon]="resource.avatarIcon"></fa-icon>
       </div>
       <mat-card-title>{{resource.titleToTranslate | translate}}</mat-card-title>
       <mat-card-subtitle>{{resource.subtitleToTranslate | translate}}</mat-card-subtitle>
     </mat-card-header>
-    <mat-card-actions>
-      <button mat-button>{{'admin.home.button.edit' | translate}}</button>
-    </mat-card-actions>
   </mat-card>
 </div>

src/app/features/admin/components/routables/admin-home/admin-home.routable.scss

 @import "../sass/abstracts/variables";
 @import "../sass/abstracts/mixins";
 
+$card-width: 300px;
+$card-heigth: 85px;
+$card-margin: 10px;
+
 .cards-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 
   .card {
-    width: 300px;
-    margin: 10px;
     cursor: pointer;
+    width: $card-width;
+    height: $card-heigth;
+    margin: $card-margin;
+
+    transition-property: box-shadow;
+    transition-duration: 0.25s;
+
+    &:hover {
+      box-shadow: 0px 2px 20px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    }
 
-    .avatar {
+    .card-header {
       display: flex;
-      justify-content: center;
+      flex: 1;
+      height: 100%;
       align-items: center;
 
-      fa-icon {
-        font-size: 30px;
+      .avatar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        fa-icon {
+          font-size: 30px;
+        }
+      }
+
+      .mat-card-subtitle {
+        margin-bottom: 0;
       }
     }
   }