Adding logo, updating navbar colors

mtlynch · Jul 16, 2018 · 25cbbf7 · 25cbbf7
1 parent da07d81
commit 25cbbf7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/src/app/_components/nav/nav.component.html b/src/app/_components/nav/nav.component.html
@@ -1,7 +1,7 @@
 <mat-toolbar color="primary" class="full-size">
-  <span class="site-name">
-    <a [routerLink]="['/']">Zestful</a>
-  </span>
+  <a class="logo-link" [routerLink]="['/']">
+    <img class="logo" src="assets/img/logo.png" />
+  </a>
 
   <span class="fill-remaining-space"></span>
 
@@ -17,9 +17,9 @@
   <button mat-icon-button class="menu-button" (click)="sidenav.toggle()">
     <mat-icon>menu</mat-icon>
   </button>
-  <span class="site-name">
-    <a [routerLink]="['/']">Zestful</a>
-  </span>
+  <a [routerLink]="['/']">
+    <img class="logo" src="assets/img/logo.png" />
+  </a>
 
   <span class="fill-remaining-space"></span>
 </mat-toolbar>

diff --git a/src/app/_components/nav/nav.component.scss b/src/app/_components/nav/nav.component.scss
@@ -6,23 +6,20 @@
 
 mat-toolbar.full-size {
   padding-left: 4%;
+  height: 73px;
   @include respond-to('small') {
     display: none;
   }
 }
 
 mat-toolbar.compressed {
   display: none;
-  padding-top: 10px;
   @include respond-to('small') {
+    padding-top: 5px;
     display: block;
   }
 }
 
-.menu-button {
-  margin-right: 45px;
-}
-
 .sidenav-container {
   flex: 1 0 auto;
   margin-top: 56px;
@@ -33,6 +30,15 @@ mat-toolbar.compressed {
   padding: 25px 35px;
 }
 
-.site-name a {
-  color: white;
+.logo-link {
+  max-height: 47px;
+}
+
+.logo {
+  max-height: 47px;
+  @include respond-to('small') {
+    max-height: 40px;
+    vertical-align: middle;
+    padding-left: 15px;
+  }
 }
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,4 +1,4 @@
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
 @import './breakpoints';
 @import './fonts';
 @import './icons';