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": {
"@gnosis.pm/safe-contracts": "^1.0.0",
"@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",
"@testing-library/jest-dom": "4.1.0",
"@welldone-software/why-did-you-render": "3.3.3",
@ -109,13 +109,13 @@
"eslint-config-airbnb": "18.0.1",
"eslint-plugin-flowtype": "4.2.0",
"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-react": "7.14.3",
"ethereumjs-abi": "0.6.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.2.0",
"flow-bin": "0.106.2",
"flow-bin": "0.106.3",
"fs-extra": "8.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.4",
@ -132,8 +132,8 @@
"storybook-host": "5.1.0",
"storybook-router": "^0.3.3",
"style-loader": "1.0.0",
"truffle": "5.0.33",
"truffle-contract": "4.0.30",
"truffle": "5.0.34",
"truffle-contract": "4.0.31",
"truffle-solidity-loader": "0.1.32",
"uglifyjs-webpack-plugin": "2.2.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 { getEtherScanLink } from '~/logic/wallets/getWeb3'
import {
sm, xs, secondary, smallFontSize,
sm, xs, secondary, smallFontSize, border,
} from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard'
import Balances from './Balances'
@ -130,7 +130,7 @@ class Layout extends React.Component<Props, State> {
<Identicon address={address} diameter={50} />
<Block className={classes.name}>
<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}
</Heading>
{!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} />
</Tabs>
</Row>
<Hairline color="#d4d53d" />
<Hairline color={border} />
{tabIndex === 0 && (
<Balances
ethBalance={ethBalance}

View File

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

103
yarn.lock
View File

@ -1518,16 +1518,16 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"
"@material-ui/core@4.3.3":
version "4.3.3"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.3.3.tgz#38a02331da7916c18e65c3dc56f3f6a67ba60c07"
integrity sha512-wUQjoJEbtVWYi+R9gBWCPGy0O+c0oY8cAp2TugyB70f89ahq/cnfnTbMZl6O2arKe2xQlfAMzY8rOOy8UMzJoQ==
"@material-ui/core@4.4.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.0.tgz#820b6ee91da9eaf4018ff9e87e6ca04fc985e35a"
integrity sha512-p6yDcLYYHzJD0A6im+prcCahZBdlhh2OrTGQ4W1XN1X5uiMIg4niJ8FYBpgV0ssaluO+EYlaAKp2qGeMNRr/bA==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/styles" "^4.3.3"
"@material-ui/system" "^4.3.3"
"@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"
clsx "^1.0.2"
convert-css-length "^2.0.1"
@ -1597,10 +1597,10 @@
prop-types "^15.7.2"
react-is "^16.8.0"
"@material-ui/utils@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.3.0.tgz#ea7f09815c792e80f270ef8b916517c3f9caba13"
integrity sha512-tK3Z/ap5ifPQwIryuGQ+AHLh2hEyBLRPj4NCMcqVrQfD+0KH2IP5BXR4A+wGVsyamKfLaOc8tz1fzxZblsztpw==
"@material-ui/utils@^4.4.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.4.0.tgz#9275421e2798a067850d201212d46f12725828ad"
integrity sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==
dependencies:
"@babel/runtime" "^7.4.4"
prop-types "^15.7.2"
@ -2290,6 +2290,25 @@
"@testing-library/dom" "^6.0.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":
version "1.2.4"
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"
resolve "^1.11.0"
eslint-plugin-jest@22.15.2:
version "22.15.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.15.2.tgz#e3c10d9391f787744e31566f69ebb70c3a98e398"
integrity sha512-p4NME9TgXIt+KgpxcXyNBvO30ZKxwFAO1dJZBc2OGfDnXVEtPwEyNs95GSr6RIE3xLHdjd8ngDdE2icRRXrbxg==
eslint-plugin-jest@22.16.0:
version "22.16.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.16.0.tgz#30c4e0e9dc331beb2e7369b70dd1363690c1ce05"
integrity sha512-eBtSCDhO1k7g3sULX/fuRK+upFQ7s548rrBtxDyM1fSoY7dTWp/wICjrJcDZKVsW7tsFfH22SG+ZaxG5BZodIg==
dependencies:
"@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"
integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
flow-bin@0.106.2:
version "0.106.2"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.106.2.tgz#624db7c04b00879ac14853434817c7bc5e1419db"
integrity sha512-pALWFKf+AQiX4VfSEdxruj2bSMigsrAcg8djV6Hue2y3FJyiA/Z42UkEv6zEvSIpDj1EL+cRBvJNUx6L2+gdTQ==
flow-bin@0.106.3:
version "0.106.3"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.106.3.tgz#87b5647bc23ae0efceabb6c50490c02a8478960c"
integrity sha512-QDwmhsMmiASmwgr6r2WTz9RPsN0pb84PY0whz0JqFaBX7/Fx2wj2MOtjbR2yv+qWZnozP9U40Jd9LLt8rC3WSQ==
flow-stoplight@^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-utils "1.0.0-beta.35"
truffle-contract@4.0.30, 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==
truffle-contract@4.0.31:
version "4.0.31"
resolved "https://registry.yarnpkg.com/truffle-contract/-/truffle-contract-4.0.31.tgz#e43b7f648e2db352c857d1202d710029b107b68d"
integrity sha512-u3q+p1wiX5C2GpnluGx/d2iaJk7bcWshk2/TohiJyA2iQiTfkS7M4n9D9tY3JqpXR8PmD/TrA69RylO0RhITFA==
dependencies:
"@truffle/blockchain-utils" "^0.0.11"
"@truffle/contract-schema" "^3.0.14"
"@truffle/error" "^0.0.6"
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"
truffle-interface-adapter "^0.2.5"
web3 "1.2.1"
web3-core-promievent "1.2.1"
web3-eth-abi "1.2.1"
@ -17205,6 +17224,22 @@ truffle-contract@^2.0.3:
truffle-contract-schema "^0.0.5"
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:
version "5.0.33"
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"
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:
version "3.0.31"
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-resolver "^5.0.15"
truffle@5.0.33:
version "5.0.33"
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.33.tgz#7a56552fca630d8255faaf5133f17ef9a127abd0"
integrity sha512-Fc8fFZ/Pk6s/CZSvbe4RTd3gGMBTZQ2C6BYhN/xViwgKH/4NwuZmOC0EtO/eu/k7O3r8z3svz0jLMdH16DpRnw==
truffle@5.0.34:
version "5.0.34"
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.34.tgz#f2b667843418002511f5604254ed365ebdfa9534"
integrity sha512-fSA3JjaIjFrgn4BGfoATg2ATVWS51240L8mEQdtqLUncOcFnMLTBEaVRujO/f97XW+ew0hUg13oS4H/2Z4dwtg==
dependencies:
app-module-path "^2.2.0"
mocha "5.2.0"