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

* Adjust cards * Clickable TxRow * Modal background adjustment (stop-gap) * Adjust container to light * UI light updates
2017-04-25 15:41:46 +02:00 · 2017-04-25 15:41:46 +02:00 · 851003c07c
parent ac138f6a4c
commit 851003c07c
7 changed files with 48 additions and 43 deletions
--- a/js/src/ui/Balance/balance.css
+++ b/js/src/ui/Balance/balance.css
@ -15,6 +15,9 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */

+$tagColor: rgba(100, 100, 100, 0.25);
+$textColor: white;
+
 .balances {
  display: flex;
  flex-wrap: wrap;
@ -49,7 +52,8 @@
  max-width: 100%;

  &.full {
-    background: rgba(255, 255, 255, 0.07);
+    background: $tagColor;
+    color: $textColor;

    img {
      margin-right: 1em;
--- a/js/src/ui/Container/container.css
+++ b/js/src/ui/Container/container.css
@ -15,9 +15,9 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */

-$background: rgba(18, 18, 18, 0.85);
-$backgroundHover: rgba(18, 18, 18, 1);
-$transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
+$background: rgba(255, 255, 255, 0.85);
+$backgroundHover: rgba(249, 249, 249, 1);
+$backgroundLight: rgba(18, 18, 18, 0.5);

 .container {
  background: $background;
@ -26,8 +26,6 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 0em;
  max-width: 100%;
  position: relative;
-  /*transform: translateZ(0);
-  transition: $transitionAll;*/
  width: 100%;

  .hoverOverlay {
@ -41,10 +39,7 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
    position: absolute;
    right: 0;
    top: 100%;
-    /*transition: $transitionAll;*/
    opacity: 0;
-    /*transform: scale(0.5, 0);
-    transform-origin: top center;*/
    z-index: 100;
  }

@ -52,9 +47,11 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
    background: $backgroundHover;

    .hoverOverlay {
-      background: $backgroundHover;
+      background: $backgroundHover !important;
+      border: 1px solid whitesmoke;
+      border-top: 1px solid transparent;
+      box-shadow: none !important;
      display: block;
-      /*transform: scale(1, 1);*/
      opacity: 1;
    }
  }
@ -64,6 +61,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
 .padded {
  background-color: transparent !important;
  border-radius: 0 !important;
+  border: 1px solid whitesmoke;
+  box-shadow: none !important;
  height: 100%;
  position: relative;
  overflow: auto;
@ -79,7 +78,7 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);

 .light .compact,
 .light .padded {
-  background: rgba(0, 0, 0, 0.5) !important;
+  background: $backgroundLight !important;
 }

 .link {
--- a/js/src/ui/MethodDecoding/methodDecoding.css
+++ b/js/src/ui/MethodDecoding/methodDecoding.css
@ -61,7 +61,7 @@

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

--- a/js/src/ui/Portal/portal.css
+++ b/js/src/ui/Portal/portal.css
@ -34,8 +34,11 @@ $popoverRight: $modalMargin;
 $popoverTop: 20vh;
 $popoverZ: 3600;

+$backgroundFade: rgba(255, 255, 255, 0.35);
+$backgroundOverlay: rgba(255, 255, 255, 0.95);
+
 .backOverlay {
-  background-color: rgba(255, 255, 255, 0.35);
+  background-color: $backgroundFade;
  position: fixed;
  top: 0;
  right: 0;
@ -45,7 +48,8 @@ $popoverZ: 3600;
 }

 .overlay {
-  background-color: rgba(0, 0, 0, 1);
+  background-color: $backgroundOverlay;
+  border: 1px solid whitesmoke;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
@ -94,13 +98,13 @@ $popoverZ: 3600;
    justify-content: flex-end;
    padding: $modalPadding 0 0 0;

-    button:not([disabled]) {
+    /*button:not([disabled]) {
      color: white !important;

      svg {
        fill: white !important;
      }
-    }
+    }*/
  }

  .childContainer {
--- a/js/src/ui/Theme/theme.js
+++ b/js/src/ui/Theme/theme.js
@ -16,28 +16,26 @@

 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';

-const lightTheme = getMuiTheme(lightBaseTheme);
-const muiTheme = getMuiTheme(darkBaseTheme);
+const muiTheme = getMuiTheme(lightBaseTheme);

-muiTheme.inkBar.backgroundColor = 'transparent';
-muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)';
-muiTheme.raisedButton.primaryTextColor = 'white';
-muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
-muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
-muiTheme.stepper.textColor = '#eee';
-muiTheme.stepper.disabledTextColor = '#777';
-muiTheme.tabs = lightTheme.tabs;
-muiTheme.tabs.backgroundColor = 'transparent';
-muiTheme.tabs.selectedTextColor = 'white';
-muiTheme.tabs.textColor = '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.disabledTextColor = muiTheme.textField.textColor;
-muiTheme.toolbar = lightTheme.toolbar;
-muiTheme.toolbar.backgroundColor = 'transparent';
+// muiTheme.inkBar.backgroundColor = 'transparent';
+// muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)';
+// muiTheme.raisedButton.primaryTextColor = 'white';
+// muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
+// muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
+// muiTheme.stepper.textColor = '#eee';
+// muiTheme.stepper.disabledTextColor = '#777';
+// muiTheme.tabs = lightTheme.tabs;
+// muiTheme.tabs.backgroundColor = 'transparent';
+// muiTheme.tabs.selectedTextColor = 'white';
+// muiTheme.tabs.textColor = '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.disabledTextColor = muiTheme.textField.textColor;
+// muiTheme.toolbar = lightTheme.toolbar;
+// muiTheme.toolbar.backgroundColor = 'transparent';
 muiTheme.zIndex.layer = 4000;
 muiTheme.zIndex.popover = 4100;

--- a/js/src/ui/TxList/TxRow/txRow.js
+++ b/js/src/ui/TxList/TxRow/txRow.js
@ -19,10 +19,10 @@ import dateDifference from 'date-difference';
 import { FormattedMessage } from 'react-intl';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';

 import { txLink } from '~/3rdparty/etherscan/links';

+import DappLink from '~/ui/DappLink';
 import IdentityIcon from '~/ui/IdentityIcon';
 import IdentityName from '~/ui/IdentityName';
 import MethodDecoding from '~/ui/MethodDecoding';
@ -119,7 +119,7 @@ class TxRow extends Component {

    if (address && (!isDeploy || isKnownContract)) {
      esLink = (
-        <Link
+        <DappLink
          activeClassName={ styles.currentLink }
          className={ styles.link }
          to={ this.addressLink(address) }
@ -128,7 +128,7 @@ class TxRow extends Component {
            address={ address }
            shorten
          />
-        </Link>
+        </DappLink>
      );
    }

@ -307,14 +307,14 @@ class TxRow extends Component {
    const isContract = this.getIsKnownContract(address);

    if (isContract) {
-      return `/contracts/${address}`;
+      return `/contract/${address}`;
    }

    if (isAccount) {
-      return `/accounts/${address}`;
+      return `/account/${address}`;
    }

-    return `/addresses/${address}`;
+    return `/address/${address}`;
  }

  getCondition = () => {
--- a/js/src/views/ParityBar/parityBar.css
+++ b/js/src/views/ParityBar/parityBar.css
@ -113,7 +113,7 @@ $modalZ: 10001;
    flex: 1;
    overflow: auto;
    display: flex;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(255, 255, 255, 0.95);
    max-width: calc(100vw - 2em);
  }
 }