Added migration warning

- Created sticky warning at the top of app to encourage migration to an official wallet app
josemmo · Apr 18, 2021 · 8f222f0 · 8f222f0
1 parent 0dd9748
commit 8f222f0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,14 @@
   <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
 </head>
 <body>
+  <!-- WARNING -->
+  <div class="top-warning">
+    <span>
+      Consider migrating to <a href="https://trinity.iota.org/" target="_blank">Trinity</a>
+      or <a href="https://github.com/iotaledger/firefly" target="_blank">Firefly</a>
+    </span>
+  </div>
+
   <!-- NAVBAR -->
   <nav class="navbar navbar-expand p-0">
     <a class="navbar-brand" href="/"></a>

diff --git a/src/scss/constants.scss b/src/scss/constants.scss
@@ -19,5 +19,6 @@
 $color-primary: #04a997;
 $color-secondary: #6345b8;
 $color-gray: #495057;
+$warning-height: 25px;
 $navbar-height: 50px;
 $sidebar-width: 50px;
diff --git a/src/scss/navbar.scss b/src/scss/navbar.scss
@@ -17,7 +17,29 @@
  */
 
 body {
-  margin-top: $navbar-height;
+  margin-top: $warning-height + $navbar-height;
+}
+
+/* TOP WARNING */
+.top-warning {
+  display: flex;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: $warning-height;
+  background: #d30543;
+  color: #fff;
+  text-align: center;
+  font-size: 0.8em;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  a {
+    color: inherit;
+    font-weight: bold;
+  }
 }
 
 
@@ -26,7 +48,7 @@ body {
   position: fixed;
   left: 0;
   right: 0;
-  top: 0;
+  top: $warning-height;
   background: $color-primary;
   color: #fff;
   overflow: hidden;