Merge pull request #2273 from ethcore/jg-header-background

header background, theme adjustments (not that harsh)
openethereum · Sep 23, 2016 · bd3276d · bd3276d
2 parents f837544 + 7d45c0c
commit bd3276d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 33 deletions.
diff --git a/js/src/ui/Actionbar/actionbar.css b/js/src/ui/Actionbar/actionbar.css
@@ -15,8 +15,10 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .actionbar {
-  padding: 0.5em 24px !important;
+  padding: 0 24px !important;
+  margin-bottom: 1.5em;
   height: auto !important;
+  background: rgba(0, 0, 0, 0.25) !important;
 }
 
 .tooltitle {
@@ -29,4 +31,9 @@
 
 .toolbuttons button {
   margin: 10px 0 10px 16px !important;
+  color: white !important;
+}
+
+.toolbuttons svg {
+  fill: white !important;
 }
diff --git a/js/src/ui/ParityBackground/parityBackground.js b/js/src/ui/ParityBackground/parityBackground.js
@@ -23,15 +23,16 @@ export default class ParityBackground extends Component {
 
   static propTypes = {
     children: PropTypes.node,
-    className: PropTypes.string
+    className: PropTypes.string,
+    gradient: PropTypes.string
   }
 
   render () {
-    const { children, className } = this.props;
+    const { children, className, gradient } = this.props;
     const { muiTheme } = this.context;
 
     return (
-      <div className={ className } style={ muiTheme.parity.getBackgroundStyle() }>
+      <div className={ className } style={ muiTheme.parity.getBackgroundStyle(gradient) }>
         { children }
       </div>
     );

diff --git a/js/src/ui/Theme/theme.js b/js/src/ui/Theme/theme.js
@@ -29,9 +29,9 @@ muiTheme.raisedButton.primaryTextColor = 'white';
 muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
 muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.9)';
 muiTheme.tabs = lightTheme.tabs;
-muiTheme.tabs.backgroundColor = 'transaprent';
+muiTheme.tabs.backgroundColor = 'transparent';
 muiTheme.tabs.selectedTextColor = 'rgb(255, 255, 255)';
-muiTheme.tabs.textColor = 'rgb(0, 151, 167)';
+muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; // 'rgb(0, 151, 167)';
 muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
 muiTheme.toolbar = lightTheme.toolbar;
 muiTheme.toolbar.backgroundColor = 'transparent';
@@ -43,11 +43,11 @@ muiTheme.parity = {
     muiTheme.parity.backgroundSeed = seed;
   },
 
-  getBackgroundStyle: () => {
+  getBackgroundStyle: (gradient = 'rgba(255, 255, 255, 0.25)') => {
     const url = GeoPattern.generate(muiTheme.parity.backgroundSeed).toDataUrl();
 
     return {
-      background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ${url}`
+      background: `linear-gradient(${gradient}, ${gradient}), ${url}`
     };
   }
 };

diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css
@@ -28,16 +28,16 @@
 .tabs button,
 .settings,
 .logo {
-  background: rgba(0, 0, 0, 0.7) !important; /* rgba(0, 0, 0, 0.25) !important; */
+  background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
 }
 
 .tabs button:hover {
-  background: rgba(0, 0, 0, 0.3) !important;
+  background: rgba(0, 0, 0, 0.4) !important;
 }
 
 button.tabactive,
 button.tabactive:hover {
-  background: none !important;
+  background: rgba(0, 0, 0, 0.25) !important;
   border-radius: 4px 4px 0 0;
 }
 
@@ -88,7 +88,7 @@ button.tabactive:hover {
 }
 
 .settings svg {
-  fill: rgb(0, 151, 167) !important;
+  fill: rgba(255, 255, 255, 0.5) !important;
 }
 
 svg.optionSelected {

diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js
@@ -26,7 +26,7 @@ import ImageGridOn from 'material-ui/svg-icons/image/grid-on';
 import NavigationApps from 'material-ui/svg-icons/navigation/apps';
 import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
 
-import { Badge, SignerIcon, Tooltip } from '../../../ui';
+import { Badge, ParityBackground, SignerIcon, Tooltip } from '../../../ui';
 
 import styles from './tabBar.css';
 import imagesEthcoreBlock from '../../../images/ethcore-block.png';
@@ -65,12 +65,14 @@ export default class TabBar extends Component {
 
   render () {
     return (
-      <Toolbar
-        className={ styles.toolbar }>
-        { this.renderLogo() }
-        { this.renderTabs() }
-        { this.renderSettingsMenu() }
-      </Toolbar>
+      <ParityBackground>
+        <Toolbar
+          className={ styles.toolbar }>
+          { this.renderLogo() }
+          { this.renderTabs() }
+          { this.renderSettingsMenu() }
+        </Toolbar>
+      </ParityBackground>
     );
   }
 

diff --git a/js/src/views/ParityBar/parityBar.css b/js/src/views/ParityBar/parityBar.css
@@ -33,21 +33,25 @@
 .expanded {
   right: 16px;
   width: 964px;
-  height: 300px;
+  height: 292px;
   border-radius: 4px 4px 0 0;
-  background: rgb(48, 48, 48);
   overflow-y: scroll;
 }
 
 .expanded .content {
-  padding: 0 2em;
+  padding: 0;
+  margin: 0 -1em;
 }
 
 .corner {
   position: absolute;
   bottom: 0;
   right: 16px;
   border-radius: 4px 4px 0 0;
+}
+
+.cornercolor {
+  background: rgba(0, 0, 0, 0.5);
   padding: 0.5em 1em;
 }
 
@@ -92,13 +96,25 @@
 
 .header {
   height: 36px;
-  padding: 1em;
+  padding: 0.5em 1em;
+  background: rgba(0, 0, 0, 0.25);
+  margin-bottom: 0;
 }
 
 .header:after {
   clear: both;
 }
 
+.header button,
+.corner button {
+  color: white !important;
+}
+
+.header svg ,
+.coner svg {
+  fill: white !important;
+}
+
 .body {
   padding: 1em;
 }

diff --git a/js/src/views/ParityBar/parityBar.js b/js/src/views/ParityBar/parityBar.js
@@ -23,7 +23,7 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
 import { Badge, Button, ContainerTitle, ParityBackground, SignerIcon } from '../../ui';
 import { Embedded as Signer } from '../Signer';
 
-import imagesEthcoreBlock from '../../images/ethcore-block-blue.png';
+import imagesEthcoreBlock from '../../images/ethcore-block.png';
 import styles from './parityBar.css';
 
 class ParityBar extends Component {
@@ -53,17 +53,19 @@ class ParityBar extends Component {
     return (
       <div className={ styles.bar }>
         <ParityBackground className={ styles.corner }>
-          <Link to='/apps'>
+          <div className={ styles.cornercolor }>
+            <Link to='/apps'>
+              <Button
+                className={ styles.button }
+                icon={ parityIcon }
+                label={ this.renderLabel('Parity') } />
+            </Link>
             <Button
               className={ styles.button }
-              icon={ parityIcon }
-              label={ this.renderLabel('Parity') } />
-          </Link>
-          <Button
-            className={ styles.button }
-            icon={ <SignerIcon className={ styles.signerIcon } /> }
-            label={ this.renderSignerLabel() }
-            onClick={ this.toggleDisplay } />
+              icon={ <SignerIcon className={ styles.signerIcon } /> }
+              label={ this.renderSignerLabel() }
+              onClick={ this.toggleDisplay } />
+          </div>
         </ParityBackground>
       </div>
     );