accessibility low hanging fruits

goofy-client/apps/goofy/src/styles/abstracts/_variables.scss

 @import "~@angular/material/theming";
 
+$grey: #777;
 
 $background: #fafafa;
 $dark-background: #303030;

goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss

+@import "variables";
+
 :host {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	font-size: 12px;
-	color: #999;
+	color: #666;
 	padding: 4px 8px;
 	transform: rotate(-90deg) translate(100%, 0);
 	transform-origin: right bottom;

goofy-client/libs/navigation/src/lib/header-container/header/header.component.html

 <header>
 	<div class="left">
-		<button mat-icon-button (click)="toggleMenuEvent.emit(!this.navigationCollapse)">
-		<mat-icon>menu</mat-icon></button>
+		<goofy-client-icon-button-with-spinner icon="menu" (clickEmitter)="toggleMenuEvent.emit(!this.navigationCollapse)">
+		</goofy-client-icon-button-with-spinner>
 		<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 			<img src="/assets/img/logo.svg" alt="Goofy Logo" />
 			<h1 data-test-id='title'>Goofy</h1>
@@ -16,7 +16,7 @@
 
 		<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
 
-		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
+		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="button with user icon" data-test-id="user-icon-button">
 			<goofy-client-user-icon></goofy-client-user-icon>
 		</button>
 

goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss

@@ -55,7 +55,7 @@ img {
 }
 
 .right {
-	color: #999;
+	color: $grey;
 	display: flex;
 	align-items: center;
 }

goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html

-<button mat-icon-button [matMenuTriggerFor]="settingsMenu"><mat-icon>settings</mat-icon></button>
+<goofy-client-icon-button-with-spinner icon="settings" [matMenuTriggerFor]="settingsMenu"></goofy-client-icon-button-with-spinner>
 <mat-menu #settingsMenu="matMenu" >
 	<div class="menu-container"
 		(click)="$event.stopPropagation()">

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss

+@import "variables";
+
 .user-profile {
 	width: 36px;
 	height: 36px;
@@ -16,7 +18,7 @@
 }
 
 mat-icon {
-	color: #999;
+	color: $grey;
 	position: absolute;
 	left: 50%;
 	top: 50%;