From 9c61914a8c36c0a119ffa295a215df1aabbc83a6 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Tue, 28 May 2019 01:16:55 +0200
Subject: [PATCH] x to close toaster

---
 src/app/ui/styles/tooltip-styles.js |  1 +
 src/app/ui/tooltip.js               | 17 +++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/ui/styles/tooltip-styles.js b/src/app/ui/styles/tooltip-styles.js
index c82785f030..da1bcdd904 100644
--- a/src/app/ui/styles/tooltip-styles.js
+++ b/src/app/ui/styles/tooltip-styles.js
@@ -15,6 +15,7 @@ var css = csjs`
     font-size: 14px;
     text-align: center;
     bottom: 0;
+    flex-direction: row;
   }
   @-webkit-keyframes animatebottom  {
     0% {bottom: -300px}
diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
index bf66c16e6a..4fde6d5f72 100644
--- a/src/app/ui/tooltip.js
+++ b/src/app/ui/tooltip.js
@@ -25,8 +25,7 @@ class Toaster {
   render (tooltipText, action, opts) {
     opts = defaultOptions(opts)
     let canShorten = true
-    if (tooltipText instanceof Element)
-    {
+    if (tooltipText instanceof Element) {
       canShorten = false
     } else {
       if (typeof tooltipText === 'object') {
@@ -45,16 +44,22 @@ class Toaster {
       const shortTooltipText = (canShorten && tooltipText.length > 201) ? tooltipText.substring(0, 200) + '...' : tooltipText
 
       let button = tooltipText.length > 201 ? yo`
-      <button class="btn btn-secondary btn-sm" onclick=${() => { modal.alert(tooltipText) }}>show full message</button>
+      <button class="btn btn-secondary btn-sm mx-3" style="white-space: nowrap;" onclick=${() => { modal.alert(tooltipText) }}>See full error</button>
       ` : ``
 
       this.tooltip = yo`
-        <div class="${css.tooltip} alert alert-info" onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
-          <span>
+        <div class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
+          <span class="px-2">
             ${shortTooltipText}
             ${button}
+            ${action}
+          </span>
+          <span style="align-self: baseline;">
+            <button class="fas fa-times btn-info mx-1 p-0" onclick=${() => {
+              this.hide()
+              resolve()
+            }}></button>
           </span>
-          ${action}
         </div>`
       let timeOut = () => {
         return setTimeout(() => {