Adds new logo in header

Author: Ismaestro

README.md

@@ -17,7 +17,6 @@
 [![GitHub forks](https://img.shields.io/github/forks/ismaestro/angular7-example-app.svg?style=social&label=Fork)](https://github.com/ismaestro/angular7-example-app/fork)
 [![GitHub stars](https://img.shields.io/github/stars/ismaestro/angular7-example-app.svg?style=social&label=Star)](https://github.com/ismaestro/angular7-example-app)
 
-<img src="Logotype Primary.png" width="60%" height="60%" />
 
 ## [LIVE DEMO](http://angularexampleapp.com/)
 
@@ -136,14 +135,16 @@ We use Travis CI to run this tasks in order:
 
 This repo is using Firebase. We use Cloud Firestore and Cloud Storage to handle CRUD operations over the heroes and to store their images.
 
-## License
-
-MIT
-
 ## Contributors
 
-Thanks to all contributors and their support! 
+Thanks to all contributors and their support:
+[mansya](https://github.com/mansya) - App logo!
+
 If you have an idea or you want to do something, tell me or just do it!
 I'm always happy to hear your feedback!
 
+## License
+
+MIT
+
 Enjoy :metal:

src/app/shared/components/header/header.component.html

@@ -1,6 +1,12 @@
 <header>
   <nav>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
+      <div id="logo">
+        <a href="/">
+          <img matTooltip="{{'Thank\'s mansya!' | translate}}"
+               [matTooltipPosition]="'below'" src="assets/images/logo.svg">
+        </a>
+      </div>
       <div fxFlex="40">
         <a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
           {{item.name | translate | uppercase}}

src/app/shared/components/header/header.component.scss

@@ -43,6 +43,26 @@
       #today {
         font-size: 0.7rem;
       }
+
+      #logo {
+        display: flex;
+        margin-right: 1rem;
+
+        a {
+          width: 4.25rem;
+          height: 4.25rem;
+
+          img {
+            width: 100%;
+            height: auto;
+            opacity: 0.8;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -51,6 +71,10 @@
   #today {
     width: 50%;
   }
+
+  #logo {
+    display: none;
+  }
 }
 
 @media (max-width: 680px) {