Added experimental mode logo change.

altair-graphql · Jun 9, 2019 · e6c69b6 · e6c69b6
1 parent 7f04783
commit e6c69b6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/app/containers/app/app.component.html b/src/app/containers/app/app.component.html
@@ -24,8 +24,15 @@
     <app-smart-input *ngIf="false"></app-smart-input>
     <app-fancy-input *ngIf="false"></app-fancy-input>
     <header class="header">
-      <div class="branding">
-        <img src="assets/img/logo.svg" alt="logo" class="header-logo">
+      <div
+        class="branding header-logo-wrapper"
+        [ngClass]="{ 'header-logo-wrapper--experimental': (settings$ | async).enableExperimental }"
+      >
+        <img
+          src="assets/img/logo.svg"
+          alt="logo"
+          class="header-logo"
+        >
       </div>
       <app-window-switcher
         [windows]="windows"

diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
@@ -2,6 +2,7 @@
   box-shadow: 0 0px 5px 2px rgba(var(--rgb-black), 0.1);
   background: var(--header-bg-color);
   .branding {
+    position: relative;
     padding: 0;
     justify-content: center;
     min-width: 65px;
@@ -18,6 +19,23 @@
 .header-logo {
   width: 30px;
 }
+.header-logo-wrapper--experimental {
+  mix-blend-mode: luminosity;
+
+  &:before {
+    content: '🔥Dev🔥';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    color: var(--theme-font-color);
+    text-transform: uppercase;
+    font-size: 10px;
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+  }
+}
 
 .header__environemnt-link {
   padding: 3px 5px;