Merge pull request #1801 from ethereum/swap_it_style_fixes_l

style fixes

src/app/components/swap-panel-component.js

@@ -77,7 +77,7 @@ const css = csjs`
   }
   .plugItIn       {
     display        : none;
-    height: calc(100% - 50px);
+    height         : 100%;
   }
   .plugItIn > div {
     overflow-y     : auto;
@@ -95,8 +95,8 @@ const css = csjs`
     text-transform: uppercase;
   }
   .swapitHeader {
-    height: 50px;
+    height: 35px;
-    padding-top: 16px;
+    padding-top: 10px;
     padding-left: 27px;
   }
 `

src/app/editor/editor.js

@@ -101,6 +101,35 @@ class Editor {
 
     // Unmap ctrl-t & ctrl-f
     this.editor.commands.bindKeys({ 'ctrl-t': null })
+
+    // shortcuts for "Ctrl-"" and "Ctrl+"" to increase/decrease font size of the editor
+    this.editor.commands.addCommand({
+      name: 'increasefontsizeEqual',
+      bindKey: {win: 'Ctrl-=', mac: 'Command-='},
+      exec: (editor) => {
+        this.editorFontSize(1)
+      },
+      readOnly: true
+    })
+
+    this.editor.commands.addCommand({
+      name: 'increasefontsizePlus',
+      bindKey: {win: 'Ctrl-+', mac: 'Command-+'},
+      exec: (editor) => {
+        this.editorFontSize(1)
+      },
+      readOnly: true
+    })
+
+    this.editor.commands.addCommand({
+      name: 'decreasefontsize',
+      bindKey: {win: 'Ctrl--', mac: 'Command--'},
+      exec: (editor) => {
+        this.editorFontSize(-1)
+      },
+      readOnly: true
+    })
+
     this.editor.setShowPrintMargin(false)
     this.editor.resize(true)
 
@@ -247,7 +276,10 @@ class Editor {
    * @param {number} incr The amount of pixels to add to the font.
    */
   editorFontSize (incr) {
-    this.editor.setFontSize(this.editor.getFontSize() + incr)
+    let newSize = this.editor.getFontSize() + incr
+    if (newSize >= 6) {
+      this.editor.setFontSize(newSize)
+    }
   }
 
   /**

src/app/files/styles/file-explorer-styles.js

@@ -19,7 +19,7 @@ var css = csjs`
     padding           : 4px;
   }
   .newFile            {
-    padding-right     : 5px;
+    padding-right     : 10px;
   }
   .newFile i          {
     cursor            : pointer;

src/app/panels/styles/terminal-styles.js

@@ -13,7 +13,6 @@ var css = csjs`
   .bar                {
     display           : flex;
     min-height        : 3em;
-    padding           : 2px;
     z-index           : 3;
   }
   .menu               {
@@ -35,7 +34,8 @@ var css = csjs`
   }
   .toggleTerminal              {
     margin-right      : 20px;
-    margin-left       : 20px;
+    margin-left       : 2px;
+    margin-top        : 2px;
     font-size         : 14px;
     font-weight       : bold;
     cursor            : pointer;
@@ -138,7 +138,7 @@ var css = csjs`
     display           : flex;
     justify-content   : center;
     align-items       : center;
-    font-size         : 10px;
+    font-size         : 14px;
   }
   .dragbarHorizontal  {
     position          : absolute;

src/app/panels/tab-proxy.js

@@ -102,18 +102,12 @@ export class TabProxy {
     this._view.filetabs.canAdd = false
 
     this._view.tabs = yo`
-      <div>
+      <div style="width: 100%; height: 100%;">
         ${this._view.filetabs}
       </div>
     `
     let tabsbar = yo`
-      <div class="d-flex border-bottom">
+      <div class="d-flex align-items-center" style="max-height: 35px; height: 100%">
-        <div class="m-1">
-          <span class="p-1">
-            <i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
-            <i class="m-1 fa fa-minus" style="color: var(--text-dark)" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
-          </span>
-        </div>
         ${this._view.tabs}
       </div>
     `
@@ -138,8 +132,6 @@ export class TabProxy {
       return false
     })
 
-    function increase () { self.editor.editorFontSize(1) }
-    function decrease () { self.editor.editorFontSize(-1) }
     return tabsbar
   }
 }

src/app/panels/terminal.js

@@ -120,7 +120,7 @@ class Terminal {
     `
     self._view.icon = yo`
       <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-      class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
+      class="btn btn-secondary align-items-center ${css.toggleTerminal} fa fa-angle-double-down"></i>`
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
@@ -143,7 +143,7 @@ class Terminal {
           </div>
           ${self._view.dropdown}
           <div class=${css.search}>
-            <i class="fa fa-search ${css.searchIcon} bg-light btn-light" aria-hidden="true"></i>
+            <i class="fa fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
             <input spellcheck="false" type="text" class="${css.filter} form-control" onkeydown=${filter}  placeholder="Search transactions">
           </div>
         </div>
@@ -158,7 +158,7 @@ class Terminal {
       </div>
     `
     self._view.el = yo`
-      <div class="${css.panel}" style="height: 180px;">
+      <div class="border ${css.panel}" style="height: 180px;">
         ${self._view.bar}
         ${self._view.term}
       </div>

src/app/ui/landing-page/landing-page.js

@@ -82,7 +82,7 @@ export class LandingPage extends ApiFactory {
         description: ``,
         payload: () => { this.alert(`-imported from gist-`) }
       },
-      { label: 'Import from gist',
+      { label: 'Import from Gist',
         type: `callback`,
         description: ``,
         payload: () => {