From bcc845fec0d0365e7eea6f34c6361a35882f2932 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Fri, 12 Apr 2019 18:13:07 +0200
Subject: [PATCH] - layout adjustments in deploy tab - click on title of the
 card is opening it - removed shortut info from tooltips untill farther
 desition - fixed tiny bug on icon panel colors

arrow
---
 .../components/vertical-icons-component.js    | 44 +++++++++++++++----
 src/app/tabs/runTab/contractDropdown.js       |  2 +-
 src/app/tabs/styles/run-tab-styles.js         |  2 +
 src/app/ui/card.js                            | 12 +++--
 src/framingService.js                         |  1 -
 5 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js
index ed5cffb4f7..54659671c2 100644
--- a/src/app/components/vertical-icons-component.js
+++ b/src/app/components/vertical-icons-component.js
@@ -33,6 +33,11 @@ class VerticalIconComponent {
     })
     this.store.event.on('add', (api) => { })
     this.store.event.on('remove', (api) => { })
+
+    let themeModule = globalRegistry.get('themeModule').api
+    themeModule.events.on('themeChanged', (type) => {
+      this.onThemeChanged(type)
+    })
   }
 
   stopListenOnStatus (api) {
@@ -58,7 +63,7 @@ class VerticalIconComponent {
    * @param {ModuleProfile} profile The profile of the module
    */
   addIcon ({kind, name, icon, displayName, tooltip}) {
-    let title = (displayName || name) + " " + tooltip
+    let title = (displayName || name)// + (tooltip ? tooltip : "")
     this.icons[name] = yo`
       <div
         class="${css.icon}"
@@ -108,30 +113,51 @@ class VerticalIconComponent {
   }
 
   /**
-   * Set an icon as active
-   * @param {string} name Name of profile of the module to activate
+   *  Remove active for the current activated icons
    */
-  select (name) {
-    const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
-    const invert = themeType === 'dark' ? 1 : 0
-    // Remove active for the current activated icons
+  removeActive () {
     const currentActive = this.view.querySelector(`.${css.active}`)
     if (currentActive) {
       currentActive.classList.remove(css.active)
       let image = currentActive.querySelector('.image')
       image.style.setProperty('filter', 'invert(0.5)')
     }
-    // Add active for the new activated icon
+  }
+
+  /**
+   *  Add active for the new activated icon
+   * @param {string} name Name of profile of the module to activate
+   */
+  addActive (name) {
+    const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
+    const invert = themeType === 'dark' ? 1 : 0
     const nextActive = this.view.querySelector(`[plugin="${name}"]`)
     if (nextActive) {
       let image = nextActive.querySelector('.image')
       nextActive.classList.add(css.active)
       image.style.setProperty('filter', `invert(${invert})`)
     }
+  }
 
+  /**
+   * Set an icon as active
+   * @param {string} name Name of profile of the module to activate
+   */
+  select (name) {
+    this.removeActive()
+    this.addActive(name)
     this.events.emit('showContent', name)
   }
 
+  onThemeChanged (themeType) {
+    const invert = themeType === 'dark' ? 1 : 0
+    const active = this.view.querySelector(`.${css.active}`)
+    if (active) {
+      let image = active.querySelector('.image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
   _iconClick (name) {
     this.select(name)
   }
@@ -223,7 +249,7 @@ const css = csjs`
     height: 28px;
     padding: 4px;
   }
-  .icon[title='Settings (Ctrl+Shift+S)'] {
+  .icon[title='Settings'] {
     position: absolute;
     bottom: 0;
   }
diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index f1fe65a73d..fe1fdfeecd 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/src/app/tabs/runTab/contractDropdown.js
@@ -44,7 +44,7 @@ class ContractDropdownUI {
   }
 
   render () {
-    this.compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
+    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
     var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
 
     this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index 22cad94489..d0cd577a55 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -12,6 +12,7 @@ var css = csjs`
     font-size: 12px;
     display: flex;
     justify-content: space-between;
+    padding-left: 15px;
   }
   .settings {
     margin-bottom: 2%;
@@ -141,6 +142,7 @@ var css = csjs`
   .noInstancesText {
     font-style: italic;
     text-align: left;
+    padding-left: 15px;
   }
   .pendingTxsText {
     font-style: italic;
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
index b0b96589ea..c01bec663e 100644
--- a/src/app/ui/card.js
+++ b/src/app/ui/card.js
@@ -16,17 +16,15 @@ module.exports = class Card {
     if (self._view.el) return self._view.el
 
     self._view.cardBody = yo`<div class=${css.cardBody}></div>`
-    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-down"
-    onclick=${(ev) => trigger(ev.target)}></i>`
+    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-down" onclick="${(e) => trigger(ev.target)}"></i>`
 
     self._view.expandCollapseButton = yo`
     <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
 
     self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
-
     self._view.cardHeader = yo`
-    <div class=${css.cardHeader}>
-      <div class=${css.cardTitles}>
+    <div class=${css.cardHeader} onclick=${() => trigger(self._view.arrow)}>
+      <div class="p-1 ${css.cardTitles}">
         <div class=${css.cardTitle}>${self._opts.title}</div>
         ${self._view.statusBar}
       </div>
@@ -43,7 +41,7 @@ module.exports = class Card {
 
     // HTML
     self._view.el = yo`
-      <div class="${css.cardContainer} list-group-item">
+      <div class="${css.cardContainer} p-2 list-group-item">
         ${self._view.cardHeader}
         ${self._view.cardBody}
       </div>`
@@ -55,7 +53,7 @@ module.exports = class Card {
 
 const css = csjs`
   .cardContainer {
-    padding: 10px 15px 15px 0;
+    padding             : 10px 15px 15px 0;
     margin-bottom       : 2%;
   }
   .cardHeader {
diff --git a/src/framingService.js b/src/framingService.js
index 48ba58beb3..7bfbfd066e 100644
--- a/src/framingService.js
+++ b/src/framingService.js
@@ -14,7 +14,6 @@ export default {
     verticalIconApi.select('fileExplorers')
     mainPanelApi.showContent('home')
 
-
     document.addEventListener('keypress', (e) => {
       if (e.shiftKey && e.ctrlKey) {
         if (e.code === 'KeyF') { // Ctrl+Shift+F