Moved element styling to the css.

Updated the header banner.

src/app/app.component.css

+.side-nav {
+    margin-left: 0px; 
+    margin-right: 0px; 
+    margin-top: 0px; 
+    margin-bottom: 0px;
+}
+
+.main-content {
+    height: 100%;
+    width: 100%;
+    padding-top: 20px;
+}
+
 .empty-spacer {
-    flex: 1 1 auto;
-  }
+    margin: 10px;
+}
+
+.banner {
+    letter-spacing: 15px;
+    font-size: 22px;
+    font-family: Raleway;
+}
 
 .footer { 
     background-color: #303030;

src/app/app.component.html

@@ -9,10 +9,10 @@
 <!--<app-launcher></app-launcher>-->
 <div style="height: 100%" fxLayout="column">
 <mat-toolbar color="primary">
-              <mat-toolbar-row>
+              <mat-toolbar-row style="height: 80px">
                     <button mat-icon-button *ngIf="settingsService.useMenu$ | async" aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
-                    <img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
-                    <span>Strudel2</span>
+                    <span class="empty-spacer"></span>
+                    <span class="banner">STRUDEL</span>
                     <span fxFlex></span>
                     <span class="fill-horizontal-space"></span>
                     <button  mat-icon-button [matMenuTriggerFor]="actionmenu">
@@ -41,27 +41,27 @@
                                  matBadgeColor="warn" 
                                  matBadgeOverlap="false" matBadgeSize="small"
                                  style="text-align: left; margin-left: 15px; margin-top: 10px">
-                            {{ id.displayName() }} 
+                            {{ id.displayName() }}
                             </span>
                         </button>
                         </div>
                     </mat-menu>
                 </mat-toolbar-row>
 </mat-toolbar>
-<mat-sidenav-container fxFlex style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
+<mat-sidenav-container fxFlex class="side-nav">
     <mat-sidenav closed>
     </mat-sidenav>
     <mat-sidenav-content>
-        <div fxLayout="column" fxLayoutAlign="start none" style="height: 100%; width: 100%;">
+        <div fxLayout="column" fxLayoutAlign="start none" class="main-content">
           <router-outlet></router-outlet>
         </div>
     </mat-sidenav-content>
 </mat-sidenav-container>
 <mat-toolbar class="footer">
-    <span class="empty-spacer"></span>
+    <span fxFlex></span>
         <button mat-button disableRipple="true">About Us</button>
         <button mat-button disableRipple="true">Our services</button>
         <button mat-button disableRipple=true>Contact Us</button>
-    <span class="empty-spacer"></span>
+    <span fxFlex></span>
 </mat-toolbar>
 </div>