Fix Tab component styles to match mockups

This commit is contained in:
Mikhail Mikheev 2019-09-02 13:54:23 +04:00
parent de16921f60
commit 79ddcc718e
4 changed files with 88 additions and 38 deletions

View File

@ -31,7 +31,7 @@
"dependencies": { "dependencies": {
"@gnosis.pm/safe-contracts": "^1.0.0", "@gnosis.pm/safe-contracts": "^1.0.0",
"@gnosis.pm/util-contracts": "2.0.1", "@gnosis.pm/util-contracts": "2.0.1",
"@material-ui/core": "4.3.3", "@material-ui/core": "4.4.0",
"@material-ui/icons": "4.2.1", "@material-ui/icons": "4.2.1",
"@testing-library/jest-dom": "4.1.0", "@testing-library/jest-dom": "4.1.0",
"@welldone-software/why-did-you-render": "3.3.3", "@welldone-software/why-did-you-render": "3.3.3",
@ -109,13 +109,13 @@
"eslint-config-airbnb": "18.0.1", "eslint-config-airbnb": "18.0.1",
"eslint-plugin-flowtype": "4.2.0", "eslint-plugin-flowtype": "4.2.0",
"eslint-plugin-import": "2.18.2", "eslint-plugin-import": "2.18.2",
"eslint-plugin-jest": "22.15.2", "eslint-plugin-jest": "22.16.0",
"eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3", "eslint-plugin-react": "7.14.3",
"ethereumjs-abi": "0.6.8", "ethereumjs-abi": "0.6.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.2.0", "file-loader": "4.2.0",
"flow-bin": "0.106.2", "flow-bin": "0.106.3",
"fs-extra": "8.1.0", "fs-extra": "8.1.0",
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.4", "html-webpack-plugin": "^3.0.4",
@ -132,8 +132,8 @@
"storybook-host": "5.1.0", "storybook-host": "5.1.0",
"storybook-router": "^0.3.3", "storybook-router": "^0.3.3",
"style-loader": "1.0.0", "style-loader": "1.0.0",
"truffle": "5.0.33", "truffle": "5.0.34",
"truffle-contract": "4.0.30", "truffle-contract": "4.0.31",
"truffle-solidity-loader": "0.1.32", "truffle-solidity-loader": "0.1.32",
"uglifyjs-webpack-plugin": "2.2.0", "uglifyjs-webpack-plugin": "2.2.0",
"url-loader": "^2.1.0", "url-loader": "^2.1.0",

View File

@ -15,7 +15,7 @@ import NoSafe from '~/components/NoSafe'
import { type SelectorProps } from '~/routes/safe/container/selector' import { type SelectorProps } from '~/routes/safe/container/selector'
import { getEtherScanLink } from '~/logic/wallets/getWeb3' import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { import {
sm, xs, secondary, smallFontSize, sm, xs, secondary, smallFontSize, border,
} from '~/theme/variables' } from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard' import { copyToClipboard } from '~/utils/clipboard'
import Balances from './Balances' import Balances from './Balances'
@ -130,7 +130,7 @@ class Layout extends React.Component<Props, State> {
<Identicon address={address} diameter={50} /> <Identicon address={address} diameter={50} />
<Block className={classes.name}> <Block className={classes.name}>
<Row> <Row>
<Heading tag="h2" color="secondary" testId={SAFE_VIEW_NAME_HEADING_TEST_ID}> <Heading tag="h2" color="primary" testId={SAFE_VIEW_NAME_HEADING_TEST_ID}>
{name} {name}
</Heading> </Heading>
{!granted && <Block className={classes.readonly}>Read Only</Block>} {!granted && <Block className={classes.readonly}>Read Only</Block>}
@ -152,7 +152,7 @@ class Layout extends React.Component<Props, State> {
<Tab label="Settings" data-testid={SETTINGS_TAB_BTN_TEST_ID} /> <Tab label="Settings" data-testid={SETTINGS_TAB_BTN_TEST_ID} />
</Tabs> </Tabs>
</Row> </Row>
<Hairline color="#d4d53d" /> <Hairline color={border} />
{tabIndex === 0 && ( {tabIndex === 0 && (
<Balances <Balances
ethBalance={ethBalance} ethBalance={ethBalance}

View File

@ -1,6 +1,7 @@
// @flow // @flow
import { createMuiTheme } from '@material-ui/core/styles' import { createMuiTheme } from '@material-ui/core/styles'
import { import {
extraSmallFontSize,
mediumFontSize, mediumFontSize,
smallFontSize, smallFontSize,
disabled, disabled,
@ -208,9 +209,13 @@ export default createMuiTheme({
root: { root: {
fontFamily: 'Averta, monospace', fontFamily: 'Averta, monospace',
fontWeight: 'normal', fontWeight: 'normal',
fontSize: extraSmallFontSize,
'&$selected': { '&$selected': {
fontWeight: bolderFont, fontWeight: boldFont,
}, },
'@media (min-width: 960px)': {
fontSize: extraSmallFontSize, // override material-ui media query
}
}, },
}, },
MuiTablePagination: { MuiTablePagination: {

103
yarn.lock
View File

@ -1518,16 +1518,16 @@
"@types/istanbul-reports" "^1.1.1" "@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0" "@types/yargs" "^13.0.0"
"@material-ui/core@4.3.3": "@material-ui/core@4.4.0":
version "4.3.3" version "4.4.0"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.3.3.tgz#38a02331da7916c18e65c3dc56f3f6a67ba60c07" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.0.tgz#820b6ee91da9eaf4018ff9e87e6ca04fc985e35a"
integrity sha512-wUQjoJEbtVWYi+R9gBWCPGy0O+c0oY8cAp2TugyB70f89ahq/cnfnTbMZl6O2arKe2xQlfAMzY8rOOy8UMzJoQ== integrity sha512-p6yDcLYYHzJD0A6im+prcCahZBdlhh2OrTGQ4W1XN1X5uiMIg4niJ8FYBpgV0ssaluO+EYlaAKp2qGeMNRr/bA==
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
"@material-ui/styles" "^4.3.3" "@material-ui/styles" "^4.3.3"
"@material-ui/system" "^4.3.3" "@material-ui/system" "^4.3.3"
"@material-ui/types" "^4.1.1" "@material-ui/types" "^4.1.1"
"@material-ui/utils" "^4.3.0" "@material-ui/utils" "^4.4.0"
"@types/react-transition-group" "^4.2.0" "@types/react-transition-group" "^4.2.0"
clsx "^1.0.2" clsx "^1.0.2"
convert-css-length "^2.0.1" convert-css-length "^2.0.1"
@ -1597,10 +1597,10 @@
prop-types "^15.7.2" prop-types "^15.7.2"
react-is "^16.8.0" react-is "^16.8.0"
"@material-ui/utils@^4.3.0": "@material-ui/utils@^4.4.0":
version "4.3.0" version "4.4.0"
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.3.0.tgz#ea7f09815c792e80f270ef8b916517c3f9caba13" resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.4.0.tgz#9275421e2798a067850d201212d46f12725828ad"
integrity sha512-tK3Z/ap5ifPQwIryuGQ+AHLh2hEyBLRPj4NCMcqVrQfD+0KH2IP5BXR4A+wGVsyamKfLaOc8tz1fzxZblsztpw== integrity sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
prop-types "^15.7.2" prop-types "^15.7.2"
@ -2290,6 +2290,25 @@
"@testing-library/dom" "^6.0.0" "@testing-library/dom" "^6.0.0"
"@types/testing-library__react" "^9.1.0" "@types/testing-library__react" "^9.1.0"
"@truffle/blockchain-utils@^0.0.11":
version "0.0.11"
resolved "https://registry.yarnpkg.com/@truffle/blockchain-utils/-/blockchain-utils-0.0.11.tgz#9886f4cb7a9f20deded4451ac78f8567ae5c0d75"
integrity sha512-9MyQ/20M96clhIcC7fVFIckGSB8qMsmcdU6iYt98HXJ9GOLNKsCaJFz1OVsJncVreYwTUhoEXTrVBc8zrmPDJQ==
"@truffle/contract-schema@^3.0.14":
version "3.0.14"
resolved "https://registry.yarnpkg.com/@truffle/contract-schema/-/contract-schema-3.0.14.tgz#989420cfc5c933225e8f33277ca7c5f4261e0bf9"
integrity sha512-st97pzQg1xvv3MXf+dPRScltOl9JpJ1+JzaRJG47IJwswgFBG+Gg9MApqEsD833qEZ67lBNWRIHVXY/xSwnTIw==
dependencies:
ajv "^6.10.0"
crypto-js "^3.1.9-1"
debug "^4.1.0"
"@truffle/error@^0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@truffle/error/-/error-0.0.6.tgz#75d499845b4b3a40537889e7d04c663afcaee85d"
integrity sha512-QUM9ZWiwlXGixFGpV18g5I6vua6/r+ZV9W/5DQA5go9A3eZUNPHPaTKMIQPJLYn6+ZV5jg5H28zCHq56LHF3yA==
"@truffle/solidity-utils@^1.2.4": "@truffle/solidity-utils@^1.2.4":
version "1.2.4" version "1.2.4"
resolved "https://registry.yarnpkg.com/@truffle/solidity-utils/-/solidity-utils-1.2.4.tgz#d3bfa322e8f9f144c5a7f35a01f7a4bea9043137" resolved "https://registry.yarnpkg.com/@truffle/solidity-utils/-/solidity-utils-1.2.4.tgz#d3bfa322e8f9f144c5a7f35a01f7a4bea9043137"
@ -7002,10 +7021,10 @@ eslint-plugin-import@2.18.2:
read-pkg-up "^2.0.0" read-pkg-up "^2.0.0"
resolve "^1.11.0" resolve "^1.11.0"
eslint-plugin-jest@22.15.2: eslint-plugin-jest@22.16.0:
version "22.15.2" version "22.16.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.15.2.tgz#e3c10d9391f787744e31566f69ebb70c3a98e398" resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.16.0.tgz#30c4e0e9dc331beb2e7369b70dd1363690c1ce05"
integrity sha512-p4NME9TgXIt+KgpxcXyNBvO30ZKxwFAO1dJZBc2OGfDnXVEtPwEyNs95GSr6RIE3xLHdjd8ngDdE2icRRXrbxg== integrity sha512-eBtSCDhO1k7g3sULX/fuRK+upFQ7s548rrBtxDyM1fSoY7dTWp/wICjrJcDZKVsW7tsFfH22SG+ZaxG5BZodIg==
dependencies: dependencies:
"@typescript-eslint/experimental-utils" "^1.13.0" "@typescript-eslint/experimental-utils" "^1.13.0"
@ -8198,10 +8217,10 @@ flatted@^2.0.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08" resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg== integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
flow-bin@0.106.2: flow-bin@0.106.3:
version "0.106.2" version "0.106.3"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.106.2.tgz#624db7c04b00879ac14853434817c7bc5e1419db" resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.106.3.tgz#87b5647bc23ae0efceabb6c50490c02a8478960c"
integrity sha512-pALWFKf+AQiX4VfSEdxruj2bSMigsrAcg8djV6Hue2y3FJyiA/Z42UkEv6zEvSIpDj1EL+cRBvJNUx6L2+gdTQ== integrity sha512-QDwmhsMmiASmwgr6r2WTz9RPsN0pb84PY0whz0JqFaBX7/Fx2wj2MOtjbR2yv+qWZnozP9U40Jd9LLt8rC3WSQ==
flow-stoplight@^1.0.0: flow-stoplight@^1.0.0:
version "1.0.0" version "1.0.0"
@ -17179,17 +17198,17 @@ truffle-contract@4.0.0-next.0:
web3-eth-abi "1.0.0-beta.35" web3-eth-abi "1.0.0-beta.35"
web3-utils "1.0.0-beta.35" web3-utils "1.0.0-beta.35"
truffle-contract@4.0.30, truffle-contract@^4.0.30: truffle-contract@4.0.31:
version "4.0.30" version "4.0.31"
resolved "https://registry.yarnpkg.com/truffle-contract/-/truffle-contract-4.0.30.tgz#de0d7ac25c55dcafbe113f862f9a7fd5f83a1531" resolved "https://registry.yarnpkg.com/truffle-contract/-/truffle-contract-4.0.31.tgz#e43b7f648e2db352c857d1202d710029b107b68d"
integrity sha512-kQDqqhT6IPu1Vj111PzQvQ3xQiXx//cwFgMDZjaqRpBGuXGa5i80RxW+Vxfdn5pTrYk4pP0P7ZPyka9PJ248vw== integrity sha512-u3q+p1wiX5C2GpnluGx/d2iaJk7bcWshk2/TohiJyA2iQiTfkS7M4n9D9tY3JqpXR8PmD/TrA69RylO0RhITFA==
dependencies: dependencies:
"@truffle/blockchain-utils" "^0.0.11"
"@truffle/contract-schema" "^3.0.14"
"@truffle/error" "^0.0.6"
bignumber.js "^7.2.1" bignumber.js "^7.2.1"
ethers "^4.0.0-beta.1" ethers "^4.0.0-beta.1"
truffle-blockchain-utils "^0.0.10" truffle-interface-adapter "^0.2.5"
truffle-contract-schema "^3.0.13"
truffle-error "^0.0.5"
truffle-interface-adapter "^0.2.4"
web3 "1.2.1" web3 "1.2.1"
web3-core-promievent "1.2.1" web3-core-promievent "1.2.1"
web3-eth-abi "1.2.1" web3-eth-abi "1.2.1"
@ -17205,6 +17224,22 @@ truffle-contract@^2.0.3:
truffle-contract-schema "^0.0.5" truffle-contract-schema "^0.0.5"
web3 "^0.20.1" web3 "^0.20.1"
truffle-contract@^4.0.30:
version "4.0.30"
resolved "https://registry.yarnpkg.com/truffle-contract/-/truffle-contract-4.0.30.tgz#de0d7ac25c55dcafbe113f862f9a7fd5f83a1531"
integrity sha512-kQDqqhT6IPu1Vj111PzQvQ3xQiXx//cwFgMDZjaqRpBGuXGa5i80RxW+Vxfdn5pTrYk4pP0P7ZPyka9PJ248vw==
dependencies:
bignumber.js "^7.2.1"
ethers "^4.0.0-beta.1"
truffle-blockchain-utils "^0.0.10"
truffle-contract-schema "^3.0.13"
truffle-error "^0.0.5"
truffle-interface-adapter "^0.2.4"
web3 "1.2.1"
web3-core-promievent "1.2.1"
web3-eth-abi "1.2.1"
web3-utils "1.2.1"
truffle-core@^5.0.33: truffle-core@^5.0.33:
version "5.0.33" version "5.0.33"
resolved "https://registry.yarnpkg.com/truffle-core/-/truffle-core-5.0.33.tgz#c4abfa8493b4699a327491dc21127e3f6b6b29f1" resolved "https://registry.yarnpkg.com/truffle-core/-/truffle-core-5.0.33.tgz#c4abfa8493b4699a327491dc21127e3f6b6b29f1"
@ -17395,6 +17430,16 @@ truffle-interface-adapter@^0.2.4:
lodash "^4.17.13" lodash "^4.17.13"
web3 "1.2.1" web3 "1.2.1"
truffle-interface-adapter@^0.2.5:
version "0.2.5"
resolved "https://registry.yarnpkg.com/truffle-interface-adapter/-/truffle-interface-adapter-0.2.5.tgz#aa0bee635517b4a8e06adcdc99eacb993e68c243"
integrity sha512-EL39OpP8FcZ99ne1Rno3jImfb92Nectd4iVsZzoEUCBfbwHe7sr0k+i45guoruSoP8nMUE81Mov2s8I5pi6d9Q==
dependencies:
bn.js "^4.11.8"
ethers "^4.0.32"
lodash "^4.17.13"
web3 "1.2.1"
truffle-migrate@^3.0.31: truffle-migrate@^3.0.31:
version "3.0.31" version "3.0.31"
resolved "https://registry.yarnpkg.com/truffle-migrate/-/truffle-migrate-3.0.31.tgz#069247061a476e963f5b5ed5ff49785d72a6e196" resolved "https://registry.yarnpkg.com/truffle-migrate/-/truffle-migrate-3.0.31.tgz#069247061a476e963f5b5ed5ff49785d72a6e196"
@ -17492,10 +17537,10 @@ truffle-workflow-compile@^2.1.3:
truffle-external-compile "^1.0.15" truffle-external-compile "^1.0.15"
truffle-resolver "^5.0.15" truffle-resolver "^5.0.15"
truffle@5.0.33: truffle@5.0.34:
version "5.0.33" version "5.0.34"
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.33.tgz#7a56552fca630d8255faaf5133f17ef9a127abd0" resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.34.tgz#f2b667843418002511f5604254ed365ebdfa9534"
integrity sha512-Fc8fFZ/Pk6s/CZSvbe4RTd3gGMBTZQ2C6BYhN/xViwgKH/4NwuZmOC0EtO/eu/k7O3r8z3svz0jLMdH16DpRnw== integrity sha512-fSA3JjaIjFrgn4BGfoATg2ATVWS51240L8mEQdtqLUncOcFnMLTBEaVRujO/f97XW+ew0hUg13oS4H/2Z4dwtg==
dependencies: dependencies:
app-module-path "^2.2.0" app-module-path "^2.2.0"
mocha "5.2.0" mocha "5.2.0"