mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Updating design tokens package and shadow values with new tokens (#15264)
* Updating design tokens v1.8 and shadows * Adding missing stories * Some fixes and updates to css and stories * removing unneeded story * Fixing story order
This commit is contained in:
George Marshall
GitHub
parent
45f5635cd8
commit
5592687df1
@ -16,99 +16,99 @@ const state = {
|
||||
},
|
||||
networkList: [
|
||||
{
|
||||
blockExplorerUrl: "https://etherscan.io",
|
||||
chainId: "0x1",
|
||||
blockExplorerUrl: 'https://etherscan.io',
|
||||
chainId: '0x1',
|
||||
iconColor: 'var(--mainnet)',
|
||||
isATestNetwork: false,
|
||||
labelKey: "mainnet",
|
||||
providerType: "mainnet",
|
||||
rpcUrl: "https://mainnet.infura.io/v3/",
|
||||
ticker: "ETH",
|
||||
labelKey: 'mainnet',
|
||||
providerType: 'mainnet',
|
||||
rpcUrl: 'https://mainnet.infura.io/v3/',
|
||||
ticker: 'ETH',
|
||||
viewOnly: true,
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://ropsten.etherscan.io",
|
||||
chainId: "0x3",
|
||||
blockExplorerUrl: 'https://ropsten.etherscan.io',
|
||||
chainId: '0x3',
|
||||
iconColor: 'var(--ropsten)',
|
||||
isATestNetwork: true,
|
||||
labelKey: "ropsten",
|
||||
providerType: "ropsten",
|
||||
rpcUrl: "https://ropsten.infura.io/v3/",
|
||||
ticker: "ETH",
|
||||
labelKey: 'ropsten',
|
||||
providerType: 'ropsten',
|
||||
rpcUrl: 'https://ropsten.infura.io/v3/',
|
||||
ticker: 'ETH',
|
||||
viewOnly: true,
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://rinkeby.etherscan.io",
|
||||
chainId: "0x4",
|
||||
blockExplorerUrl: 'https://rinkeby.etherscan.io',
|
||||
chainId: '0x4',
|
||||
iconColor: 'var(--rinkeby)',
|
||||
isATestNetwork: true,
|
||||
labelKey: "rinkeby",
|
||||
providerType: "rinkeby",
|
||||
rpcUrl: "https://rinkeby.infura.io/v3/",
|
||||
ticker: "ETH",
|
||||
labelKey: 'rinkeby',
|
||||
providerType: 'rinkeby',
|
||||
rpcUrl: 'https://rinkeby.infura.io/v3/',
|
||||
ticker: 'ETH',
|
||||
viewOnly: true,
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://goerli.etherscan.io",
|
||||
chainId: "0x5",
|
||||
blockExplorerUrl: 'https://goerli.etherscan.io',
|
||||
chainId: '0x5',
|
||||
iconColor: 'var(--goerli)',
|
||||
isATestNetwork: true,
|
||||
labelKey: "goerli",
|
||||
providerType: "goerli",
|
||||
rpcUrl: "https://goerli.infura.io/v3/",
|
||||
ticker: "ETH",
|
||||
labelKey: 'goerli',
|
||||
providerType: 'goerli',
|
||||
rpcUrl: 'https://goerli.infura.io/v3/',
|
||||
ticker: 'ETH',
|
||||
viewOnly: true,
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://kovan.etherscan.io",
|
||||
chainId: "0x2a",
|
||||
blockExplorerUrl: 'https://kovan.etherscan.io',
|
||||
chainId: '0x2a',
|
||||
iconColor: 'var(--kovan)',
|
||||
isATestNetwork: true,
|
||||
labelKey: "kovan",
|
||||
providerType: "kovan",
|
||||
rpcUrl: "https://kovan.infura.io/v3/",
|
||||
ticker: "ETH",
|
||||
labelKey: 'kovan',
|
||||
providerType: 'kovan',
|
||||
rpcUrl: 'https://kovan.infura.io/v3/',
|
||||
ticker: 'ETH',
|
||||
viewOnly: true,
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "",
|
||||
chainId: "0x539",
|
||||
blockExplorerUrl: '',
|
||||
chainId: '0x539',
|
||||
iconColor: 'var(--localhost)',
|
||||
isATestNetwork: true,
|
||||
label: "Localhost 8545",
|
||||
providerType: "rpc",
|
||||
rpcUrl: "http://localhost:8545",
|
||||
ticker: "ETH",
|
||||
label: 'Localhost 8545',
|
||||
providerType: 'rpc',
|
||||
rpcUrl: 'http://localhost:8545',
|
||||
ticker: 'ETH',
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://bscscan.com",
|
||||
chainId: "0x38",
|
||||
blockExplorerUrl: 'https://bscscan.com',
|
||||
chainId: '0x38',
|
||||
iconColor: 'var(--localhost)',
|
||||
isATestNetwork: false,
|
||||
label: "Binance Smart Chain",
|
||||
providerType: "rpc",
|
||||
rpcUrl: "https://bsc-dataseed.binance.org/",
|
||||
ticker: "BNB",
|
||||
label: 'Binance Smart Chain',
|
||||
providerType: 'rpc',
|
||||
rpcUrl: 'https://bsc-dataseed.binance.org/',
|
||||
ticker: 'BNB',
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://cchain.explorer.avax.network/",
|
||||
chainId: "0xa86a",
|
||||
blockExplorerUrl: 'https://cchain.explorer.avax.network/',
|
||||
chainId: '0xa86a',
|
||||
iconColor: 'var(--localhost)',
|
||||
isATestNetwork: false,
|
||||
label: "Avalanche",
|
||||
providerType: "rpc",
|
||||
rpcUrl: "https://api.avax.network/ext/bc/C/rpc",
|
||||
ticker: "AVAX",
|
||||
label: 'Avalanche',
|
||||
providerType: 'rpc',
|
||||
rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
|
||||
ticker: 'AVAX',
|
||||
},
|
||||
{
|
||||
blockExplorerUrl: "https://polygonscan.com",
|
||||
chainId: "0x89",
|
||||
blockExplorerUrl: 'https://polygonscan.com',
|
||||
chainId: '0x89',
|
||||
iconColor: 'var(--localhost)',
|
||||
isATestNetwork: false,
|
||||
label: "Polygon",
|
||||
providerType: "rpc",
|
||||
rpcUrl: "https://polygon-rpc.com",
|
||||
ticker: "MATIC",
|
||||
label: 'Polygon',
|
||||
providerType: 'rpc',
|
||||
rpcUrl: 'https://polygon-rpc.com',
|
||||
ticker: 'MATIC',
|
||||
},
|
||||
],
|
||||
metamask: {
|
||||
@ -133,7 +133,7 @@ const state = {
|
||||
'0x',
|
||||
],
|
||||
occurrences: 12,
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xc00e94cb662c3520282e6f5717214004a7f26888': {
|
||||
address: '0xc00e94cb662c3520282e6f5717214004a7f26888',
|
||||
@ -154,23 +154,18 @@ const state = {
|
||||
'0x',
|
||||
],
|
||||
occurrences: 12,
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xfffffffff15abf397da76f1dcc1a1604f45126db': {
|
||||
address: '0xfffffffff15abf397da76f1dcc1a1604f45126db',
|
||||
symbol: 'FSW',
|
||||
decimals: 18,
|
||||
name: 'Falconswap',
|
||||
iconUrl: 'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
|
||||
aggregators: [
|
||||
'CoinGecko',
|
||||
'1inch',
|
||||
'Paraswap',
|
||||
'Zapper',
|
||||
'Zerion',
|
||||
],
|
||||
iconUrl:
|
||||
'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
|
||||
aggregators: ['CoinGecko', '1inch', 'Paraswap', 'Zapper', 'Zerion'],
|
||||
occurrences: 12,
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
|
||||
address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
|
||||
@ -193,70 +188,70 @@ const state = {
|
||||
'0x',
|
||||
],
|
||||
occurrences: 12,
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x6b175474e89094c44da98b954eedeac495271d0f': {
|
||||
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
|
||||
symbol: 'META',
|
||||
decimals: 18,
|
||||
image: 'metamark.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {
|
||||
address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
|
||||
symbol: '0X',
|
||||
decimals: 18,
|
||||
image: '0x.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
|
||||
address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
|
||||
symbol: 'AST',
|
||||
decimals: 18,
|
||||
image: 'ast.png',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
|
||||
address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
|
||||
symbol: 'BAT',
|
||||
decimals: 18,
|
||||
image: 'BAT_icon.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1': {
|
||||
address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
|
||||
symbol: 'CVL',
|
||||
decimals: 18,
|
||||
image: 'CVL_token.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': {
|
||||
address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
|
||||
symbol: 'GLA',
|
||||
decimals: 18,
|
||||
image: 'gladius.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x467Bccd9d29f223BcE8043b84E8C8B282827790F': {
|
||||
address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
|
||||
symbol: 'GNO',
|
||||
decimals: 18,
|
||||
image: 'gnosis.svg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0xff20817765cb7f73d4bde2e66e067e58d11095c2': {
|
||||
address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
|
||||
symbol: 'OMG',
|
||||
decimals: 18,
|
||||
image: 'omg.jpg',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
'0x8e870d67f660d95d5be530380d0ec0bd388289e1': {
|
||||
address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
|
||||
symbol: 'WED',
|
||||
decimals: 18,
|
||||
image: 'wed.png',
|
||||
unlisted: false
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
networkDetails: {
|
||||
@ -282,83 +277,84 @@ const state = {
|
||||
swapsFeatureIsLive: false,
|
||||
swapsQuoteRefreshTime: 60000,
|
||||
},
|
||||
"snapStates": {},
|
||||
"snaps": {
|
||||
"local:http://localhost:8080/": {
|
||||
"enabled": true,
|
||||
"id": "local:http://localhost:8080/",
|
||||
"initialPermissions": {
|
||||
"snap_confirm": {}
|
||||
snapStates: {},
|
||||
snaps: {
|
||||
'local:http://localhost:8080/': {
|
||||
enabled: true,
|
||||
id: 'local:http://localhost:8080/',
|
||||
initialPermissions: {
|
||||
snap_confirm: {},
|
||||
},
|
||||
"manifest": {
|
||||
"description": "An example MetaMask Snap.",
|
||||
"initialPermissions": {
|
||||
"snap_confirm": {}
|
||||
manifest: {
|
||||
description: 'An example MetaMask Snap.',
|
||||
initialPermissions: {
|
||||
snap_confirm: {},
|
||||
},
|
||||
"manifestVersion": "0.1",
|
||||
"proposedName": "MetaMask Example Snap",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/MetaMask/snaps-skunkworks.git"
|
||||
manifestVersion: '0.1',
|
||||
proposedName: 'MetaMask Example Snap',
|
||||
repository: {
|
||||
type: 'git',
|
||||
url: 'https://github.com/MetaMask/snaps-skunkworks.git',
|
||||
},
|
||||
"source": {
|
||||
"location": {
|
||||
"npm": {
|
||||
"filePath": "dist/bundle.js",
|
||||
"iconPath": "images/icon.svg",
|
||||
"packageName": "@metamask/example-snap",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
}
|
||||
source: {
|
||||
location: {
|
||||
npm: {
|
||||
filePath: 'dist/bundle.js',
|
||||
iconPath: 'images/icon.svg',
|
||||
packageName: '@metamask/example-snap',
|
||||
registry: 'https://registry.npmjs.org/',
|
||||
},
|
||||
},
|
||||
"shasum": "3lEt0yUu080DwV78neROaAAIQWXukSkMnP4OBhOhBnE="
|
||||
shasum: '3lEt0yUu080DwV78neROaAAIQWXukSkMnP4OBhOhBnE=',
|
||||
},
|
||||
"version": "0.6.0"
|
||||
version: '0.6.0',
|
||||
},
|
||||
"permissionName": "wallet_snap_local:http://localhost:8080/",
|
||||
"sourceCode": "(...)",
|
||||
"status": "stopped",
|
||||
"svgIcon": "<svg>...</svg>",
|
||||
"version": "0.6.0"
|
||||
permissionName: 'wallet_snap_local:http://localhost:8080/',
|
||||
sourceCode: '(...)',
|
||||
status: 'stopped',
|
||||
svgIcon: '<svg>...</svg>',
|
||||
version: '0.6.0',
|
||||
},
|
||||
"Filecoin Snap": {
|
||||
"enabled": true,
|
||||
"id": "npm:http://localhost:8080/",
|
||||
"initialPermissions": {
|
||||
"snap_confirm": {},
|
||||
"eth_accounts": {},
|
||||
"snap_manageState": {},
|
||||
'Filecoin Snap': {
|
||||
enabled: true,
|
||||
id: 'npm:http://localhost:8080/',
|
||||
initialPermissions: {
|
||||
snap_confirm: {},
|
||||
eth_accounts: {},
|
||||
snap_manageState: {},
|
||||
},
|
||||
"manifest": {
|
||||
"description": "This swap provides developers everywhere access to an entirely new data storage paradigm, even letting your programs store data autonomously. Learn more.",
|
||||
"initialPermissions": {
|
||||
"snap_confirm": {},
|
||||
"eth_accounts": {},
|
||||
"snap_manageState": {},
|
||||
manifest: {
|
||||
description:
|
||||
'This swap provides developers everywhere access to an entirely new data storage paradigm, even letting your programs store data autonomously. Learn more.',
|
||||
initialPermissions: {
|
||||
snap_confirm: {},
|
||||
eth_accounts: {},
|
||||
snap_manageState: {},
|
||||
},
|
||||
"manifestVersion": "0.1",
|
||||
"proposedName": "Filecoin Snap",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/MetaMask/snaps-skunkworks.git"
|
||||
manifestVersion: '0.1',
|
||||
proposedName: 'Filecoin Snap',
|
||||
repository: {
|
||||
type: 'git',
|
||||
url: 'https://github.com/MetaMask/snaps-skunkworks.git',
|
||||
},
|
||||
"source": {
|
||||
"location": {
|
||||
"npm": {
|
||||
"filePath": "dist/bundle.js",
|
||||
"iconPath": "images/icon.svg",
|
||||
"packageName": "@metamask/example-snap",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
}
|
||||
source: {
|
||||
location: {
|
||||
npm: {
|
||||
filePath: 'dist/bundle.js',
|
||||
iconPath: 'images/icon.svg',
|
||||
packageName: '@metamask/example-snap',
|
||||
registry: 'https://registry.npmjs.org/',
|
||||
},
|
||||
},
|
||||
"shasum": "3lEt0yUu080DwV78neROaAAIQWXukSkMnP4OBhOhBnE="
|
||||
shasum: '3lEt0yUu080DwV78neROaAAIQWXukSkMnP4OBhOhBnE=',
|
||||
},
|
||||
"version": "0.6.0"
|
||||
version: '0.6.0',
|
||||
},
|
||||
"permissionName": "wallet_snap_npm:http://localhost:8080/",
|
||||
"sourceCode": "(...)",
|
||||
"status": "stopped",
|
||||
"svgIcon": "<svg>...</svg>",
|
||||
"version": "0.6.0"
|
||||
permissionName: 'wallet_snap_npm:http://localhost:8080/',
|
||||
sourceCode: '(...)',
|
||||
status: 'stopped',
|
||||
svgIcon: '<svg>...</svg>',
|
||||
version: '0.6.0',
|
||||
},
|
||||
},
|
||||
accountArray: [
|
||||
@ -487,32 +483,46 @@ const state = {
|
||||
],
|
||||
detectedTokens: [
|
||||
{
|
||||
address: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
|
||||
address: '0x514910771AF9Ca656af840dff83E8264EcF986CA',
|
||||
decimals: 18,
|
||||
symbol: "LINK",
|
||||
image: "https://crypto.com/price/coin-data/icon/LINK/color_icon.png",
|
||||
aggregators:[
|
||||
"coinGecko","oneInch","paraswap","zapper","zerion"
|
||||
]
|
||||
symbol: 'LINK',
|
||||
image: 'https://crypto.com/price/coin-data/icon/LINK/color_icon.png',
|
||||
aggregators: ['coinGecko', 'oneInch', 'paraswap', 'zapper', 'zerion'],
|
||||
},
|
||||
{
|
||||
address: "0xc00e94Cb662C3520282E6f5717214004A7f26888",
|
||||
address: '0xc00e94Cb662C3520282E6f5717214004A7f26888',
|
||||
decimals: 18,
|
||||
symbol: "COMP",
|
||||
image: "https://crypto.com/price/coin-data/icon/COMP/color_icon.png",
|
||||
aggregators:[
|
||||
"bancor","cmc","cryptocom","coinGecko","oneInch","paraswap","pmm","zapper","zerion","zeroEx"
|
||||
]
|
||||
symbol: 'COMP',
|
||||
image: 'https://crypto.com/price/coin-data/icon/COMP/color_icon.png',
|
||||
aggregators: [
|
||||
'bancor',
|
||||
'cmc',
|
||||
'cryptocom',
|
||||
'coinGecko',
|
||||
'oneInch',
|
||||
'paraswap',
|
||||
'pmm',
|
||||
'zapper',
|
||||
'zerion',
|
||||
'zeroEx',
|
||||
],
|
||||
},
|
||||
{
|
||||
address: "0xfffffffFf15AbF397dA76f1dcc1A1604F45126DB",
|
||||
address: '0xfffffffFf15AbF397dA76f1dcc1A1604F45126DB',
|
||||
decimals: 18,
|
||||
symbol: "FSW",
|
||||
image: "https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184",
|
||||
aggregators:[
|
||||
"aave", "cmc","coinGecko","oneInch","paraswap","zapper","zerion"
|
||||
]
|
||||
}
|
||||
symbol: 'FSW',
|
||||
image:
|
||||
'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
|
||||
aggregators: [
|
||||
'aave',
|
||||
'cmc',
|
||||
'coinGecko',
|
||||
'oneInch',
|
||||
'paraswap',
|
||||
'zapper',
|
||||
'zerion',
|
||||
],
|
||||
},
|
||||
],
|
||||
pendingTokens: {},
|
||||
customNonceValue: '',
|
||||
@ -1305,7 +1315,7 @@ const state = {
|
||||
subjects: {
|
||||
'https://app.uniswap.org': {
|
||||
permissions: {
|
||||
'eth_accounts': {
|
||||
eth_accounts: {
|
||||
invoker: 'https://app.uniswap.org',
|
||||
parentCapability: 'eth_accounts',
|
||||
id: 'a7342e4b-beae-4525-a36c-c0635fd03359',
|
||||
@ -1319,14 +1329,14 @@ const state = {
|
||||
},
|
||||
},
|
||||
},
|
||||
"local:http://localhost:8080/": {
|
||||
'local:http://localhost:8080/': {
|
||||
permissions: {
|
||||
'snap_confirm': {
|
||||
invoker: "local:http://localhost:8080/",
|
||||
snap_confirm: {
|
||||
invoker: 'local:http://localhost:8080/',
|
||||
parentCapability: 'snap_confirm',
|
||||
id: 'a7342F4b-beae-4525-a36c-c0635fd03359',
|
||||
date: 1620710693178,
|
||||
caveats: []
|
||||
caveats: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -1424,30 +1434,30 @@ const state = {
|
||||
pendingApprovals: {},
|
||||
pendingApprovalCount: 0,
|
||||
subjectMetadata: {
|
||||
"http://localhost:8080": {
|
||||
'http://localhost:8080': {
|
||||
extensionId: null,
|
||||
iconUrl: null,
|
||||
name: "Hello, Snaps!",
|
||||
origin: "http://localhost:8080",
|
||||
subjectType: "website"
|
||||
name: 'Hello, Snaps!',
|
||||
origin: 'http://localhost:8080',
|
||||
subjectType: 'website',
|
||||
},
|
||||
"https://metamask.github.io": {
|
||||
'https://metamask.github.io': {
|
||||
extensionId: null,
|
||||
iconUrl: null,
|
||||
name: "Snaps Iframe Execution Environment",
|
||||
origin: "https://metamask.github.io",
|
||||
subjectType: "website"
|
||||
name: 'Snaps Iframe Execution Environment',
|
||||
origin: 'https://metamask.github.io',
|
||||
subjectType: 'website',
|
||||
},
|
||||
"local:http://localhost:8080/": {
|
||||
'local:http://localhost:8080/': {
|
||||
extensionId: null,
|
||||
iconUrl: null,
|
||||
name: "MetaMask Example Snap",
|
||||
origin: "local:http://localhost:8080/",
|
||||
subjectType: "snap",
|
||||
svgIcon: "<svg>...</svg>",
|
||||
version: "0.6.0"
|
||||
}
|
||||
}
|
||||
name: 'MetaMask Example Snap',
|
||||
origin: 'local:http://localhost:8080/',
|
||||
subjectType: 'snap',
|
||||
svgIcon: '<svg>...</svg>',
|
||||
version: '0.6.0',
|
||||
},
|
||||
},
|
||||
},
|
||||
appState: {
|
||||
shouldClose: false,
|
||||
@ -1456,7 +1466,14 @@ const state = {
|
||||
open: false,
|
||||
modalState: {
|
||||
name: null,
|
||||
props: {},
|
||||
props: {
|
||||
token: {
|
||||
address: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
|
||||
symbol: 'DAI',
|
||||
decimals: 18,
|
||||
},
|
||||
history: {},
|
||||
},
|
||||
},
|
||||
previousModalState: {
|
||||
name: null,
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
"@material-ui/core": "^4.11.0",
|
||||
"@metamask/contract-metadata": "^1.31.0",
|
||||
"@metamask/controllers": "^30.0.2",
|
||||
"@metamask/design-tokens": "^1.6.5",
|
||||
"@metamask/design-tokens": "^1.8.0",
|
||||
"@metamask/eth-ledger-bridge-keyring": "^0.13.0",
|
||||
"@metamask/eth-token-tracker": "^4.0.0",
|
||||
"@metamask/etherscan-link": "^2.1.0",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
width: 320px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-default);
|
||||
box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
min-width: 150px;
|
||||
color: var(--color-text-default);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ export class Dropdown extends Component {
|
||||
borderRadius: '4px',
|
||||
padding: '8px 16px',
|
||||
background: 'var(--color-background-default)',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
|
||||
...innerStyle,
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { GAS_ESTIMATE_TYPES } from '../../../../helpers/constants/common';
|
||||
import GasPriceButtonGroup from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/GasCustomization/GasPriceButtonGroup',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
handleGasPriceSelection: {
|
||||
action: 'handleGasPriceSelection',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
buttonDataLoading: false,
|
||||
className: 'gas-price-button-group',
|
||||
gasButtonInfo: [
|
||||
{
|
||||
gasEstimateType: GAS_ESTIMATE_TYPES.SLOW,
|
||||
feeInPrimaryCurrency: '$0.52',
|
||||
feeInSecondaryCurrency: '0.0048 ETH',
|
||||
timeEstimate: '~ 1 min 0 sec',
|
||||
priceInHexWei: '0xa1b2c3f',
|
||||
},
|
||||
{
|
||||
gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE,
|
||||
feeInPrimaryCurrency: '$0.39',
|
||||
feeInSecondaryCurrency: '0.004 ETH',
|
||||
timeEstimate: '~ 1 min 30 sec',
|
||||
priceInHexWei: '0xa1b2c39',
|
||||
},
|
||||
{
|
||||
gasEstimateType: GAS_ESTIMATE_TYPES.FAST,
|
||||
feeInPrimaryCurrency: '$0.30',
|
||||
feeInSecondaryCurrency: '0.00354 ETH',
|
||||
timeEstimate: '~ 2 min 1 sec',
|
||||
priceInHexWei: '0xa1b2c30',
|
||||
},
|
||||
],
|
||||
noButtonActiveByDefault: true,
|
||||
defaultActiveButtonIndex: 2,
|
||||
showCheck: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <GasPriceButtonGroup {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -195,7 +195,7 @@
|
||||
color: var(--color-text-default);
|
||||
width: 108px;
|
||||
height: 97px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.151579);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import GasSlider from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/GasCustomization/GasSlider',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
onChange: {
|
||||
action: 'onChange',
|
||||
},
|
||||
lowLabel: {
|
||||
control: 'text',
|
||||
},
|
||||
highLabel: {
|
||||
control: 'text',
|
||||
},
|
||||
value: {
|
||||
control: 'number',
|
||||
},
|
||||
step: {
|
||||
control: 'number',
|
||||
},
|
||||
max: {
|
||||
control: 'number',
|
||||
},
|
||||
min: {
|
||||
control: 'number',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = () => <GasSlider />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -17,7 +17,6 @@
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background-color: var(--color-primary-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
background: var(--color-background-default);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-size-md) var(--color-shadow-default);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 8px;
|
||||
min-height: 116px;
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import HideTokenConfirmationModal from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/Modals/HideTokenConfirmationModal',
|
||||
id: __filename,
|
||||
};
|
||||
|
||||
export const DefaultStory = () => <HideTokenConfirmationModal />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -2,7 +2,7 @@
|
||||
min-height: 250.72px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-size-md) var(--color-shadow-default);
|
||||
|
||||
&__container {
|
||||
padding: 24px 27px 21px;
|
||||
|
||||
@ -35,7 +35,7 @@ const modalContainerBaseStyle = {
|
||||
border: '1px solid var(--color-border-default)',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'var(--color-background-default)',
|
||||
boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
|
||||
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
|
||||
};
|
||||
|
||||
const modalContainerLaptopStyle = {
|
||||
@ -54,7 +54,7 @@ const accountModalStyle = {
|
||||
mobileModalStyle: {
|
||||
width: '95%',
|
||||
// top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
|
||||
borderRadius: '4px',
|
||||
top: '10%',
|
||||
transform: 'none',
|
||||
@ -65,7 +65,7 @@ const accountModalStyle = {
|
||||
laptopModalStyle: {
|
||||
width: '335px',
|
||||
// top: 'calc(33% + 45px)',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
|
||||
borderRadius: '4px',
|
||||
top: '10%',
|
||||
transform: 'none',
|
||||
@ -89,7 +89,7 @@ const MODALS = {
|
||||
left: '0',
|
||||
right: '0',
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
|
||||
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
|
||||
top: '0',
|
||||
display: 'flex',
|
||||
},
|
||||
@ -100,7 +100,7 @@ const MODALS = {
|
||||
left: '0',
|
||||
right: '0',
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
|
||||
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
|
||||
borderRadius: '7px',
|
||||
transform: 'none',
|
||||
height: 'calc(80% - 20px)',
|
||||
@ -117,7 +117,7 @@ const MODALS = {
|
||||
mobileModalStyle: {
|
||||
width: '95%',
|
||||
top: '10%',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
|
||||
transform: 'none',
|
||||
left: '0',
|
||||
right: '0',
|
||||
@ -127,7 +127,7 @@ const MODALS = {
|
||||
laptopModalStyle: {
|
||||
width: '375px',
|
||||
top: '10%',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
|
||||
transform: 'none',
|
||||
left: '0',
|
||||
right: '0',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-flow: column nowrap;
|
||||
background-color: var(--color-background-default);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba($black, 0.25);
|
||||
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
|
||||
|
||||
&__content {
|
||||
@extend %col-nowrap;
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import NewAccountModal from './new-account-modal.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/Modals/NewAccountModal',
|
||||
id: __filename,
|
||||
};
|
||||
|
||||
export const DefaultStory = () => <NewAccountModal />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -3,7 +3,7 @@
|
||||
width: 380px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
z-index: 25;
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--color-background-default);
|
||||
position: absolute;
|
||||
box-shadow: 0 2px 2px 0.5px rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
&__identicon-initial {
|
||||
@ -63,7 +62,7 @@
|
||||
font-size: 60px;
|
||||
color: var(--color-background-default);
|
||||
z-index: 1;
|
||||
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.422);
|
||||
text-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&__info {
|
||||
@ -83,7 +82,5 @@
|
||||
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.identicon {}
|
||||
}
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -194,7 +194,7 @@
|
||||
.btn-raised {
|
||||
color: var(--color-primary-default);
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
padding: 6px;
|
||||
height: initial;
|
||||
min-height: initial;
|
||||
@ -214,12 +214,16 @@ input[type="submit"][disabled] {
|
||||
transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
border: 1px solid var(--color-primary-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
border-color: var(--color-primary-disabled);
|
||||
@ -234,6 +238,10 @@ input[type="submit"][disabled] {
|
||||
&.btn-default {
|
||||
border: 1px solid var(--color-icon-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
border-color: var(--color-border-muted);
|
||||
@ -248,6 +256,10 @@ input[type="submit"][disabled] {
|
||||
&.btn-danger {
|
||||
border: 1px solid var(--color-error-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
border-color: var(--color-error-disabled);
|
||||
@ -262,6 +274,10 @@ input[type="submit"][disabled] {
|
||||
&.btn-warning {
|
||||
border: 1px solid var(--color-warning-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
border-color: var(--color-warning-alternative);
|
||||
@ -276,6 +292,10 @@ input[type="submit"][disabled] {
|
||||
&.btn-primary {
|
||||
background-color: var(--color-primary-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
background-color: var(--color-primary-disabled);
|
||||
@ -289,6 +309,10 @@ input[type="submit"][disabled] {
|
||||
&.btn-danger-primary {
|
||||
background-color: var(--color-error-default);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
background-color: var(--color-error-disabled);
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
&--dismissible {
|
||||
&#{$self}--first {
|
||||
box-shadow: 0 -5px 5px -5px var(--color-overlay-default);
|
||||
box-shadow: 0 -5px 5px -5px var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@include H6;
|
||||
|
||||
background: var(--color-background-default);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
border-radius: 8px;
|
||||
width: 225px;
|
||||
color: var(--color-text-default);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.page-container {
|
||||
width: 408px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
66
ui/components/ui/page-container/page-container.stories.js
Normal file
66
ui/components/ui/page-container/page-container.stories.js
Normal file
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import PageContainer from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/PageContainer',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
backButtonString: {
|
||||
control: 'text',
|
||||
},
|
||||
backButtonStyles: {
|
||||
control: 'object',
|
||||
},
|
||||
headerCloseText: {
|
||||
control: 'text',
|
||||
},
|
||||
onBackButtonClick: {
|
||||
action: 'onBackButtonClick',
|
||||
},
|
||||
onClose: {
|
||||
action: 'onClose',
|
||||
},
|
||||
showBackButton: {
|
||||
control: 'boolean',
|
||||
},
|
||||
subtitle: {
|
||||
control: 'text',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
},
|
||||
defaultActiveTabIndex: {
|
||||
control: 'number',
|
||||
},
|
||||
tabsComponent: {
|
||||
control: 'node',
|
||||
},
|
||||
contentComponent: {
|
||||
control: 'node',
|
||||
},
|
||||
cancelText: {
|
||||
control: 'text',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
hideCancel: {
|
||||
control: 'boolean',
|
||||
},
|
||||
onCancel: {
|
||||
action: 'onCancel',
|
||||
},
|
||||
onSubmit: {
|
||||
action: 'onSubmit',
|
||||
},
|
||||
submitText: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<PageContainer {...args}>Page container</PageContainer>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -15,7 +15,7 @@
|
||||
position: absolute;
|
||||
width: 328px;
|
||||
max-height: 94vh;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
|
||||
border-radius: 10px;
|
||||
background: var(--color-background-default);
|
||||
}
|
||||
@ -104,6 +104,6 @@
|
||||
background: var(--color-background-default);
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
padding: 6px;
|
||||
background: var(--color-background-default);
|
||||
cursor: pointer;
|
||||
|
||||
@ -35,13 +35,13 @@ const styles = {
|
||||
backgroundColor: 'var(--color-primary-default)',
|
||||
border: '1px solid var(--color-border-muted)',
|
||||
boxSizing: 'border-box',
|
||||
boxShadow: '0px 0px 14px 0px rgba(0, 0, 0, 0.18)',
|
||||
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
|
||||
'&:focus, &$active': {
|
||||
height: 20,
|
||||
width: 20,
|
||||
marginTop: -7,
|
||||
marginLeft: -7,
|
||||
boxShadow: '0px 0px 14px 0px rgba(0, 0, 0, 0.18)',
|
||||
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
|
||||
},
|
||||
'&:hover': {
|
||||
height: 22,
|
||||
@ -49,7 +49,7 @@ const styles = {
|
||||
marginTop: -8,
|
||||
marginLeft: -8,
|
||||
border: 'none',
|
||||
boxShadow: '0px 0px 14px 0px rgba(0, 0, 0, 0.18)',
|
||||
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.tippy-tooltip.tippy-tooltip--mm-custom-theme {
|
||||
background: var(--color-background-default);
|
||||
color: var(--color-text-default);
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: var(--shadow-size-md) var(--color-shadow-default);
|
||||
padding: 12px 16px;
|
||||
padding-bottom: 11px;
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba($black, 0.24);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
flex: 0 0 auto;
|
||||
-moz-animation: fadein 1s;
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
|
||||
width: 85vw;
|
||||
margin-bottom: 10vh;
|
||||
min-height: 90vh;
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
|
||||
.main-container {
|
||||
width: 80vw;
|
||||
min-height: 82vh;
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,7 +79,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
|
||||
.main-container {
|
||||
width: 62vw;
|
||||
min-height: 82vh;
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.send-screen-card {
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
padding: 46px 40.5px 26px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
@ -49,7 +49,7 @@
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid var(--color-border-muted);
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
z-index: 25;
|
||||
@ -184,7 +184,7 @@
|
||||
height: 307px;
|
||||
background-color: var(--color-background-default);
|
||||
opacity: 1;
|
||||
box-shadow: var(--color-border-muted) 0 0 5px;
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
z-index: 1050;
|
||||
padding: 13px 19px;
|
||||
border-radius: 4px;
|
||||
@ -200,7 +200,7 @@
|
||||
transform: rotate(45deg);
|
||||
left: 107px;
|
||||
top: 294px;
|
||||
box-shadow: 2px 2px 2px var(--color-border-muted);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
.customize-gas-tooltip-container input[type='number']::-webkit-inner-spin-button {
|
||||
@ -326,7 +326,7 @@
|
||||
width: 498px;
|
||||
height: 605px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
padding: 46px 40.5px 26px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
@ -406,7 +406,7 @@
|
||||
width: 380px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
z-index: 25;
|
||||
@ -617,7 +617,7 @@
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
margin-top: 11px;
|
||||
margin-left: -1px;
|
||||
overflow-y: scroll;
|
||||
@ -705,7 +705,7 @@
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
top: 65px;
|
||||
left: 0;
|
||||
box-sizing: content-box;
|
||||
@ -864,7 +864,7 @@
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
&__overview {
|
||||
box-shadow: 0 3px 4px rgba(135, 134, 134, 0.16);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
width: 380px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
z-index: 25;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
width: 380px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
z-index: 25;
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.new-account {
|
||||
width: 375px;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
z-index: 25;
|
||||
height: unset;
|
||||
overflow: auto;
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
display: inline-flex;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
// TODO: fix style import order so this isn't required to override specificity of `tab` class
|
||||
&__main-view &__tabs {
|
||||
border: none;
|
||||
box-shadow: 0 3px 4px rgba(135, 134, 134, 0.16);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&__main-view &__tab {
|
||||
@ -116,7 +116,7 @@
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba($black, 0.24);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
margin-right: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@ -179,7 +179,7 @@
|
||||
|
||||
&--with-input {
|
||||
width: 120px;
|
||||
box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
border-width: 2px;
|
||||
border-radius: 13px;
|
||||
height: 32px;
|
||||
|
||||
@ -39,7 +39,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
&__list {
|
||||
background: var(--color-background-default);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
&__open-dropdown,
|
||||
&__open-to-dropdown {
|
||||
max-height: 330px;
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
&--open {
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); /* TODO! */
|
||||
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
||||
border: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
|
||||
&__search-list--open {
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: var(--shadow-size-md) var(--color-shadow-default);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
width: 460px;
|
||||
background: var(--color-background-default);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
border-radius: 8px;
|
||||
height: 620px;
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
&--selected {
|
||||
color: var(--color-primary-inverse);
|
||||
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
|
||||
box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
|
||||
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
|
||||
border-radius: 8px;
|
||||
height: 64px;
|
||||
|
||||
|
||||
@ -2853,10 +2853,10 @@
|
||||
web3 "^0.20.7"
|
||||
web3-provider-engine "^16.0.3"
|
||||
|
||||
"@metamask/design-tokens@^1.6.0", "@metamask/design-tokens@^1.6.5":
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.7.0.tgz#fab069c0101da9e25d35ae051df2ff6bb5ff7a38"
|
||||
integrity sha512-ejakgcsnTlLQmMrKb8XixXgExsYuMjlv71lkqJXeT0wa2oe4skVhB2dZul7Y9W4vYvQzTkwsW2NLfaj273eeEw==
|
||||
"@metamask/design-tokens@^1.6.0", "@metamask/design-tokens@^1.8.0":
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.8.0.tgz#072f455d23e4650ee81681ef066a99a56a9b573a"
|
||||
integrity sha512-EO0WaMRPcegh2EPWdmAqtFX0aZ7hO0NyJasUQyVrYeN1XNGUC2WzXfqwaI0wSV79NE/WEE3c9g5se+MQMExLew==
|
||||
|
||||
"@metamask/eslint-config-jest@^9.0.0":
|
||||
version "9.0.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user