grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI 2 light styling (placeholder until component move) (#5503)

Browse Source 
* Adjust cards

* Clickable TxRow

* Modal background adjustment (stop-gap)

* Adjust container to light

* UI light updates
This commit is contained in:
Jaco Greeff 2017-04-25 15:41:46 +02:00 committed by GitHub
parent ac138f6a4c
commit 851003c07c
7 changed files with 48 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/ui/Balance/balance.css
View File

@ -15,6 +15,9 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
$tagColor: rgba(100, 100, 100, 0.25);
$textColor: white;
.balances { .balances {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -49,7 +52,8 @@
max-width: 100%; max-width: 100%;
&.full { &.full {
background: rgba(255, 255, 255, 0.07); background: $tagColor;
color: $textColor;
img { img {
margin-right: 1em; margin-right: 1em;

21
js/src/ui/Container/container.css
View File

@ -15,9 +15,9 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
$background: rgba(18, 18, 18, 0.85); $background: rgba(255, 255, 255, 0.85);
$backgroundHover: rgba(18, 18, 18, 1); $backgroundHover: rgba(249, 249, 249, 1);
$transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1); $backgroundLight: rgba(18, 18, 18, 0.5);
.container { .container {
background: $background; background: $background;
@ -26,8 +26,6 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
padding: 0em; padding: 0em;
max-width: 100%; max-width: 100%;
position: relative; position: relative;
/*transform: translateZ(0);
transition: $transitionAll;*/
width: 100%; width: 100%;
.hoverOverlay { .hoverOverlay {
@ -41,10 +39,7 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
position: absolute; position: absolute;
right: 0; right: 0;
top: 100%; top: 100%;
/*transition: $transitionAll;*/
opacity: 0; opacity: 0;
/*transform: scale(0.5, 0);
transform-origin: top center;*/
z-index: 100; z-index: 100;
} }
@ -52,9 +47,11 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
background: $backgroundHover; background: $backgroundHover;
.hoverOverlay { .hoverOverlay {
background: $backgroundHover; background: $backgroundHover !important;
border: 1px solid whitesmoke;
border-top: 1px solid transparent;
box-shadow: none !important;
display: block; display: block;
/*transform: scale(1, 1);*/
opacity: 1; opacity: 1;
} }
} }
@ -64,6 +61,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
.padded { .padded {
background-color: transparent !important; background-color: transparent !important;
border-radius: 0 !important; border-radius: 0 !important;
border: 1px solid whitesmoke;
box-shadow: none !important;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
@ -79,7 +78,7 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
.light .compact, .light .compact,
.light .padded { .light .padded {
background: rgba(0, 0, 0, 0.5) !important; background: $backgroundLight !important;
} }
.link { .link {

2
js/src/ui/MethodDecoding/methodDecoding.css
View File

@ -61,7 +61,7 @@
.name, .name,
.highlight { .highlight {
color: white; color: #333;
padding: 0.25em; padding: 0.25em;
} }

12
js/src/ui/Portal/portal.css
View File

@ -34,8 +34,11 @@ $popoverRight: $modalMargin;
$popoverTop: 20vh; $popoverTop: 20vh;
$popoverZ: 3600; $popoverZ: 3600;
$backgroundFade: rgba(255, 255, 255, 0.35);
$backgroundOverlay: rgba(255, 255, 255, 0.95);
.backOverlay { .backOverlay {
background-color: rgba(255, 255, 255, 0.35); background-color: $backgroundFade;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -45,7 +48,8 @@ $popoverZ: 3600;
} }
.overlay { .overlay {
background-color: rgba(0, 0, 0, 1); background-color: $backgroundOverlay;
border: 1px solid whitesmoke;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -94,13 +98,13 @@ $popoverZ: 3600;
justify-content: flex-end; justify-content: flex-end;
padding: $modalPadding 0 0 0; padding: $modalPadding 0 0 0;
button:not([disabled]) { /*button:not([disabled]) {
color: white !important; color: white !important;
svg { svg {
fill: white !important; fill: white !important;
} }
} }*/
} }
.childContainer { .childContainer {

36
js/src/ui/Theme/theme.js
View File

@ -16,28 +16,26 @@
import GeoPattern from 'geopattern'; import GeoPattern from 'geopattern';
import getMuiTheme from 'material-ui/styles/getMuiTheme'; import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
const lightTheme = getMuiTheme(lightBaseTheme); const muiTheme = getMuiTheme(lightBaseTheme);
const muiTheme = getMuiTheme(darkBaseTheme);
muiTheme.inkBar.backgroundColor = 'transparent'; // muiTheme.inkBar.backgroundColor = 'transparent';
muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)'; // muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)';
muiTheme.raisedButton.primaryTextColor = 'white'; // muiTheme.raisedButton.primaryTextColor = 'white';
muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)'; // muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)'; // muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
muiTheme.stepper.textColor = '#eee'; // muiTheme.stepper.textColor = '#eee';
muiTheme.stepper.disabledTextColor = '#777'; // muiTheme.stepper.disabledTextColor = '#777';
muiTheme.tabs = lightTheme.tabs; // muiTheme.tabs = lightTheme.tabs;
muiTheme.tabs.backgroundColor = 'transparent'; // muiTheme.tabs.backgroundColor = 'transparent';
muiTheme.tabs.selectedTextColor = 'white'; // muiTheme.tabs.selectedTextColor = 'white';
muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; // muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)';
muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)'; // muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)';
muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)'; // muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)';
muiTheme.textField.disabledTextColor = muiTheme.textField.textColor; // muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
muiTheme.toolbar = lightTheme.toolbar; // muiTheme.toolbar = lightTheme.toolbar;
muiTheme.toolbar.backgroundColor = 'transparent'; // muiTheme.toolbar.backgroundColor = 'transparent';
muiTheme.zIndex.layer = 4000; muiTheme.zIndex.layer = 4000;
muiTheme.zIndex.popover = 4100; muiTheme.zIndex.popover = 4100;

12
js/src/ui/TxList/TxRow/txRow.js
View File

@ -19,10 +19,10 @@ import dateDifference from 'date-difference';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router';
import { txLink } from '~/3rdparty/etherscan/links'; import { txLink } from '~/3rdparty/etherscan/links';
import DappLink from '~/ui/DappLink';
import IdentityIcon from '~/ui/IdentityIcon'; import IdentityIcon from '~/ui/IdentityIcon';
import IdentityName from '~/ui/IdentityName'; import IdentityName from '~/ui/IdentityName';
import MethodDecoding from '~/ui/MethodDecoding'; import MethodDecoding from '~/ui/MethodDecoding';
@ -119,7 +119,7 @@ class TxRow extends Component {
if (address && (!isDeploy || isKnownContract)) { if (address && (!isDeploy || isKnownContract)) {
esLink = ( esLink = (
<Link <DappLink
activeClassName={ styles.currentLink } activeClassName={ styles.currentLink }
className={ styles.link } className={ styles.link }
to={ this.addressLink(address) } to={ this.addressLink(address) }
@ -128,7 +128,7 @@ class TxRow extends Component {
address={ address } address={ address }
shorten shorten
/> />
</Link> </DappLink>
); );
} }
@ -307,14 +307,14 @@ class TxRow extends Component {
const isContract = this.getIsKnownContract(address); const isContract = this.getIsKnownContract(address);
if (isContract) { if (isContract) {
return `/contracts/${address}`; return `/contract/${address}`;
} }
if (isAccount) { if (isAccount) {
return `/accounts/${address}`; return `/account/${address}`;
} }
return `/addresses/${address}`; return `/address/${address}`;
} }
getCondition = () => { getCondition = () => {

2
js/src/views/ParityBar/parityBar.css
View File

@ -113,7 +113,7 @@ $modalZ: 10001;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
display: flex; display: flex;
background: rgba(0, 0, 0, 0.8); background: rgba(255, 255, 255, 0.95);
max-width: calc(100vw - 2em); max-width: calc(100vw - 2em);
} }
} }