fix custom css - it works now

Author: jaspeterson

makefile

@@ -19,7 +19,7 @@ IMAGE := ${DOCKER_URL}/${OWNER}/scheduler/${NAME}:${VERSION}
 
 .PHONY: all deps deploy docker-linux-amd64 docker-linux-arm
 
-all: clean deps dist/${NAME}-linux-amd64
+all: clean deps dist/${NAME}-linux-amd64 dist/web-dist
 
 deps:
 	@go mod download

web/src/app/components/book-page/book-page.component.html

@@ -1,4 +1,5 @@
-<mat-toolbar class="availability-toolbar" [ngStyle]="{'background-color': status.unoccupied? '#74be06' : '#E94037'}">
+<mat-toolbar class="availability-toolbar"
+  [ngStyle]="{'background-color': status.unoccupied? 'var(--room-available-color)' : 'var(--room-unavailable-color)'}">
   <button mat-icon-button class="back-button" (click)="routeToMain()">
     <mat-icon svgIcon="BackArrow" [inline]="true"></mat-icon>
   </button>

web/src/app/components/book-page/book-page.component.scss

@@ -1,16 +1,17 @@
 .availability-toolbar {
-  background-color: var(--room-available-color);
   height: 55px;
   color: var(--toolbar-text-color);
   font-size: 28px;
   font-style: oblique;
+  font-family: var(--main-font);
 }
 
 .back-button {
   background-color: transparent;
   color: var(--toolbar-text-color);
   border: 2px solid var(--toolbar-text-color);
   padding: 0px;
+  font-family: var(--button-font);
 }
 
 .toolbar-spacing {
@@ -50,6 +51,7 @@ app-time {
   width: 100%;
   margin-top: 2%;
   margin-left: 2%;
+  font-family: var(--main-font);
 }
 
 .event-label {
@@ -87,12 +89,14 @@ app-time {
   padding: 10px;
   width: 39% !important;
   border-bottom: 1px solid var(--booking-select-color);
+  font-family: var(--main-font);
 }
 
 .select-end-time {
   padding: 10px;
   width: 39% !important;
   border-bottom: 1px solid var(--booking-select-color);
+  font-family: var(--main-font);
 }
 
 mat-option {

web/src/app/components/main-page/main-page.component.html

@@ -1,11 +1,13 @@
-<mat-toolbar class="availability-toolbar" [ngStyle]="{'background-color': status.unoccupied? '#74be06' : '#E94037'}">
+<mat-toolbar class="availability-toolbar"
+  [ngStyle]="{'background-color': status.unoccupied? 'var(--room-available-color)' : 'var(--room-unavailable-color)'}">
 </mat-toolbar>
 
-<mat-grid-list cols="5" rowHeight="117.5px">
+<mat-grid-list cols="5" rowHeight="117.6px">
   <mat-grid-tile colspan="3" rowspan="2" class="grid-tile-status">
     <mat-card class="title-card">
       <mat-card-title class="room-title">{{ status.roomName }}</mat-card-title>
-      <mat-card-content class="room-availability" [ngStyle]="{'color': status.unoccupied? '#74be06' : '#E94037'}">
+      <mat-card-content class="room-availability"
+        [ngStyle]="{'color': status.unoccupied? 'var(--room-available-color)' : 'var(--room-unavailable-color)'}">
         <span *ngIf="status.unoccupied; else elseBlock">AVAILABLE</span>
         <ng-template #elseBlock>IN USE</ng-template>
       </mat-card-content>

web/src/app/components/main-page/main-page.component.scss

@@ -1,5 +1,6 @@
 .availability-toolbar {
   height: 55px;
+  font-family: var(--main-font);
 }
 
 .title-card {
@@ -8,6 +9,7 @@
   padding: 10%;
   margin-top: 15%;
   background-color: transparent;
+  font-family: var(--main-font);
 }
 
 .room-title {
@@ -16,7 +18,6 @@
 }
 
 .room-availability {
-  color: var(--room-available-color);
   font-size: 64px;
 }
 

web/src/app/components/schedule-page/schedule-page.component.html

@@ -1,4 +1,5 @@
-<mat-toolbar class="availability-toolbar" [ngStyle]="{'background-color': status.unoccupied? '#74be06' : '#E94037'}">
+<mat-toolbar class="availability-toolbar"
+  [ngStyle]="{'background-color': status.unoccupied? 'var(--room-available-color)' : 'var(--room-unavailable-color)'}">
   <button mat-icon-button class="back-button" (click)="routeToMain()">
     <mat-icon svgIcon="BackArrow" [inline]="true"></mat-icon>
   </button>

web/src/app/components/schedule-page/schedule-page.component.scss

@@ -1,16 +1,17 @@
 .availability-toolbar {
-  background-color: var(--room-available-color);
   height: 55px;
   color: var(--toolbar-text-color);
   font-size: 28px;
   font-style: oblique;
+  font-family: var(--main-font);
 }
 
 .back-button {
   background-color: transparent;
   color: var(--toolbar-text-color);
   border: 2px solid var(--toolbar-text-color);
   padding: 0px;
+  font-family: var(--button-font);
 }
 
 .toolbar-spacing {
@@ -31,6 +32,7 @@ app-time {
 .empty-schedule-message {
   color: var(--empty-schedule-message-color);
   font-size: 24px;
+  font-family: var(--main-font);
   text-align: center;
   padding-top: 35%;
   width: 100%;

web/src/app/components/time/time.component.scss

@@ -5,6 +5,7 @@
   box-sizing: border-box;
   margin-top: 10%;
   background-color: transparent;
+  font-family: var(--main-font);
 }
 
 .time-card-time {