feat(stark-ui): stark logo added to showcase and in app-logo component

ISSUES CLOSED: NationalBankBelgium#738
Mallikki · Oct 22, 2018 · 6e51a0a · 6e51a0a
1 parent caff9a0
commit 6e51a0a
Show file tree

Hide file tree

Showing 17 changed files with 185 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="/assets/images/logo/stark_logo_black.svg" alt="Stark : a powerful front-end framework" width="226" height="50">
+</p>
+
 [![NPM version](https://img.shields.io/npm/v/@nationalbankbelgium/stark-core.svg)](https://www.npmjs.com/package/@nationalbankbelgium/stark-core)
 [![npm](https://img.shields.io/npm/dm/@nationalbankbelgium/stark-core.svg)](https://www.npmjs.com/package/@nationalbankbelgium/stark-core)
 [![Build Status](https://travis-ci.org/NationalBankBelgium/stark.svg?branch=master)](https://travis-ci.org/NationalBankBelgium/stark)
@@ -86,6 +90,11 @@ See [this page](/SNAPSHOTS.md) for more information about the process behind thi
 
 -   [@GitHub](https://github.com/christophercr)
 
+### Olivia Tournois
+
+-   [@Twitter](https://twitter.com/mallikki)
+-   [@GitHub](https://github.com/Mallikki)
+
 ## License
 
 This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).

diff --git a/showcase/src/assets-base/stark_logo.txt → ...ges/stark-core/assets/logo/stark_logo.txt b/showcase/src/assets-base/stark_logo.txt → ...ges/stark-core/assets/logo/stark_logo.txt
diff --git a/packages/stark-core/assets/logo/stark_logo_black.png b/packages/stark-core/assets/logo/stark_logo_black.png
diff --git a/packages/stark-core/assets/logo/stark_logo_black.svg b/packages/stark-core/assets/logo/stark_logo_black.svg
diff --git a/packages/stark-core/assets/logo/stark_logo_transparent.svg b/packages/stark-core/assets/logo/stark_logo_transparent.svg
diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
@@ -149,9 +149,10 @@ td {
     & i {
       margin: auto;
       display: block;
-      width: 220px;
-      height: 77px;
-      background: url("/assets/images/logo/logo-nbb-en.gif") no-repeat;
+      width: 200px;
+      height: 80px;
+      background: url("/assets/images/logo/stark_logo_transparent.svg") no-repeat;
+      background-size: 100% 100%;
     }
   }
   & content {

diff --git a/packages/stark-ui/assets/styles/_header.scss b/packages/stark-ui/assets/styles/_header.scss
@@ -65,21 +65,6 @@
         }
       }
     }
-
-    .stark-app-bar-page-title {
-      top: 60px;
-      left: 0;
-      position: absolute;
-      max-width: 100%;
-      h1 {
-        font-size: 24px;
-        font-weight: 200;
-        margin-bottom: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
   }
 }
 
@@ -103,6 +88,8 @@
         display: flex;
         justify-content: center;
         width: 34%;
+        align-self: center;
+        margin-bottom: 15px;
       }
       .stark-app-bar-content-right {
         flex-direction: column;
@@ -122,14 +109,6 @@
           }
         }
       }
-      .stark-app-bar-page-title {
-        bottom: auto;
-        max-width: 67%;
-        top: 75px;
-        h1 {
-          font-size: 32px;
-        }
-      }
     }
   }
 }
@@ -181,3 +160,16 @@
     }
   }
 }
+
+@media #{$mobile-only-query} {
+  .stark-app-bar-page-title {
+    top: 60px;
+    left: 0;
+    position: absolute;
+    max-width: 100%;
+    background-image: url(/assets-base/stark_logo_transparent.svg);
+    background-size: 100% 100%;
+    height: 35px;
+    width: 80px;
+  }
+}
diff --git a/packages/stark-ui/src/modules/app-logo/components/app-logo.component.scss b/packages/stark-ui/src/modules/app-logo/components/app-logo.component.scss
@@ -10,25 +10,12 @@
 .stark-app-logo {
   & i {
     display: block;
-    width: 60px;
-    height: 64px;
-    margin-top: 4px;
-    background-image: url(/assets/stark-ui/app-logo/angular.png); /* FIXME: add image for tablet */
+    width: 150px;
+    height: 60px;
+    margin-top: 0;
+    background-image: url(/assets-base/stark_logo_transparent.svg); /* FIXME: add image for tablet */
     background-size: 100% 100%;
   }
 }
 
-@media screen and #{$desktop-query} {
-  .stark-app-logo {
-    & i {
-      display: block;
-      width: 60px;
-      height: 64px;
-      margin-top: 0;
-      background-image: url(/assets/stark-ui/app-logo/angular.png); /* FIXME: add image for desktop */
-      background-size: 100% 100%;
-    }
-  }
-}
-
 /* END stark-ui: packages/stark-ui/src/modules/app-logo/components/app-logo.component.scss */
diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html
@@ -78,9 +78,7 @@
 								</button>
 							</div>
 						</div>
-
 						<div class="stark-app-bar-page-title">
-							<h1>Stark</h1>
 						</div>
 					</div>
 				</div>

diff --git a/showcase/src/app/app.component.scss b/showcase/src/app/app.component.scss
@@ -15,7 +15,7 @@
   }
 }
 
-@media #{$desktop-lg-query} {
+@media #{$tablet-query} {
   .stark-app-sidebar {
     .stark-app-sidenav-menu {
       .stark-app-logo {
@@ -24,3 +24,20 @@
     }
   }
 }
+
+@media #{$mobile-only-query} {
+  .stark-app-sidebar {
+    .stark-app-sidenav-menu {
+      .stark-app-logo {
+        & i {
+          display: block;
+          width: 150px;
+          height: 60px;
+          margin-top: 0;
+          background-image: url(/assets/stark-core/logo/stark_logo_black.svg);
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/showcase/src/app/home/_home.component.scss b/showcase/src/app/home/_home.component.scss
@@ -1,16 +1,8 @@
-//custom title for the header. Keep in mind that we define the font-size and color here because it is an exceptional case.
-//Should this style be reused elsewhere, it would be better to create a new style in stark-ui
-.about-title {
-  font-size: 30px;
-  margin-left: 15px;
-  color: mat-color($grey-palette, 100);
-}
-
 //set the header image
 .about-background {
-  background: url("/assets/images/banner/angular-banner.png") no-repeat center center;
-  background-size: cover;
-  height: 170px;
+  background: mat-color($primary-palette, 900) url("/assets/stark-core/logo/stark_logo_transparent.svg") no-repeat center center;
+  background-size: 150px 60px;
+  height: 100px;
   display: flex;
   align-items: center;
   margin-bottom: 20px;
@@ -52,7 +44,8 @@
   }
 
   .about-background {
-    height: 250px;
+    height: 150px;
+    background-size: 250px 100px;
   }
 }
 
@@ -62,6 +55,27 @@
   }
 
   .about-background {
-    height: 230px;
+    height: 100px;
+    background-size: 150px 60px;
+  }
+}
+
+@media #{$tablet-query} {
+  .stark-app-bar-content-center {
+    align-self: center;
+    margin-bottom: 15px;
+  }
+}
+
+@media #{$mobile-only-query} {
+  .stark-app-bar-page-title {
+    top: 60px;
+    left: 0;
+    position: absolute;
+    max-width: 100%;
+    background-image: url(/assets/stark-core/logo/stark_logo_transparent.svg);
+    background-size: 100% 100%;
+    height: 30px;
+    width: 75px;
   }
 }
diff --git a/showcase/src/app/home/home.component.html b/showcase/src/app/home/home.component.html
@@ -1,5 +1,4 @@
 <section class="stark-section about-background">
-	<h1 class="about-title" [innerHTML]= "'SHOWCASE.HOMEPAGE.MAIN_TITLE' | translate"></h1>
 </section>
 <p class="mat-body-2 light-font" [innerHTML]="'SHOWCASE.HOMEPAGE.DESCRIPTION_BEFORE_DETAIL' | translate">
 </p>

diff --git a/showcase/src/app/news/news-component/_news.component.scss b/showcase/src/app/news/news-component/_news.component.scss
@@ -7,10 +7,10 @@
 }
 
 .second-news-image {
-  background: url("/assets-base/stark_logo_white.png") no-repeat center center;
-  width: 250px;
-  height: 60px;
-  background-size: contain;
+  background: url("/assets/stark-core/logo/stark_logo_black.svg") no-repeat center center;
+  width: 180px;
+  height: 70px;
+  background-size: 100% 100%;
 }
 
 @media #{$desktop-query} {

diff --git a/showcase/src/assets-base/stark_logo.xcf b/showcase/src/assets-base/stark_logo.xcf
diff --git a/showcase/src/assets-base/stark_logo_blue.png b/showcase/src/assets-base/stark_logo_blue.png
diff --git a/showcase/src/assets-base/stark_logo_white.png b/showcase/src/assets-base/stark_logo_white.png
diff --git a/starter/src/app/app.component.html b/starter/src/app/app.component.html
@@ -49,7 +49,6 @@
 						</div>
 
 						<div class="stark-app-bar-page-title">
-							<h1>{{ name }}</h1>
 						</div>
 					</div>
 				</div>