Cleans up visual design of header and reference files screen

src/_config.scss

@@ -65,3 +65,8 @@ $header-height-lg: ($uva-header-height + $site-header-height + $search-bar-heigh
 $brand-green: #64B343;
 $brand-green-muted: #8EC774;
 $brand-green-light: #B5D9A3;
+
+// Dimensions
+$easeDuration: 300ms;
+$animationDuration: 500ms;
+$header-height: 84px;

src/app/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav *ngIf="user">
+<nav class="mat-elevation-z6" id="globalHeader" *ngIf="user">
   <a
     [routerLink]="['/']"
     class="site-title mat-display-1"

src/app/navbar/navbar.component.scss

@@ -1,5 +1,13 @@
 @import "../../config";
 
+#globalHeader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+
 .flex-spacer {
   flex-grow: 1;
 }
@@ -8,18 +16,18 @@ nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 8px 16px;
+  padding: 0px 16px;
   background-color: $brand-primary;
   color: white;
-  height: 48px;
+  height: $header-height;
 
   .site-title {
     color: white;
-    font-size: 1.5rem;
-    line-height: 48px;
+    font-size: 1.5625rem;
+    font-weight: 500;
+    line-height: 84px;
     margin-bottom: 0;
     background-color: $brand-primary;
-    text-transform: uppercase;
 
     .logo {
       margin-right: 1rem;

src/app/reference-files/reference-files.component.html

@@ -2,11 +2,27 @@
   <h1>Reference Files</h1>
 
   <div *ngFor="let refFile of referenceFiles" fxLayout="row" fxLayoutGap="40px">
-    <h3>{{refFile.name}}</h3>
-    <div class="file-buttons" fxLayout="row" fxLayoutGap="10px">
-      <button mat-icon-button (click)="downloadFile(refFile)" color="primary"><mat-icon>save_alt</mat-icon></button>
-      <button mat-icon-button (click)="openFileDialog(refFile)" color="primary"><mat-icon>edit</mat-icon></button>
-    </div>
+    <mat-card class="mat-elevation-z0">
+      <mat-card-header>
+        <mat-card-title>
+          <h2>
+            <mat-icon>{{refFile.type | getIconCode}}</mat-icon>
+            {{refFile.name}}
+          </h2>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <hr>
+      </mat-card-content>
+      <mat-card-footer>
+        <button mat-button (click)="downloadFile(refFile)" color="primary">
+          <mat-icon>save_alt</mat-icon> Download existing version
+        </button>
+        <button mat-button (click)="openFileDialog(refFile)" color="primary">
+          <mat-icon>edit</mat-icon> Upload a new version
+        </button>
+      </mat-card-footer>
+    </mat-card>
   </div>
 </div>
 

src/app/reference-files/reference-files.component.scss

@@ -0,0 +1,6 @@
+@import "../../config";
+
+mat-card {
+  padding: 2em;
+  border: 1px solid $brand-gray;
+}

src/index.html

@@ -15,8 +15,8 @@
   </script>
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="favicon.ico" rel="icon" type="image/x-icon">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.typekit.net/kwp6dli.css">
   <link href="assets/css/diagram-js.css" rel="stylesheet">
   <link href="assets/css/dmn-js-decision-table.css" rel="stylesheet">
   <link href="assets/css/dmn-js-decision-table-controls.css" rel="stylesheet">

src/material-theme.scss

@@ -21,7 +21,7 @@
 
   body {
     margin: 0;
-    padding-top: 64px;
+    padding-top: $header-height;
   }
 
   mat-radio-button, .mat-checkbox {