Add DBot banner to Binary Bot

binary-com · aaimio · May 4, 2020 · Dec 20, 2019 · Jan 9, 2020 · Jan 9, 2020
commit 735635895f0c801b8bc59f7b73d34e0545bcc046
diff --git a/static/css/bot.scss b/static/css/bot.scss
@@ -215,4 +215,60 @@ label {
 
 .notifyjs-corner {
     z-index: 10001 !important;
-}
+}
+
+.dbot-banner {
+    align-items: center;
+    display: flex;
+    float: left;
+    height: calc(100% - 20px);
+    margin: 10px 0;
+
+    &__icon {
+        margin-right: 8px;
+        margin-left: 32px;
+    }
+    &__ad {
+        color: #fff;
+        margin-right: 32px;
+
+        &-title {
+            font-size: 14px;
+            line-height: 1.43;
+        }
+        &-subtitle {
+            font-size: 16px;
+            font-weight: bold;
+            line-height: 1.5;
+        }
+    }
+    &__button {
+        font-size: 14px;
+        background-color: #ff444f;
+        font-weight: bold;
+        width: 120px;
+
+        &:hover {
+            background: #eb3e48;
+        }
+    }
+    &__separator {
+        width: 2px;
+        height: 100%;
+        background-color: #17212c;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .dbot-banner {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 769px) {
+    .dbot-banner {
+        &__separator {
+            display: none;
+        }
+    }
+}
diff --git a/static/image/d-bot.svg b/static/image/d-bot.svg
diff --git a/templates/bot.mustache b/templates/bot.mustache
@@ -69,6 +69,19 @@
                 </a>
             </div>
         </div>
+        <a href="https://deriv.app/bot" target="_blank">
+            <div class="dbot-banner">
+                <div class="dbot-banner__separator"></div>
+                <div class="dbot-banner__icon">
+                    <img src="./image/d-bot.svg">
+                </div>
+                <div class="dbot-banner__ad">
+                    <div class="dbot-banner__ad-title" data-i18n-text="Experience DBot"></div>
+                    <div class="dbot-banner__ad-subtitle" data-i18n-text="Our new bot builder"></div>
+                </div>
+                <button class="dbot-banner__button" data-i18n-text="Try DBot"></button>
+            </div>
+        </a>
         <div class="right-header show-on-load">
             <div class="intro-login-logout">
                 <div id="account-list">