Merge pull request #1657 from dvdptr/feat/new-theme-david

src/app/panels/righthand-panel.js

@@ -27,10 +27,11 @@ const css = csjs`
   }
   .dragbar             {
     position           : absolute;
-    width              : 0.5em;
+    width              : ${styles.rightPanel.dragbarWidth};
     top                : 3em;
     bottom             : 0;
     cursor             : col-resize;
+    background-color   : ${styles.rightPanel.dragbarBackgroundColor};
     z-index            : 999;
     border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
   }

src/app/panels/styles/file-panel-styles.js

@@ -82,7 +82,7 @@ var css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : 2px solid hsla(215, 81%, 79%, .3);
+    border-right      : ${styles.leftPanel.dragbarBorderRight};
   }
   .ghostbar           {
     width             : 3px;

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

@@ -78,7 +78,7 @@ var css = csjs`
     line-height       : 2ch;
     padding           : 1ch;
     margin-top        : 2ch;
-    border-top        : 0.07ch solid ${styles.colors.veryLightGrey};
+    border-top        : ${styles.terminal.blockBorderTop};
     color             : ${styles.appProperties.mainText_Color};
   }
   .cli                {

src/app/tabs/settings-tab.js

@@ -26,7 +26,7 @@ module.exports = class SettingsTab {
       el: null,
       optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
       pluginInput: null, versionSelector: null, version: null,
-      theme: { dark: null, light: null },
+      theme: { dark: null, light: null, clean: null },
       plugins: {},
       config: {
         general: null, themes: null,
@@ -66,6 +66,7 @@ module.exports = class SettingsTab {
 
     self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="${css.col1}" name="theme" id="themeLight" type="radio">`
     self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">`
+    self._view.theme.clean = yo`<input onchange=${onswitch2cleanTheme} class="${css.col1}" name="theme" id="themeClean" type="radio">`
     self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked')
 
     self._view.config.general = yo`
@@ -112,6 +113,10 @@ module.exports = class SettingsTab {
           ${self._view.theme.dark}
           <label for="themeDark">Dark Theme</label>
         </div>
+        <div class="${css.crow}">
+          ${self._view.theme.clean}
+          <label for="themeClean">Clean Theme</label>
+        </div>
       </div>`
     self._view.config.plugins = yo`<div></div>`
     self._view.config.plugin = yo`
@@ -195,6 +200,10 @@ module.exports = class SettingsTab {
       styleGuide.switchTheme('light')
       window.location.reload()
     }
+    function onswitch2cleanTheme (event) {
+      styleGuide.switchTheme('clean')
+      window.location.reload()
+    }
     function onchangePersonal (event) {
       self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode'))
     }

src/app/tabs/styles/run-tab-styles.js

@@ -130,15 +130,15 @@ var css = csjs`
     ${styles.rightPanel.runTab.button_transaction}
   }
   .atAddress {
-    ${styles.rightPanel.runTab.button_atAddress}
+    margin: 0;
     min-width: 100px;
     width: 100px;
     font-size: 10px;
-    margin: 0;
     word-break: inherit;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
+    ${styles.rightPanel.runTab.button_atAddress}
   }
   .atAddressSect {
     margin-top: 6px;

src/app/ui/styles-guide/style-guide.js

@@ -411,6 +411,7 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -460,6 +461,8 @@ function styleGuide () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_Log_Succeed: appProperties.success_BorderColor,
       icon_Color_Log_Failed: appProperties.errorText_Color,
       icon_BackgroundColor_Log_Call: appProperties.infoText_Color,
@@ -514,6 +517,8 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

src/app/ui/styles-guide/styleGuideDark.js

@@ -418,6 +418,7 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -467,6 +468,8 @@ function styleGuideDark () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
       icon_Color_Menu: appProperties.icon_Color,
@@ -516,6 +519,8 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

src/app/ui/styles-guide/theme-chooser.js

 var styleGuideLight = require('./style-guide')
 var styleGuideDark = require('./styleGuideDark')
+var styleGuideClean = require('./styleGuideClean')
 var Storage = require('remix-lib').Storage
+
 module.exports = {
 
   chooser: function () {
@@ -8,6 +10,8 @@ module.exports = {
     if (themeStorage.exists('theme')) {
       if (themeStorage.get('theme') === 'dark') {
         return styleGuideDark()
+      } else if (themeStorage.get('theme') === 'clean') {
+        return styleGuideClean()
       } else {
         return styleGuideLight()
       }
@@ -23,6 +27,8 @@ module.exports = {
       return styleGuideDark()
     } else if (theme === 'light') {
       return styleGuideLight()
+    } else if (theme === 'clean') {
+      return styleGuideClean()
     } else {
       return styleGuideLight()
     }