Reset themes, single palette (#1607)

* Reset themes, single palette * Additional comments * Bump identicon, darkorange highlights * Default button colors to $default * isPrimary for all major (maybe rather shouldn't) * All input buttons are non-primary * Toggle to $highlight, links to $primary * Swap darkorange to Thibaut-orange * Icon highlight to non-orange * Highlight package bump * Updates * Adjust referendum result color (aligning with orig Polkadot) * Bumpos, button text color
2019-09-18 12:59:56 +02:00 · 2019-09-18 12:59:56 +02:00 · fbe68b6c5d
commit fbe68b6c5d
parent d04ad22d57
23 changed files with 158 additions and 71 deletions
--- a/packages/app-accounts/package.json
+++ b/packages/app-accounts/package.json
@ -12,7 +12,7 @@
  "dependencies": {
    "@babel/runtime": "^7.6.0",
    "@polkadot/react-components": "^0.36.0-beta.13",
-    "@polkadot/react-qr": "^0.45.0-beta.12",
+    "@polkadot/react-qr": "^0.45.0-beta.13",
    "@types/file-saver": "^2.0.0",
    "@types/yargs": "^13.0.2",
    "babel-plugin-module-resolver": "^3.1.1",
--- a/packages/app-contracts/src/Contracts/index.tsx
+++ b/packages/app-contracts/src/Contracts/index.tsx
@ -54,6 +54,7 @@ class Contracts extends React.PureComponent<Props, State> {
                </>
              )}
              <Button
+                isPrimary
                label={t('Add an existing contract')}
                labelIcon='add'
                onClick={this.showAdd}
--- a/packages/app-council/src/Overview/SubmitCandidacy.tsx
+++ b/packages/app-council/src/Overview/SubmitCandidacy.tsx
@ -41,6 +41,7 @@ class SubmitCandidacy extends TxModal<Props, State> {

    return (
      <Button
+        isPrimary
        label={t('Submit candidacy')}
        labelIcon='add'
        onClick={this.showModal}
--- a/packages/app-democracy/src/Overview/Referendum.tsx
+++ b/packages/app-democracy/src/Overview/Referendum.tsx
@ -12,18 +12,13 @@ import React from 'react';
 import styled from 'styled-components';
 import { ActionItem, Chart, Static, Voting } from '@polkadot/react-components';
 import { formatBalance, formatNumber } from '@polkadot/util';
-import settings from '@polkadot/ui-settings';
 import VoteThreshold from '@polkadot/react-params/Param/VoteThreshold';
 import { withCalls, withMulti } from '@polkadot/react-api';

 import translate from '../translate';

-const COLORS_AYE = settings.uiTheme === 'substrate'
-  ? ['#4d4', '#4e4']
-  : ['#64bebe', '#5badad'];
-const COLORS_NAY = settings.uiTheme === 'substrate'
-  ? ['#d44', '#e44']
-  : ['#d75ea1', '#e189ba'];
+const COLORS_AYE = ['#64bebe', '#5badad'];
+const COLORS_NAY = ['#d75ea1', '#e189ba'];

 interface Props extends I18nProps {
  idNumber: BN;
--- a/packages/app-democracy/src/Propose.tsx
+++ b/packages/app-democracy/src/Propose.tsx
@ -65,7 +65,7 @@ class Propose extends TxComponent<Props, State> {
        <Button.Group>
          <TxButton
            accountId={accountId}
-            label={t('Submit')}
+            label={t('Submit Proposal')}
            tx='democracy.propose'
            isDisabled={!isValid}
            params={[
--- a/packages/app-explorer/src/Query.tsx
+++ b/packages/app-explorer/src/Query.tsx
@ -47,7 +47,6 @@ class Query extends TxComponent<Props, State> {
        >
          <Button
            icon='play'
-            isPrimary
            onClick={this.onQuery}
            ref={this.button}
          />
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@ -78,7 +78,7 @@ class Selection extends TxComponent<Props, State> {
            isBasic
            isDisabled={!isValidUnsigned}
            isUnsigned
-            label={t('Submit Inherent')}
+            label={t('Submit Unsigned')}
            extrinsic={extrinsic}
          />
          <Button.Or />
--- a/packages/app-js/src/ActionButtons.tsx
+++ b/packages/app-js/src/ActionButtons.tsx
@ -5,6 +5,7 @@
 import { BareProps, I18nProps } from '@polkadot/react-components/types';

 import React from 'react';
+import styled from 'styled-components';
 import { Button as SUIB, Popup } from 'semantic-ui-react';
 import { Button, Input } from '@polkadot/react-components';

@ -35,13 +36,11 @@ class ActionButtons extends React.PureComponent<Props, State> {
  };

  public render (): React.ReactNode {
-    const {
-      props: { isCustomExample, isRunning, removeSnippet, runJs, stopJs, t },
-      state: { isOpen, shareText, snippetName }
-    } = this;
+    const { className, isCustomExample, isRunning, removeSnippet, runJs, stopJs, t } = this.props;
+    const { isOpen, shareText, snippetName } = this.state;

    return (
-      <div className='action-button'>
+      <div className={`${className} action-button`}>
        <Popup
          content={shareText}
          on='hover'
@ -82,8 +81,8 @@ class ActionButtons extends React.PureComponent<Props, State> {
            trigger={
              <SUIB
                circular
-                onClick={this.onPopupOpen}
                icon='save'
+                onClick={this.onPopupOpen}
              />
            }
          >
@ -99,16 +98,17 @@ class ActionButtons extends React.PureComponent<Props, State> {
            />
            <Button
              isDisabled={!snippetName.length}
-              isPositive
+              isPrimary
              label={t('Save snippet to local storage')}
              onClick={this.saveSnippet}
            />
          </Popup>
        )}
        <Button
+          className='play-button'
          icon='play'
          isCircular
-          isPositive
+          isPrimary
          onClick={runJs}
        />
        <Button
@ -153,4 +153,6 @@ class ActionButtons extends React.PureComponent<Props, State> {
  }
 }

-export default translate(ActionButtons);
+export default translate(
+  styled(ActionButtons)``
+);
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@ -46,7 +46,7 @@ class Propose extends TxComponent<Props, State> {
          <Button.Group>
            <TxButton
              accountId={sudoKey}
-              label={t('Submit')}
+              label={t('Submit Sudo')}
              tx='sudo.sudo'
              isDisabled={!method || !isValid}
              params={method ? [createType('Proposal', method)] : []}
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@ -16,7 +16,7 @@
    "@babel/runtime": "^7.6.0",
    "@polkadot/react-components": "^0.36.0-beta.13",
    "@polkadot/react-signer": "^0.36.0-beta.13",
-    "@polkadot/ui-assets": "^0.45.0-beta.12",
+    "@polkadot/ui-assets": "^0.45.0-beta.13",
    "query-string": "^6.8.3"
  }
 }
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@ -13,7 +13,6 @@ import store from 'store';
 import styled from 'styled-components';
 import { media } from '@polkadot/react-components';
 import Signer from '@polkadot/react-signer';
-import settings from '@polkadot/ui-settings';

 import ConnectingOverlay from './overlays/Connecting';
 import AccountsOverlay from './overlays/Accounts';
@ -60,7 +59,7 @@ class Apps extends React.Component<Props, State> {
    const { isCollapsed, isMenu, menuOpen } = this.state;

    return (
-      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--${settings.uiTheme} ${className}`}>
+      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
        {this.renderMenuBg()}
        <SideBar
          collapse={this.collapse}
--- a/packages/apps/src/SideBar/SideBar.css
+++ b/packages/apps/src/SideBar/SideBar.css
@ -2,9 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */

-@import '../../../react-components/src/styles/theme/_colors-polkadot.css';
-@import '../../../react-components/src/styles/theme/_colors-substrate.css';
-
 .apps-Wrapper {
  display: flex;
  flex-direction: row;
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@ -13,10 +13,10 @@
    "@babel/runtime": "^7.6.0",
    "@polkadot/keyring": "^1.4.1",
    "@polkadot/react-api": "^0.36.0-beta.13",
-    "@polkadot/react-identicon": "^0.45.0-beta.12",
+    "@polkadot/react-identicon": "^0.45.0-beta.13",
    "@polkadot/react-query": "^0.36.0-beta.13",
-    "@polkadot/ui-keyring": "^0.45.0-beta.12",
-    "@polkadot/ui-settings": "^0.45.0-beta.12",
+    "@polkadot/ui-keyring": "^0.45.0-beta.13",
+    "@polkadot/ui-settings": "^0.45.0-beta.13",
    "@types/chart.js": "^2.8.5",
    "@types/i18next": "^13.0.0",
    "@types/react-copy-to-clipboard": "^4.2.6",
--- a/packages/react-components/src/Bubble.tsx
+++ b/packages/react-components/src/Bubble.tsx
@ -8,7 +8,6 @@ import { SemanticCOLORS, SemanticICONS } from 'semantic-ui-react/dist/commonjs/g
 import React from 'react';
 import SUILabel from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
 import styled from 'styled-components';
-import settings from '@polkadot/ui-settings';

 import { classes } from './util';
 import Icon from './Icon';
@ -23,7 +22,7 @@ interface Props extends BareProps {
 function Bubble ({ color, children, className, icon, label }: Props): React.ReactElement<Props> {
  return (
    <SUILabel
-      className={classes(`theme--${settings.uiTheme}`, 'ui--Bubble', className)}
+      className={classes('theme--default', 'ui--Bubble', className)}
      color={color}
    >
      <div className='ui--Bubble-header'>
--- a/packages/react-components/src/Modal.tsx
+++ b/packages/react-components/src/Modal.tsx
@ -6,7 +6,6 @@ import { BareProps } from './types';

 import React from 'react';
 import SUIModal from 'semantic-ui-react/dist/commonjs/modules/Modal/Modal';
-import settings from '@polkadot/ui-settings';

 import { classes } from './util';

@ -30,7 +29,7 @@ export default class Modal extends React.PureComponent<Props> {
    return (
      <SUIModal
        {...this.props}
-        className={classes(`theme--${settings.uiTheme}`, 'ui--Modal', className)}
+        className={classes('theme--default', 'ui--Modal', className)}
      />
    );
  }
--- a/packages/react-components/src/styles.ts
+++ b/packages/react-components/src/styles.ts
@ -5,8 +5,7 @@
 import 'semantic-ui-css/semantic.min.css';

 import './styles/semantic.css';
-import './styles/theme/polkadot.css';
-import './styles/theme/substrate.css';
+import './styles/theme/default.css';

 import './styles/app.css';
 import './styles/form.css';
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@ -6,5 +6,6 @@ import theme from 'styled-theming';

 export const primaryColor = theme('theme', {
  substrate: '#DB2828',
-  polkadot: '#E6007A'
+  polkadot: '#E6007A',
+  default: 'darkorange'
 });
--- a/packages/react-components/src/styles/theme/_colors-substrate.css
+++ b/packages/react-components/src/styles/theme/_colors-substrate.css
@ -1,3 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
--- a/packages/react-components/src/styles/theme/default.css
+++ b/packages/react-components/src/styles/theme/default.css
@ -0,0 +1,100 @@
+/* Copyright 2017-2019 @polkadot/react-components authors & contributors
+/* This software may be modified and distributed under the terms
+/* of the Apache-2.0 license. See the LICENSE file for details. */
+
+/* default buttons, dark gray */
+$default: #666;
+
+/* highlighted buttons, orange */
+$highlight: #f19135;
+
+/* primary buttons, blue */
+$primary: #2e86ab;
+
+.theme--default {
+  a {
+    color: $primary;
+
+    &:hover,
+    a:visited {
+      color: $primary;
+    }
+  }
+
+  .ui.button,
+  .ui.buttons .button {
+    background-color: $default;
+    color: #f9f9f9;
+
+    &.active,
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $default;
+      color: #f9f9f9;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .ui.basic.negative.button {
+    box-shadow: 0 0 0 1px $highlight inset !important;
+    color: $highlight !important;
+  }
+
+  .ui.negative.button,
+  .ui.buttons .negative.button {
+    background-color: $highlight;
+
+    &.active,
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $highlight;
+    }
+  }
+
+  .ui.primary.button,
+  .ui.buttons .primary.button
+  /*, .ui.primary.buttons .button (for dropdowns) */ {
+    background-color: $primary;
+
+    &.active,
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $primary;
+    }
+  }
+
+  .ui.blue.progress .bar {
+    background-color: $highlight;
+  }
+
+  .ui.modal > .header:not(.ui) {
+    border-bottom-color: $highlight;
+  }
+
+  .ui.menu.tabular .item.active {
+    border-bottom-color: $highlight;
+  }
+
+  /* this is for dropdown buttons */
+  .ui.buttons .ui.button.selection.visible.dropdown {
+    &:hover {
+      /* reset opacity, this is now open */
+      opacity: 1;
+    }
+
+    > .text:not(.default) {
+      color: #eee;
+    }
+  }
+
+  .ui.toggle.checkbox input:checked~.box:before,
+  .ui.toggle.checkbox input:checked~label:before {
+    background-color: $highlight !important;
+  }
+}
--- a/packages/react-components/src/styles/theme/substrate.css
+++ b/packages/react-components/src/styles/theme/substrate.css
@ -2,7 +2,5 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */

-@import './_colors-substrate.css';
-
 .theme--substrate {
 }
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/packages/react-params/src/Param/Bytes.tsx
@ -64,7 +64,6 @@ export default class Bytes extends React.PureComponent<Props, State> {
    return (
      <Button
        icon='file'
-        isPrimary
        onClick={this.toggleFile}
      />
    );
--- a/packages/react-signer/package.json
+++ b/packages/react-signer/package.json
@ -12,6 +12,6 @@
  "dependencies": {
    "@babel/runtime": "^7.6.0",
    "@polkadot/react-components": "^0.36.0-beta.13",
-    "@polkadot/react-qr": "^0.45.0-beta.12"
+    "@polkadot/react-qr": "^0.45.0-beta.13"
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -2165,14 +2165,14 @@
    "@polkadot/util" "^1.4.1"
    "@polkadot/util-crypto" "^1.4.1"

-"@polkadot/react-identicon@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.12.tgz#7552b118023b44f625bf8501d30dca2ebf8cf286"
-  integrity sha512-vjRBmxgcYKKvpl2Tv5bKs2B+F/W60XXdSAfsLOHm94csL/B4EMqEoezIlRN0kGNds30OHni0UgMU9LBFt9j+tQ==
+"@polkadot/react-identicon@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.13.tgz#67244acc8fca80fd5e0db8b281001c0b51deb7f6"
+  integrity sha512-eFiQLHcwbhY4+PrEyOnAI1K34rUPzp9R6STsyeIVyKhtedvZaDFzxHjRooYlG2i6H4xye+Vqzua4GMu4RXFWeQ==
  dependencies:
    "@babel/runtime" "^7.6.0"
-    "@polkadot/ui-settings" "^0.45.0-beta.12"
-    "@polkadot/ui-shared" "^0.45.0-beta.12"
+    "@polkadot/ui-settings" "^0.45.0-beta.13"
+    "@polkadot/ui-shared" "^0.45.0-beta.13"
    "@types/color" "^3.0.0"
    "@types/react-copy-to-clipboard" "^4.2.6"
    color "^3.1.2"
@ -2180,10 +2180,10 @@
    react-copy-to-clipboard "^5.0.1"
    styled-components "^4.3.1"

-"@polkadot/react-qr@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.12.tgz#d63517cba8e0b20ec56dbb099b4de5bdec7b4bfd"
-  integrity sha512-fFYaS63Mk+oKWr2U4Ww3sy/R4OUFDW2rGQ1TBmzHU74YUMoQyNM3BNO7tvNH15rG1fzLshXj8s8nzRbWgiRMjA==
+"@polkadot/react-qr@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.13.tgz#7ff0cec8f8ff15250aa6b98e5386da039a693a95"
+  integrity sha512-Zdftp6X4v6/ddYbC1Yq+Kb9x0vVRenTepR6CQnUHDfHkXxIAfaCW5jt+H4Ks3TIZ44W4Amikdd+181/81HWNFA==
  dependencies:
    "@babel/runtime" "^7.6.0"
    "@types/react-qr-reader" "^2.1.1"
@ -2234,20 +2234,19 @@
    "@types/memoizee" "^0.4.3"
    memoizee "^0.4.14"

-"@polkadot/ui-assets@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.12.tgz#f0f89f1524291462637921554031b2958196d4e9"
-  integrity sha512-7eJq0w/ikKpZAYrKOvIHqLMCiuQ9lIvsu2o0VNTxkfUvZLPKUbhFFFHLjFyESl48bYdUIfgnqwIZ4bPRXeCHFw==
+"@polkadot/ui-assets@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.13.tgz#78a317880c13cb7f841b9c6b2baae39d0efc4526"
+  integrity sha512-UjiWa7OlcfBpSEofRLlrY8ScwClZuxzHSVJ0kwFGoJ3fB3NChCPaIOw8u2/KF6o65oWqLprsWCFD0ApDadIiNA==
  dependencies:
    "@babel/runtime" "^7.6.0"

-"@polkadot/ui-keyring@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.12.tgz#1624e8ab032a8ba0df36277da283645bab7f39fd"
-  integrity sha512-IxAR4TD+Umm2UCQsadV1EXHvksgMWg2vgdEwA2tFIPBE5c5GClreOsvgvRt+5WjHZ4cmaHMv+93C1U5p3/lqUg==
+"@polkadot/ui-keyring@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.13.tgz#eb8cc233a2d65cba341534f80b19851f0e73b6f1"
+  integrity sha512-nXognordlVTtbwPyjEhPY0Ler61Ou3RQ4HQoBJqm4ryoLKnbJHZwyXp52Hx5p06L6o9tAbP23jR5D+8/hXXmOg==
  dependencies:
    "@babel/runtime" "^7.6.0"
-    "@ledgerhq/hw-transport-node-hid" "^4.70.0"
    "@ledgerhq/hw-transport-u2f" "^4.70.0"
    "@ledgerhq/hw-transport-webusb" "^4.70.0"
    "@types/ledgerhq__hw-transport-node-hid" "^4.21.1"
@ -2259,20 +2258,22 @@
    mkdirp "^0.5.1"
    store "^2.0.12"
    styled-components "^4.3.1"
+  optionalDependencies:
+    "@ledgerhq/hw-transport-node-hid" "^4.70.0"

-"@polkadot/ui-settings@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.12.tgz#cbd647df564533cd599f259a3b96a6d63cc75c6e"
-  integrity sha512-UBsv1i5/KEPvCotL4PBdiSx2YJDxlVN4jtwLTOA5AcOJcITubY/caV/07TJMFQ+80t8dJAxB5J7vdQF+WI4/ZA==
+"@polkadot/ui-settings@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.13.tgz#023652c87c468ed463a9037ec0f4ede335614f67"
+  integrity sha512-Lhdz9LdM75QDajNW77vNZsJYPdiuwvh0X30I0TJO4YpT8AoiBIAkUGg3pAhcBPvGxNmoUcxcscrUhHah46VQcA==
  dependencies:
    "@babel/runtime" "^7.6.0"
    "@types/store" "^2.0.2"
    store "^2.0.12"

-"@polkadot/ui-shared@^0.45.0-beta.12":
-  version "0.45.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.12.tgz#f218ba6d7415270fa01c9c016028484646e2e4cc"
-  integrity sha512-9hBE3+/Ez97Dzf4P/NHwdDAVCAzz46Or/L/4rVCTlagH0GQWT8k/J9agbAiTmp6i6SEhqWJBjgc/aYB1NBTgig==
+"@polkadot/ui-shared@^0.45.0-beta.13":
+  version "0.45.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.13.tgz#4385a675502b93ea4242497068e73e5bcde02af9"
+  integrity sha512-uuj8AgBj+agovBdOvSqbGSomol086H/sObshXAjdLVJQmPwfADzLEsu/NZTRXPOD+Wcvw1q11tV7aewguqNBpw==
  dependencies:
    "@babel/runtime" "^7.6.0"
    "@types/color" "^3.0.0"