fix(Login): Logo for dark context (#13)

AxaFrance · May 27, 2020 · 92d32bf · 92d32bf
1 parent 295f2c5
commit 92d32bf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/public/assets/logo-skizzle-dark-context.svg b/public/assets/logo-skizzle-dark-context.svg
diff --git a/src/layouts/Login/Login.scss b/src/layouts/Login/Login.scss
@@ -12,6 +12,10 @@
     animation: slideUp 0.7s;
     animation-fill-mode: both;
     animation-timing-function: ease-in-out;
+
+    &--dark {
+      display: none;
+    }
   }
 
   &__intro {
@@ -46,13 +50,13 @@
     }
 
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       left: 1rem;
       top: 50%;
       width: 1.5rem;
       height: 1.5rem;
-      background: url('../assets/logo-azure-devops.png') no-repeat;
+      background: url("../assets/logo-azure-devops.png") no-repeat;
       background-size: cover;
       transform: translateY(-50%);
     }
@@ -70,6 +74,14 @@
   .skz-login {
     background-color: #333;
 
+    &__logo {
+      display: none;
+
+      &--dark {
+        display: block;
+      }
+    }
+
     &__intro {
       color: #fff;
     }

diff --git a/src/layouts/Login/Login.svelte b/src/layouts/Login/Login.svelte
@@ -10,6 +10,11 @@ const { ipcRenderer } = require('electron');
     src="./assets/logo-skizzle.svg"
     alt="Skizzle"
   />
+  <img
+    class="skz-login__logo skz-login__logo--dark"
+    src="./assets/logo-skizzle-dark-context.svg"
+    alt="Skizzle"
+  />
   <p class="skz-login__intro">
     Skizzle vous permet de regrouper les pull requests de vos équipes. <br/>Pour commencer <b>connectez vous</b> avec votre compte.
   </p>