procedurally generate background based on signer key

js/package.json

@@ -115,6 +115,7 @@
     "es6-promise": "^3.2.1",
     "format-json": "^1.0.3",
     "format-number": "^2.0.1",
+    "geopattern": "^1.2.3",
     "isomorphic-fetch": "^2.2.1",
     "js-sha3": "^0.5.2",
     "lodash": "^4.11.1",

js/src/index.js

@@ -47,6 +47,8 @@ const parityUrl = process.env.NODE_ENV === 'production' ? window.location.host :
 
 const api = new Api(new Api.Transport.Ws(`ws://${parityUrl}`, initToken)); // new Api.Transport.Http('/rpc/'));
 
+muiTheme.parity.setBackgroundSeed(api.util.sha3(initToken + Date.now()));
+
 // signer
 function tokenSetter (token, cb) {
   window.localStorage.setItem('sysuiToken', token);

js/src/modals/CreateAccount/createAccount.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .paddedtop {
-  padding: 1.618em 0 0 0;
+  padding: 1.5em 1em 0 1em;
   line-height: 1.618em;
 }
 

js/src/reset.css

@@ -22,7 +22,6 @@
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
-  background: rgb(80, 80, 80); /* rgb(95, 95, 95); */
   color: rgba(255, 255, 255, 0.75);
   font-size: 16px;
   font-family: 'Roboto', sans-serif;

js/src/ui/Actionbar/actionbar.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
+import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
 
 import styles from './actionbar.css';
 
@@ -59,9 +59,9 @@ export default class Actionbar extends Component {
     const { title } = this.props;
 
     return (
-      <ToolbarTitle
-        className={ styles.tooltitle }
-        text={ title } />
+      <h3 className={ styles.tooltitle }>
+        { title }
+      </h3>
     );
   }
 }

js/src/ui/Container/Title/title.css

@@ -17,3 +17,9 @@
 .byline {
   color: #aaa;
 }
+
+.title {
+  text-transform: uppercase;
+  margin: 0;
+  line-height: 34px;
+}

js/src/ui/Container/Title/title.js

@@ -16,12 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { CardTitle } from 'material-ui/Card';
-
 import styles from './title.css';
 
-const TITLE_STYLE = { textTransform: 'uppercase', padding: 0 };
-
 export default class Title extends Component {
   static propTypes = {
     title: PropTypes.oneOfType([
@@ -37,9 +33,9 @@ export default class Title extends Component {
   render () {
     return (
       <div>
-        <CardTitle
-          style={ TITLE_STYLE }
-          title={ this.props.title } />
+        <h3 className={ styles.title }>
+          { this.props.title }
+        </h3>
         <div className={ styles.byline }>
           { this.props.byline }
         </div>

js/src/ui/Container/container.css

@@ -19,5 +19,6 @@
 }
 
 .padded {
-  padding: 1em;
+  padding: 1.5em;
+  background: rgba(0, 0, 0, 0.7) !important;
 }

js/src/ui/Modal/modal.css

@@ -14,9 +14,23 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+.actions, .body {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.dialog {
+}
+
+.content {
+  transform: translate(0px, 0px) !important;
+}
+
+.content>div {
+  background: rgba(0, 0, 0, 0.7) !important;
+}
+
 .title {
   padding: 1em;
-  background: rgba(0, 0, 0, 0.175);
 }
 
 .title h3 {

js/src/ui/Modal/modal.js

@@ -23,11 +23,14 @@ import Title from './Title';
 const ACTIONS_STYLE = { borderStyle: 'none' };
 const TITLE_STYLE = { borderStyle: 'none' };
 const DIALOG_STYLE = { paddingTop: '1px' };
-const CONTENT_STYLE = { transform: 'translate(0px, 0px)' };
 
 import styles from './modal.css';
 
 export default class Modal extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
   static propTypes = {
     actions: PropTypes.node,
     children: PropTypes.node,
@@ -43,6 +46,7 @@ export default class Modal extends Component {
   }
 
   render () {
+    const { muiTheme } = this.context;
     const { actions, className, current, children, scroll, steps, waiting, title, visible } = this.props;
     const header = (
       <Title
@@ -51,15 +55,19 @@ export default class Modal extends Component {
         steps={ steps }
         title={ title } />
     );
+    const classes = `${styles.dialog} ${className}`;
 
     return (
       <Dialog
-        className={ className }
+        className={ classes }
         actions={ actions }
         actionsContainerStyle={ ACTIONS_STYLE }
         autoDetectWindowHeight={ false }
         autoScrollBodyContent={ !!scroll }
-        contentStyle={ CONTENT_STYLE }
+        actionsContainerClassName={ styles.actions }
+        bodyClassName={ styles.body }
+        contentClassName={ styles.content }
+        contentStyle={ muiTheme.parity.getBackgroundStyle() }
         modal
         open={ visible }
         repositionOnUpdate={ false }

js/src/ui/Page/page.css

@@ -15,5 +15,5 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .layout {
-  padding: 0em 3em;
+  padding: 0 3em;
 }

js/src/ui/ParityBackground/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './parityBackground';

js/src/ui/ParityBackground/parityBackground.js

@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+export default class ParityBackground extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+  }
+
+  render () {
+    const { children, className } = this.props;
+    const { muiTheme } = this.context;
+
+    return (
+      <div className={ className } style={ muiTheme.parity.getBackgroundStyle() }>
+        { children }
+      </div>
+    );
+  }
+}

js/src/ui/Theme/theme.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import GeoPattern from 'geopattern';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
@@ -23,16 +24,32 @@ const muiTheme = getMuiTheme(darkBaseTheme);
 
 muiTheme.stepper.textColor = '#eee';
 muiTheme.stepper.disabledTextColor = '#777';
-muiTheme.inkBar.backgroundColor = 'transparent'; // 'rgb(0, 151, 167)'; // 'rgba(255, 136, 0, 0.8)';
+muiTheme.inkBar.backgroundColor = 'transparent';
 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 = 'rgb(65, 65, 65)';
-muiTheme.tabs.selectedTextColor = 'rgb(255, 255, 255)'; // 'rgb(0, 151, 167)'; // 'rgba(255, 136, 0, 0.8)';
-muiTheme.tabs.textColor = 'rgb(0, 151, 167)'; // 'rgba(255, 255, 255, 1)'; // 'rgba(0, 151, 167, 1)';
+muiTheme.tabs.backgroundColor = 'transaprent';
+muiTheme.tabs.selectedTextColor = 'rgb(255, 255, 255)';
+muiTheme.tabs.textColor = 'rgb(0, 151, 167)';
 muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
 muiTheme.toolbar = lightTheme.toolbar;
-muiTheme.toolbar.backgroundColor = 'rgb(80, 80, 80)'; // 'rgba(255, 136, 0, 0.5)'; // 'rgb(80, 80, 80)';
+muiTheme.toolbar.backgroundColor = 'transparent';
+
+muiTheme.parity = {
+  backgroundSeed: '0x0',
+
+  setBackgroundSeed: (seed) => {
+    muiTheme.parity.backgroundSeed = seed;
+  },
+
+  getBackgroundStyle: () => {
+    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}`
+    };
+  }
+};
 
 export default muiTheme;

js/src/ui/index.js

@@ -27,6 +27,7 @@ import IdentityIcon from './IdentityIcon';
 import Modal from './Modal';
 import muiTheme from './Theme';
 import Page from './Page';
+import ParityBackground from './ParityBackground';
 import SignerIcon from './SignerIcon';
 import Tooltips, { Tooltip } from './Tooltips';
 
@@ -52,6 +53,7 @@ export {
   Modal,
   muiTheme,
   Page,
+  ParityBackground,
   SignerIcon,
   Tooltip,
   Tooltips

js/src/views/Application/Container/container.js

@@ -17,13 +17,13 @@
 import React, { Component, PropTypes } from 'react';
 
 import { FirstRun } from '../../../modals';
-import { Errors, Tooltips } from '../../../ui';
+import { Errors, ParityBackground, Tooltips } from '../../../ui';
 
 import styles from '../application.css';
 
 export default class Container extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.node.isRequired,
     showFirstRun: PropTypes.bool,
     onCloseFirstRun: PropTypes.func
   };
@@ -32,14 +32,14 @@ export default class Container extends Component {
     const { children, showFirstRun, onCloseFirstRun } = this.props;
 
     return (
-      <div className={ styles.container }>
+      <ParityBackground className={ styles.container }>
         <FirstRun
           visible={ showFirstRun }
           onClose={ onCloseFirstRun } />
         <Tooltips />
         <Errors />
         { children }
-      </div>
+      </ParityBackground>
     );
   }
 }

js/src/views/Application/DappContainer/dappContainer.js

@@ -22,7 +22,7 @@ import styles from '../application.css';
 
 export default class DappContainer extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node.isRequired
   };
 
   render () {

js/src/views/Application/TabBar/tabBar.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .toolbar {
-  background: rgb(65, 65, 65) !important;
+  background: none !important;
   height: 72px !important;
   position: relative;
 }
@@ -25,13 +25,19 @@
   position: relative;
 }
 
+.tabs button,
+.settings,
+.logo {
+  background: rgba(0, 0, 0, 0.7) !important; /* rgba(0, 0, 0, 0.25) !important; */
+}
+
 .tabs button:hover {
-  background: rgb(72, 72, 72) !important;
+  background: rgba(0, 0, 0, 0.3) !important;
 }
 
 button.tabactive,
 button.tabactive:hover {
-  background: rgb(80, 80, 80) !important;
+  background: none !important;
   border-radius: 4px 4px 0 0;
 }
 
@@ -51,7 +57,8 @@ button.tabactive:hover {
 }
 
 .logo {
-  margin: 22px 3em 0 0;
+  margin: 0 0 0 -24px;
+  padding: 22px 24px 0 24px;
   white-space: nowrap;
 }
 
@@ -76,8 +83,8 @@ button.tabactive:hover {
 }
 
 .settings {
-  padding-left: 24px;
-  margin: 12px -12px;
+  margin: 0 -24px 0 0;
+  padding: 12px 24px;
 }
 
 .settings svg {

js/src/views/Application/application.css

@@ -15,6 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .container {
-  height: 100%;
+  min-height: 100%;
   width: 100%;
 }