TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updating network colors with design tokens (#16543)

Browse Source 
* Updating network colors with design tokens

* Style update to flask page
feature/default_network_editable
George Marshall 2 years ago committed by GitHub
parent 653031b909
commit 4c809a339d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 53 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 65
      .storybook/test-data.js
  2. 6
      ui/components/app/flask/experimental-area/index.scss
  3. 8
      ui/css/design-system/colors.scss
  4. 5
      ui/css/utilities/colors.scss

65
.storybook/test-data.js
Unescape View File

@ -29,7 +29,7 @@ const state = {
{
blockExplorerUrl: 'https://goerli.etherscan.io',
chainId: '0x5',
iconColor: 'var(--goerli)',
iconColor: 'var(--color-network-goerli-default)',
isATestNetwork: true,
labelKey: 'goerli',
providerType: 'goerli',
@ -40,7 +40,7 @@ const state = {
{
blockExplorerUrl: 'https://sepolia.etherscan.io',
chainId: '0xaa36a7',
iconColor: 'var(--sepolia)',
iconColor: 'var(--color-network-sepolia-default)',
isATestNetwork: true,
labelKey: 'sepolia',
providerType: 'sepolia',
@ -51,7 +51,7 @@ const state = {
{
blockExplorerUrl: '',
chainId: '0x539',
iconColor: 'var(--localhost)',
iconColor: 'var(--color-network-localhost-default)',
isATestNetwork: true,
label: 'Localhost 8545',
providerType: 'rpc',
@ -61,7 +61,7 @@ const state = {
{
blockExplorerUrl: 'https://bscscan.com',
chainId: '0x38',
iconColor: 'var(--localhost)',
iconColor: 'var(--color-network-localhost-default)',
isATestNetwork: false,
label: 'Binance Smart Chain',
providerType: 'rpc',
@ -71,7 +71,7 @@ const state = {
{
blockExplorerUrl: 'https://cchain.explorer.avax.network/',
chainId: '0xa86a',
iconColor: 'var(--localhost)',
iconColor: 'var(--color-network-localhost-default)',
isATestNetwork: false,
label: 'Avalanche',
providerType: 'rpc',
@ -81,7 +81,7 @@ const state = {
{
blockExplorerUrl: 'https://polygonscan.com',
chainId: '0x89',
iconColor: 'var(--localhost)',
iconColor: 'var(--color-network-localhost-default)',
isATestNetwork: false,
label: 'Polygon',
providerType: 'rpc',
@ -142,7 +142,7 @@ const state = {
iconUrl:
'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
aggregators: ['CoinGecko', '1inch', 'Lifi'],
occurrences:3,
occurrences: 3,
unlisted: false,
},
'0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
@ -381,8 +381,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
gas: '0xcb28',
gasPrice: '0x77359400',
},
@ -401,8 +400,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
gas: '0xcb28',
gasPrice: '0x77359400',
},
@ -582,8 +580,7 @@ const state = {
chainId: '0x38',
dappSuggestedGasFees: null,
firstRetryBlockNumber: '0x9c2686',
hash:
'0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
hash: '0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
history: [
{
chainId: '0x38',
@ -595,8 +592,7 @@ const state = {
status: 'unapproved',
time: 1629582710520,
txParams: {
data:
'0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
gas: '0x2eb27',
gasPrice: '0x12a05f200',
@ -780,8 +776,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x00000000000000000000000000000000000000000000000028426c213d688000',
data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
logIndex: '245',
removed: false,
topics: [
@ -798,8 +793,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x000000000000000000000000000000000000000000000000006a94d74f430000',
data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
logIndex: '246',
removed: false,
topics: [
@ -816,8 +810,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x000000000000000000000000000000000000000000000000001ff973cafa8000',
data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
logIndex: '247',
removed: false,
topics: [
@ -941,8 +934,7 @@ const state = {
submittedTime: 1629582711337,
time: 1629582710520,
txParams: {
data:
'0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
gas: '0x2eb27',
gasPrice: '0x12a05f200',
@ -980,8 +972,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x00000000000000000000000000000000000000000000000028426c213d688000',
data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
logIndex: {
length: 1,
negative: 0,
@ -1013,8 +1004,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x000000000000000000000000000000000000000000000000006a94d74f430000',
data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
logIndex: {
length: 1,
negative: 0,
@ -1046,8 +1036,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x000000000000000000000000000000000000000000000000001ff973cafa8000',
data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
logIndex: {
length: 1,
negative: 0,
@ -1224,8 +1213,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xbca9bce4d98ca3',
},
hash:
'0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
hash: '0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
transactionCategory: 'incoming',
},
'0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd': {
@ -1242,8 +1230,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xcdb08ab4254000',
},
hash:
'0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
hash: '0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
transactionCategory: 'incoming',
},
'0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239': {
@ -1260,8 +1247,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xe6ed27d6668000',
},
hash:
'0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
hash: '0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
transactionCategory: 'incoming',
},
'0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144': {
@ -1278,8 +1264,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0x63eb89da4ed00000',
},
hash:
'0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
hash: '0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
transactionCategory: 'incoming',
},
},
@ -1512,8 +1497,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
gas: '0xea60',
gasPrice: '0x4a817c800',
},
@ -1532,8 +1516,7 @@ const state = {
from: '0x983211ce699ea5ab57cc528086154b6db1ad8e55',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
gas: '0xea60',
gasPrice: '0x4a817c800',
},

6
ui/components/app/flask/experimental-area/index.scss
Unescape View File

@ -1,5 +1,5 @@
.experimental-area {
color: var(--flask-purple);
color: var(--color-flask-default);
margin: auto;
display: flex;
flex-direction: column;
@ -46,9 +46,9 @@
}
button {
background-color: var(--flask-purple) !important;
background-color: var(--color-flask-default) !important;
border: 0 !important;
color: var(--color-primary-inverse); //@TODO: We don't have a generic inverse color, using this one for now
color: var(--color-flask-inverse);
width: 200px;
}
}

8
ui/css/design-system/colors.scss
Unescape View File

@ -37,10 +37,10 @@ $color-map: (
'info-inverse': --color-info-inverse,
'info-disabled': --color-info-disabled,
'mainnet': --mainnet,
'goerli': --goerli,
'sepolia': --sepolia,
'localhost': --localhost,
'goerli': --color-network-goerli-default,
'sepolia': --color-network-sepolia-default,
'localhost': --color-network-localhost-default,
'transparent': --transparent,
'flask-purple': --flask-purple,
'flask-purple': --color-flask-default,
'inherit': --inherit,
);

5
ui/css/utilities/colors.scss
Unescape View File

@ -2,13 +2,8 @@
// Accents
// Everything below this line is part of the new color system
--mainnet: #29b6af;
--goerli: #3099f2;
--sepolia: #cfb5f0;
--localhost: #bbc0c5;
--flask-purple: #8b45b6;
--inherit: inherit;
--transparent: transparent;
// DO NOT CHANGE
// Required for the QR reader to work properly
--qr-code-white-background: #fff;

Write Preview
Loading…
Cancel
Save