procedurally generate background based on signer key #2233
Conversation
|
It looks like this contributor signed our Contributor License Agreement. 👍 Many thanks, Ethcore CLA Bot |
jacogr
added
A3-inprogress ⏳
| import GeoPattern from 'geopattern'; | ||
| import React, { Component, PropTypes } from 'react'; | ||
|
|
||
| export default class ProcBackground extends Component { |
There was a problem hiding this comment.
I'm not happy with the name ProcBackground. I can't tell what Proc means if I don't know what it's about. I'd prefer e.g. GeneratedBackground, PatternBackground or – similar to IdentityIcon – IdentityBackground.
There was a problem hiding this comment.
I have renamed it - agreed with you on that actually, it is now ParityBackground, exactly what the function is.
| render () { | ||
| const { children } = this.props; | ||
| const { backgroundImage } = this.state; | ||
| const style = { backgroundImage, width: '100%', height: '100%' }; |
There was a problem hiding this comment.
Setting width and height to 100% may be dangerous in some places? Are they required?
There was a problem hiding this comment.
Sadly, yes. With the height we only stretch to child height, which means the image may just cover parts of the screen. Other option may be to set the child heights as/when required.
There was a problem hiding this comment.
Why not: position: absolute; top: 0; bottom: 0; left: 0; right: 0;?
<div>
<div style={style}></div>
{ children }
</div>Could be even a separate ReactDOM.render call.
There was a problem hiding this comment.
I have removed that. The height was wrong (re-usable components), so if needed (which is one place), the className can set it. Actually in that place Application/Container the className already does.
| @@ -28,11 +28,11 @@ 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.backgroundColor = 'none'; // 'rgba(65, 65, 65, 0.75)'; | |||
There was a problem hiding this comment.
Just taste, but I think it looks better without transparency. 😄
There was a problem hiding this comment.
I think we need to get it in mostly as-in and see what bugs us. There will need to be tweaks to make everything fit and look optimal.
There was a problem hiding this comment.
Adjusted it slightly. There is method behind the madness, with some transparency (0.7 now, up from 0.5) the background colors bleed through so it looks consistent. The trick is to get it just enough so it bleeds enough, but not too much that it is distracting.
As of now, quite happy as an itial stab. Will need to tweak as things look out of place, but for that need testing. (Plus, meeting with UX guy on Monday, we may get some help from a pure styling perspective, so not going to overthink it.)
jacogr
added
A0-pleasereview 🤓
derhuerst
added
A6-mustntgrumble 💦
https://github.com/ethcore/parity/issues/2228
Next up -
need to adjust Modals (look slightly out of place)ParityBar (dapp overlay) needs to get the same styling as modals (at least container overlays)Caveats -
In action -