Bridge UI stake styles fixes (#343)
This commit is contained in:
Gerardo Nardelli
GitHub
parent
d6e39f34af
commit
c013cc7378
@ -43,6 +43,7 @@ ORACLE_VALIDATOR_ADDRESS | The public address of the bridge validator | hexideci
|
||||
name | description | value
|
||||
--- | --- | ---
|
||||
UI_TITLE | The title for the bridge UI page. `%c` will be replaced by the name of the network. | string
|
||||
UI_OG_TITLE | The meta title for the deployed bridge page. | string
|
||||
UI_DESCRIPTION | The meta description for the deployed bridge page. | string
|
||||
UI_NATIVE_TOKEN_DISPLAY_NAME | name of the home native coin | string
|
||||
UI_HOME_NETWORK_DISPLAY_NAME | name to be displayed for home network | string
|
||||
@ -56,7 +57,8 @@ UI_FOREIGN_EXPLORER_ADDRESS_TEMPLATE | template link to address on foreign explo
|
||||
UI_HOME_GAS_PRICE_UPDATE_INTERVAL | An interval in milliseconds used to get the updated gas price value either from the oracle or from the Home Bridge contract. | integer
|
||||
UI_FOREIGN_GAS_PRICE_UPDATE_INTERVAL | An interval in milliseconds used to get the updated gas price value either from the oracle or from the Foreign Bridge contract. | integer
|
||||
UI_PORT | The port for the UI app. | integer
|
||||
UI_STYLES | The set of styles to render the bridge UI page. Currently only `classic` is implemented | classic
|
||||
UI_STYLES | The set of styles to render the bridge UI page. | core/classic/stake
|
||||
UI_PUBLIC_URL | The public url for the deployed bridge page | string
|
||||
|
||||
|
||||
## Monitor configuration
|
||||
|
||||
@ -32,6 +32,7 @@ COMMON_FOREIGN_GAS_PRICE_FACTOR: 1
|
||||
|
||||
## UI
|
||||
UI_TITLE: "TokenBridge UI app - %c"
|
||||
UI_OG_TITLE: "POA Bridge UI"
|
||||
UI_DESCRIPTION: "The TokenBridge serves as a method of transferring MakerDAO stable tokens between the Ethereum network to xDai chain in a quick and cost-efficient manner."
|
||||
UI_PORT: 3001
|
||||
UI_HOME_EXPLORER_TX_TEMPLATE: https://blockscout.com/poa/dai/tx/%s
|
||||
@ -40,6 +41,8 @@ UI_HOME_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/poa/dai/address/%s
|
||||
UI_FOREIGN_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/eth/mainnet/address/%s
|
||||
UI_HOME_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_STYLES: "core"
|
||||
UI_PUBLIC_URL: "https://dai-bridge.poa.network"
|
||||
|
||||
## Monitor
|
||||
MONITOR_BRIDGE_NAME: "xdai"
|
||||
|
||||
@ -34,6 +34,7 @@ ORACLE_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
|
||||
## UI
|
||||
UI_TITLE: "TokenBridge UI app - %c"
|
||||
UI_OG_TITLE: "POA Bridge UI"
|
||||
UI_DESCRIPTION: "The POA cross-chain bridge serves as a method of transferring POA native tokens from the POA Network to the Ethereum network in a quick and cost-efficient manner."
|
||||
UI_PORT: 3001
|
||||
UI_HOME_EXPLORER_TX_TEMPLATE: https://blockscout.com/poa/sokol/tx/%s
|
||||
@ -42,6 +43,8 @@ UI_HOME_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/poa/sokol/address/%s
|
||||
UI_FOREIGN_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/eth/kovan/address/%s
|
||||
UI_HOME_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_STYLES: "core"
|
||||
UI_PUBLIC_URL: "http://localhost:3001"
|
||||
|
||||
## Monitor
|
||||
MONITOR_BRIDGE_NAME: "bridge"
|
||||
|
||||
@ -33,6 +33,7 @@ ORACLE_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
|
||||
#ui
|
||||
UI_TITLE: "TokenBridge UI app - %c"
|
||||
UI_OG_TITLE: "POA Bridge UI"
|
||||
UI_DESCRIPTION: "The POA cross-chain bridge serves as a method of transferring POA native tokens from the POA Network to the Ethereum network in a quick and cost-efficient manner."
|
||||
UI_HOME_EXPLORER_TX_TEMPLATE: https://blockscout.com/poa/sokol/tx/%s
|
||||
UI_FOREIGN_EXPLORER_TX_TEMPLATE: https://blockscout.com/eth/kovan/tx/%s
|
||||
@ -40,6 +41,8 @@ UI_HOME_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/poa/sokol/address/%s
|
||||
UI_FOREIGN_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/eth/kovan/address/%s
|
||||
UI_HOME_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_STYLES: "core"
|
||||
UI_PUBLIC_URL: "http://localhost"
|
||||
|
||||
#monitor
|
||||
MONITOR_BRIDGE_NAME: "bridge"
|
||||
|
||||
@ -33,6 +33,7 @@ COMMON_FOREIGN_GAS_PRICE_FACTOR: 1
|
||||
|
||||
## UI
|
||||
UI_TITLE: "TokenBridge UI app - %c"
|
||||
UI_OG_TITLE: "POA Bridge UI"
|
||||
UI_DESCRIPTION: "The TokenBridge serves as a method of transferring native tokens from the Ethereum Classic Network to the Ethereum network in a quick and cost-efficient manner."
|
||||
UI_PORT: 3001
|
||||
UI_HOME_EXPLORER_TX_TEMPLATE: https://blockscout.com/etc/mainnet/tx/%s
|
||||
@ -41,6 +42,8 @@ UI_HOME_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/etc/mainnet/address/%s
|
||||
UI_FOREIGN_EXPLORER_ADDRESS_TEMPLATE: https://blockscout.com/eth/mainnet/address/%s
|
||||
UI_HOME_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_FOREIGN_GAS_PRICE_UPDATE_INTERVAL: 600000
|
||||
UI_STYLES: "classic"
|
||||
UI_PUBLIC_URL: "https://wetc.app"
|
||||
|
||||
## Monitor
|
||||
MONITOR_BRIDGE_NAME: "wetc"
|
||||
|
||||
@ -34,9 +34,9 @@ COMMON_FOREIGN_GAS_PRICE_FACTOR={{ COMMON_FOREIGN_GAS_PRICE_FACTOR }}
|
||||
|
||||
# Default
|
||||
UI_TITLE={{ UI_TITLE }}
|
||||
UI_OG_TITLE={{ UI_OG_TITLE }}
|
||||
UI_DESCRIPTION={{ UI_DESCRIPTION }}
|
||||
UI_PORT={{ UI_PORT }}
|
||||
UI_PUBLIC_URL={{ UI_PUBLIC_URL }}
|
||||
|
||||
{% if UI_STYLES | default('') != '' %}
|
||||
UI_STYLES={{ UI_STYLES }}
|
||||
{% endif %}
|
||||
|
||||
@ -32,12 +32,15 @@ COMMON_FOREIGN_GAS_PRICE_FACTOR=1
|
||||
|
||||
# Default
|
||||
UI_TITLE=TokenBridge UI app - %c
|
||||
UI_OG_TITLE=POA Bridge UI
|
||||
UI_DESCRIPTION=The POA cross-chain bridge serves as a method of transferring POA native tokens from the POA Network to the Ethereum network in a quick and cost-efficient manner.
|
||||
UI_PORT=3000
|
||||
UI_PUBLIC_URL=https://bridge.poa.net
|
||||
|
||||
# RSK
|
||||
#UI_DESCRIPTION=The TokenBridge serves as a method of transferring Bancor Network tokens between the Ethereum network and the Rootstock network in a quick and cost-efficient manner.
|
||||
|
||||
# To use Ethereum-classic styles: classic
|
||||
# To use STAKE styles: stake
|
||||
#UI_STYLES=stake
|
||||
# To use poa core styles: core
|
||||
UI_STYLES=core
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
BIN
ui/public/images/ogimage-classic.png
Normal file
BIN
ui/public/images/ogimage-classic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
BIN
ui/public/images/ogimage-core.png
Normal file
BIN
ui/public/images/ogimage-core.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
BIN
ui/public/images/ogimage-stake.png
Normal file
BIN
ui/public/images/ogimage-stake.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -5,13 +5,13 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta property="og:title" content="POA Bridge UI" />
|
||||
<meta property="og:title" content="%REACT_APP_UI_OG_TITLE%" />
|
||||
<meta property="og:description" content="%REACT_APP_UI_DESCRIPTION%" />
|
||||
<meta property="og:url" content="https://poanetwork.github.io/bridge-ui" />
|
||||
<meta property="og:url" content="%REACT_APP_UI_PUBLIC_URL%" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/images/bridgeogimage.jpg">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/favicons/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicons/%REACT_APP_UI_STYLES%.ico">
|
||||
<meta property="og:image" content="%REACT_APP_UI_PUBLIC_URL%/images/ogimage-%REACT_APP_UI_STYLES%.png">
|
||||
<link rel="manifest" href="/favicons/manifest.json">
|
||||
<link rel="shortcut icon" href="/favicons/%REACT_APP_UI_STYLES%.ico">
|
||||
<title>TokenBridge UI app</title>
|
||||
</head>
|
||||
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<svg width="220" height="105" viewBox="0 0 220 105" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z" fill="white"/>
|
||||
<path d="M107.172 1.85788L106.464 1.15077V1.15078L107.172 1.85788ZM112.828 1.85788L113.536 1.15078V1.15077L112.828 1.85788ZM100.029 9.00001V10H100.444L100.737 9.70711L100.029 9.00001ZM119.971 9.00001L119.263 9.70711L119.556 10H119.971V9.00001ZM107.879 2.56499C109.05 1.39342 110.95 1.39342 112.121 2.56499L113.536 1.15077C111.583 -0.801845 108.417 -0.801845 106.464 1.15077L107.879 2.56499ZM100.737 9.70711L107.879 2.56499L106.464 1.15078L99.3223 8.2929L100.737 9.70711ZM4 10H100.029V8.00001H4V10ZM1 13C1 11.3432 2.34315 10 4 10V8.00001C1.23858 8.00001 -1 10.2386 -1 13H1ZM1 101V13H-1V101H1ZM4 104C2.34314 104 1 102.657 1 101H-1C-1 103.761 1.23857 106 4 106V104ZM216 104H4V106H216V104ZM219 101C219 102.657 217.657 104 216 104V106C218.761 106 221 103.761 221 101H219ZM219 13V101H221V13H219ZM216 10C217.657 10 219 11.3432 219 13H221C221 10.2386 218.761 8.00001 216 8.00001V10ZM119.971 10H216V8.00001H119.971V10ZM112.121 2.56499L119.263 9.70711L120.678 8.2929L113.536 1.15078L112.121 2.56499Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="127" height="89" viewBox="0 0 127 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z" fill="white"/>
|
||||
<path d="M60.1716 1.17157L60.8787 1.87868V1.87868L60.1716 1.17157ZM65.8284 1.17157L66.5355 0.464466V0.464465L65.8284 1.17157ZM53.3431 8.00001V9.00001H53.7574L54.0502 8.70711L53.3431 8.00001ZM72.6569 8.00001L71.9498 8.70711L72.2426 9.00001H72.6569V8.00001ZM60.8787 1.87868C62.0503 0.707108 63.9497 0.707105 65.1213 1.87868L66.5355 0.464465C64.5829 -1.48815 61.4171 -1.48816 59.4645 0.464467L60.8787 1.87868ZM54.0502 8.70711L60.8787 1.87868L59.4645 0.464466L52.636 7.2929L54.0502 8.70711ZM4 9.00001H53.3431V7.00001H4V9.00001ZM1 12C1 10.3431 2.34314 9.00001 4 9.00001V7.00001C1.23858 7.00001 -1 9.23858 -1 12H1ZM1 85V12H-1V85H1ZM4 88C2.34314 88 1 86.6569 1 85H-1C-1 87.7614 1.23857 90 4 90V88ZM123 88H4V90H123V88ZM126 85C126 86.6569 124.657 88 123 88V90C125.761 90 128 87.7614 128 85H126ZM126 12V85H128V12H126ZM123 9.00001C124.657 9.00001 126 10.3432 126 12H128C128 9.23858 125.761 7.00001 123 7.00001V9.00001ZM72.6569 9.00001H123V7.00001H72.6569V9.00001ZM65.1213 1.87868L71.9498 8.70711L73.364 7.2929L66.5355 0.464466L65.1213 1.87868Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="220" height="105" viewBox="0 0 220 105" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z" fill="white"/>
|
||||
<path d="M107.172 1.85788L106.464 1.15077V1.15078L107.172 1.85788ZM112.828 1.85788L113.536 1.15078V1.15077L112.828 1.85788ZM100.029 9.00001V10H100.444L100.737 9.70711L100.029 9.00001ZM119.971 9.00001L119.263 9.70711L119.556 10H119.971V9.00001ZM107.879 2.56499C109.05 1.39342 110.95 1.39342 112.121 2.56499L113.536 1.15077C111.583 -0.801845 108.417 -0.801845 106.464 1.15077L107.879 2.56499ZM100.737 9.70711L107.879 2.56499L106.464 1.15078L99.3223 8.2929L100.737 9.70711ZM4 10H100.029V8.00001H4V10ZM1 13C1 11.3432 2.34315 10 4 10V8.00001C1.23858 8.00001 -1 10.2386 -1 13H1ZM1 101V13H-1V101H1ZM4 104C2.34314 104 1 102.657 1 101H-1C-1 103.761 1.23857 106 4 106V104ZM216 104H4V106H216V104ZM219 101C219 102.657 217.657 104 216 104V106C218.761 106 221 103.761 221 101H219ZM219 13V101H221V13H219ZM216 10C217.657 10 219 11.3432 219 13H221C221 10.2386 218.761 8.00001 216 8.00001V10ZM119.971 10H216V8.00001H119.971V10ZM112.121 2.56499L119.263 9.70711L120.678 8.2929L113.536 1.15078L112.121 2.56499Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="127" height="89" viewBox="0 0 127 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z" fill="white"/>
|
||||
<path d="M60.1716 1.17157L60.8787 1.87868V1.87868L60.1716 1.17157ZM65.8284 1.17157L66.5355 0.464466V0.464465L65.8284 1.17157ZM53.3431 8.00001V9.00001H53.7574L54.0502 8.70711L53.3431 8.00001ZM72.6569 8.00001L71.9498 8.70711L72.2426 9.00001H72.6569V8.00001ZM60.8787 1.87868C62.0503 0.707108 63.9497 0.707105 65.1213 1.87868L66.5355 0.464465C64.5829 -1.48815 61.4171 -1.48816 59.4645 0.464467L60.8787 1.87868ZM54.0502 8.70711L60.8787 1.87868L59.4645 0.464466L52.636 7.2929L54.0502 8.70711ZM4 9.00001H53.3431V7.00001H4V9.00001ZM1 12C1 10.3431 2.34314 9.00001 4 9.00001V7.00001C1.23858 7.00001 -1 9.23858 -1 12H1ZM1 85V12H-1V85H1ZM4 88C2.34314 88 1 86.6569 1 85H-1C-1 87.7614 1.23857 90 4 90V88ZM123 88H4V90H123V88ZM126 85C126 86.6569 124.657 88 123 88V90C125.761 90 128 87.7614 128 85H126ZM126 12V85H128V12H126ZM123 9.00001C124.657 9.00001 126 10.3432 126 12H128C128 9.23858 125.761 7.00001 123 7.00001V9.00001ZM72.6569 9.00001H123V7.00001H72.6569V9.00001ZM65.1213 1.87868L71.9498 8.70711L73.364 7.2929L66.5355 0.464466L65.1213 1.87868Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,3 +1,3 @@
|
||||
<svg width="1" height="199" viewBox="0 0 1 199" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1" height="199" fill="#E6ECF1"/>
|
||||
<svg width="1" height="200" viewBox="0 0 1 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1" height="200" fill="#E6ECF1"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 149 B After Width: | Height: | Size: 149 B |
@ -0,0 +1,7 @@
|
||||
<svg width="220" height="105" viewBox="0 0 220 105" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.828 1.85788C111.266 0.295785 108.734 0.295786 107.172 1.85788L100.029 9.00001H4C1.79086 9.00001 0 10.7909 0 13V101C0 103.209 1.79086 105 4 105H216C218.209 105 220 103.209 220 101V13C220 10.7909 218.209 9.00001 216 9.00001H119.971L112.828 1.85788Z" fill="white"/>
|
||||
<path d="M107.172 1.85788L106.464 1.15077V1.15078L107.172 1.85788ZM112.828 1.85788L113.536 1.15078V1.15077L112.828 1.85788ZM100.029 9.00001V10H100.444L100.737 9.70711L100.029 9.00001ZM119.971 9.00001L119.263 9.70711L119.556 10H119.971V9.00001ZM107.879 2.56499C109.05 1.39342 110.95 1.39342 112.121 2.56499L113.536 1.15077C111.583 -0.801845 108.417 -0.801845 106.464 1.15077L107.879 2.56499ZM100.737 9.70711L107.879 2.56499L106.464 1.15078L99.3223 8.2929L100.737 9.70711ZM4 10H100.029V8.00001H4V10ZM1 13C1 11.3432 2.34315 10 4 10V8.00001C1.23858 8.00001 -1 10.2386 -1 13H1ZM1 101V13H-1V101H1ZM4 104C2.34314 104 1 102.657 1 101H-1C-1 103.761 1.23857 106 4 106V104ZM216 104H4V106H216V104ZM219 101C219 102.657 217.657 104 216 104V106C218.761 106 221 103.761 221 101H219ZM219 13V101H221V13H219ZM216 10C217.657 10 219 11.3432 219 13H221C221 10.2386 218.761 8.00001 216 8.00001V10ZM119.971 10H216V8.00001H119.971V10ZM112.121 2.56499L119.263 9.70711L120.678 8.2929L113.536 1.15078L112.121 2.56499Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="127" height="89" viewBox="0 0 127 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8284 1.17157C64.2663 -0.390524 61.7337 -0.390524 60.1716 1.17157L53.3431 8.00001H4C1.79086 8.00001 0 9.79086 0 12V85C0 87.2091 1.79086 89 4 89H123C125.209 89 127 87.2092 127 85V12C127 9.79087 125.209 8.00001 123 8.00001H72.6569L65.8284 1.17157Z" fill="white"/>
|
||||
<path d="M60.1716 1.17157L60.8787 1.87868V1.87868L60.1716 1.17157ZM65.8284 1.17157L66.5355 0.464466V0.464465L65.8284 1.17157ZM53.3431 8.00001V9.00001H53.7574L54.0502 8.70711L53.3431 8.00001ZM72.6569 8.00001L71.9498 8.70711L72.2426 9.00001H72.6569V8.00001ZM60.8787 1.87868C62.0503 0.707108 63.9497 0.707105 65.1213 1.87868L66.5355 0.464465C64.5829 -1.48815 61.4171 -1.48816 59.4645 0.464467L60.8787 1.87868ZM54.0502 8.70711L60.8787 1.87868L59.4645 0.464466L52.636 7.2929L54.0502 8.70711ZM4 9.00001H53.3431V7.00001H4V9.00001ZM1 12C1 10.3431 2.34314 9.00001 4 9.00001V7.00001C1.23858 7.00001 -1 9.23858 -1 12H1ZM1 85V12H-1V85H1ZM4 88C2.34314 88 1 86.6569 1 85H-1C-1 87.7614 1.23857 90 4 90V88ZM123 88H4V90H123V88ZM126 85C126 86.6569 124.657 88 123 88V90C125.761 90 128 87.7614 128 85H126ZM126 12V85H128V12H126ZM123 9.00001C124.657 9.00001 126 10.3432 126 12H128C128 9.23858 125.761 7.00001 123 7.00001V9.00001ZM72.6569 9.00001H123V7.00001H72.6569V9.00001ZM65.1213 1.87868L71.9498 8.70711L73.364 7.2929L66.5355 0.464466L65.1213 1.87868Z" fill="#E6ECF1" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 9.2 KiB |
@ -206,6 +206,10 @@
|
||||
flex-wrap: wrap;
|
||||
width: $bridge-transfer-width;
|
||||
|
||||
&-stake {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
background-image: url('#{ $bridge-image-center-pointing-down }');
|
||||
background-position: center;
|
||||
@ -225,6 +229,10 @@
|
||||
padding: $network-container-padding;
|
||||
width: 22%;
|
||||
|
||||
&-stake {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
@ -232,6 +240,10 @@
|
||||
padding: 5px 0 5px 0;
|
||||
width: auto;
|
||||
justify-content: space-around;
|
||||
|
||||
&-stake {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.network-container-foreign {
|
||||
@ -243,6 +255,10 @@
|
||||
padding: $network-container-padding-foreign;
|
||||
width: 22%;
|
||||
|
||||
&-stake {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
@ -250,6 +266,10 @@
|
||||
padding: 5px 0 5px 0;
|
||||
width: auto;
|
||||
justify-content: space-around;
|
||||
|
||||
&-stake {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bridge-network-data {
|
||||
@ -316,6 +336,9 @@
|
||||
color: $bridge-link-color;
|
||||
font-size: 14px;
|
||||
font-weight: $network-show-more-font-weight;
|
||||
&:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
.info-icon {
|
||||
align-items: center;
|
||||
@ -460,7 +483,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken($bridge-button-background-color, 10%);
|
||||
background-color: $button-bridge-form-hover-background-color;
|
||||
}
|
||||
}
|
||||
.bridge-transfer-direction {
|
||||
@ -814,6 +837,8 @@
|
||||
|
||||
&:hover {
|
||||
opacity: $button-transfer-cancel-hover-opacity;
|
||||
background-color: $button-transfer-cancel-hover-background-color;
|
||||
color: $button-transfer-cancel-hover-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
overflow: hidden;
|
||||
padding-top: 25px;
|
||||
width: 15%;
|
||||
display: $pattern-background-display;
|
||||
|
||||
.pattern-background-image {
|
||||
background-image: url('#{ $pattern-background-image }');
|
||||
@ -15,4 +16,4 @@
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
justify-content: $status-container-justify-content;
|
||||
max-width: $container-width;
|
||||
padding-bottom: 25px;
|
||||
width: 70%;
|
||||
width: $statistics-page-container-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
width: $status-page-container-mobile-width;
|
||||
@ -132,6 +132,7 @@
|
||||
margin-right: auto;
|
||||
padding-top: 25px;
|
||||
width: 15%;
|
||||
display: $statistics-left-container-display;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
display: none;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
flex-direction: $status-container-flex-direction;
|
||||
justify-content: $status-container-justify-content;
|
||||
max-width: $container-width;
|
||||
width: 70%;
|
||||
width: $status-page-container-width;
|
||||
padding: $status-container-padding;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
@ -133,6 +133,7 @@
|
||||
margin-right: auto;
|
||||
padding-top: 25px;
|
||||
width: 15%;
|
||||
display: $status-left-container;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
display: none;
|
||||
|
||||
@ -2,12 +2,7 @@
|
||||
display: flex;
|
||||
@media (min-width: $tablet-width) {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
.NetworkSelect_List {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,16 +58,19 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@media (min-width: $tablet-width) {
|
||||
background-image: url('#{ $network-select-modal-image }');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
width: 160px;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
box-shadow: 0 5px 10px rgba(#000, .05);
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
width: 127px;
|
||||
height: 89px;
|
||||
li:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
li.currentNetwork {
|
||||
@media (max-width: $tablet-width) {
|
||||
@ -154,10 +152,18 @@
|
||||
}
|
||||
|
||||
.nl-NavigationLinks_Text {
|
||||
margin-left: 10px;
|
||||
margin-left: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nl-IconNetwork_Path {
|
||||
fill: $header-menu-icon-color;
|
||||
}
|
||||
|
||||
.Show-NetworkSelect_List {
|
||||
@media (min-width: $tablet-width) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,12 @@
|
||||
path {
|
||||
fill: $copy-icon-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: $copy-icon-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-icon-right {
|
||||
@ -12,4 +18,4 @@
|
||||
|
||||
.copy-icon-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,25 +4,13 @@
|
||||
display: none
|
||||
}
|
||||
|
||||
.daily-quota-modal-arrow {
|
||||
border-bottom: 10px solid #000;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: none;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.daily-quota-modal {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
border: solid 1px #e4e4e9;
|
||||
box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.05);
|
||||
height: 102px;
|
||||
background-image: url('#{ $daily-quota-modal-image }');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 105px;
|
||||
position: fixed;
|
||||
width: 219px;
|
||||
width: 220px;
|
||||
z-index: 999;
|
||||
|
||||
.modal-container {
|
||||
@ -30,7 +18,7 @@
|
||||
flex-direction: column;
|
||||
height: 72px;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
padding: 25px 15px 15px 15px;
|
||||
|
||||
.daily-quota-title {
|
||||
color: $daily-quota-modal-title;
|
||||
@ -48,16 +36,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daily-quota-modal:after {
|
||||
border-bottom: 6px solid #e4e4e9;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: none;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
right: 105px;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -36,4 +36,21 @@
|
||||
order: 0;
|
||||
width: $footer-logo-width;
|
||||
}
|
||||
|
||||
&-logo-alternative {
|
||||
mask-image: url('#{ $footer-logo-image }');
|
||||
mask-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: $footer-logo-height;
|
||||
left: 0;
|
||||
order: 0;
|
||||
width: $footer-logo-width;
|
||||
background-color: #9eaab6;
|
||||
|
||||
&:hover {
|
||||
background-color: #75818d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $header-font-size;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -14,12 +14,18 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
.menu-items-icon {
|
||||
path {
|
||||
fill: $header-menu-icon-color-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-items-text {
|
||||
color: $header-menu-text-color;
|
||||
margin-left: 10px;
|
||||
line-height: 21px;
|
||||
|
||||
&-selected {
|
||||
color: $header-menu-text-color-selected;
|
||||
|
||||
@ -31,5 +31,15 @@
|
||||
}
|
||||
|
||||
.social-alternative-icons-item {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
|
||||
&:hover {
|
||||
circle {
|
||||
fill: #9EAAB6;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: #DBE0E5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,7 @@ $header-menu-icon-color: $secondary-color;
|
||||
$header-menu-text-color: #fff;
|
||||
$header-menu-icon-color-selected: $secondary-color;
|
||||
$header-menu-text-color-selected: #fff;
|
||||
$header-font-size: 16px;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #fff;
|
||||
@ -114,6 +115,8 @@ $modal-close-button-top-mobile: -40px;
|
||||
$modal-close-button-right-mobile: 0px;
|
||||
$modal-min-width: 558px;
|
||||
$modal-min-height: 410px;
|
||||
$daily-quota-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/daily-quota-modal.svg';
|
||||
$network-select-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/network-select-modal.svg';
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-darker;
|
||||
@ -169,6 +172,9 @@ $bridge-input-label-font-size: 24px;
|
||||
$bridge-input-label-line-height: 48px;
|
||||
$bridge-input-label-margin: 0 10px;
|
||||
$bridge-transfer-button-border-radius: 0 0 3px 3px;
|
||||
$button-bridge-form-hover-background-color: darken($bridge-button-background-color, 10%);
|
||||
$button-transfer-cancel-hover-background-color: $button-bordered-background-color;
|
||||
$button-transfer-cancel-hover-text-color: $button-bordered-text-color;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 0 10px 10px 10px;
|
||||
@ -193,6 +199,7 @@ $transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name +
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
$copy-icon-hover-color: $copy-icon-color;
|
||||
|
||||
// status section
|
||||
$status-text-color: $text-color;
|
||||
@ -211,6 +218,8 @@ $status-title-padding: 0 0 0 0;
|
||||
$status-page-container-mobile-width: 100%;
|
||||
$status-configuration-data-display: grid;
|
||||
$status-configuration-container-padding: 0 0 0 0;
|
||||
$status-page-container-width: 70%;
|
||||
$status-left-container: initial;
|
||||
|
||||
$status-authority-logo-0: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-0.svg';
|
||||
$status-authority-logo-1: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-1.svg';
|
||||
@ -252,6 +261,9 @@ $statistics-fee-data-justify-content: space-evenly;
|
||||
$statistics-fee-container-width: 50%;
|
||||
$statistics-deposit-container-width: 40%;
|
||||
$statistics-bridge-data-mobile-margin: 0 0 0 0;
|
||||
$statistics-page-container-width: 70%;
|
||||
$statistics-left-container-display: initial;
|
||||
$pattern-background-display: initial;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
|
||||
@ -32,6 +32,7 @@ $header-menu-icon-color: $primary-color;
|
||||
$header-menu-text-color: #fff;
|
||||
$header-menu-icon-color-selected: $primary-color;
|
||||
$header-menu-text-color-selected: #fff;
|
||||
$header-font-size: 16px;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #fff;
|
||||
@ -114,6 +115,8 @@ $modal-close-button-top-mobile: -40px;
|
||||
$modal-close-button-right-mobile: 0px;
|
||||
$modal-min-width: 558px;
|
||||
$modal-min-height: 410px;
|
||||
$daily-quota-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/daily-quota-modal.svg';
|
||||
$network-select-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/network-select-modal.svg';
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-darker;
|
||||
@ -169,6 +172,9 @@ $bridge-input-label-font-size: 24px;
|
||||
$bridge-input-label-line-height: 48px;
|
||||
$bridge-input-label-margin: 0 10px;
|
||||
$bridge-transfer-button-border-radius: 0 0 3px 3px;
|
||||
$button-bridge-form-hover-background-color: darken($bridge-button-background-color, 10%);
|
||||
$button-transfer-cancel-hover-background-color: $button-bordered-background-color;
|
||||
$button-transfer-cancel-hover-text-color: $button-bordered-text-color;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 0 10px 10px 10px;
|
||||
@ -193,6 +199,7 @@ $transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name +
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
$copy-icon-hover-color: $copy-icon-color;
|
||||
|
||||
// status section
|
||||
$status-text-color: $text-color;
|
||||
@ -211,6 +218,8 @@ $status-title-padding: 0 0 0 0;
|
||||
$status-page-container-mobile-width: 100%;
|
||||
$status-configuration-data-display: grid;
|
||||
$status-configuration-container-padding: 0 0 0 0;
|
||||
$status-page-container-width: 70%;
|
||||
$status-left-container: initial;
|
||||
|
||||
$status-authority-logo-0: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-0.svg';
|
||||
$status-authority-logo-1: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-1.svg';
|
||||
@ -252,6 +261,9 @@ $statistics-fee-data-justify-content: space-evenly;
|
||||
$statistics-fee-container-width: 50%;
|
||||
$statistics-deposit-container-width: 40%;
|
||||
$statistics-bridge-data-mobile-margin: 0 0 0 0;
|
||||
$statistics-page-container-width: 70%;
|
||||
$statistics-left-container-display: initial;
|
||||
$pattern-background-display: initial;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
|
||||
@ -10,6 +10,7 @@ $tertiary-color: #ffaa07;
|
||||
$danger-color: #f13662;
|
||||
$blue-color: #3ab9fe;
|
||||
$base-button-bg-color: #4DA9A6;
|
||||
$base-button-bg-color-darker: #408684;
|
||||
|
||||
$text-color: #333;
|
||||
$link-color: #4DA9A6;
|
||||
@ -32,6 +33,7 @@ $header-menu-icon-color: #9EAAB6;
|
||||
$header-menu-text-color: #242A31;
|
||||
$header-menu-icon-color-selected: #4DA9A6;
|
||||
$header-menu-text-color-selected: #4DA9A6;
|
||||
$header-font-size: 14px;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #3C454E;
|
||||
@ -95,9 +97,11 @@ $button-transfer-cancel-height: 42px;
|
||||
$button-transfer-cancel-max-width: 150px;
|
||||
$button-transfer-confirm-border-radius: 2px;
|
||||
$button-transfer-confirm-font-size: 14px;
|
||||
$button-transfer-confirm-hover-background-color: $button-background-color;
|
||||
$button-transfer-confirm-hover-background-color: $base-button-bg-color-darker;
|
||||
$button-transfer-confirm-height: 42px;
|
||||
$button-transfer-confirm-max-width: 150px;
|
||||
$button-transfer-cancel-hover-background-color: #75818D;
|
||||
$button-transfer-cancel-hover-text-color: #E6ECF1;
|
||||
|
||||
// modals
|
||||
$modal-background-color: #fff;
|
||||
@ -114,6 +118,8 @@ $modal-close-button-top-mobile: $modal-close-button-top;
|
||||
$modal-close-button-right-mobile: 10px;
|
||||
$modal-min-width: 500px;
|
||||
$modal-min-height: 300px;
|
||||
$daily-quota-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/daily-quota-modal.svg';
|
||||
$network-select-modal-image: $base-images-path + '/themes/' + $theme-name + '/bridge/network-select-modal.svg';
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-dark;
|
||||
@ -159,8 +165,8 @@ $bridge-transfer-button-border-radius: 2px;
|
||||
$form-container-height: 200px;
|
||||
$form-container-max-width: 380px;
|
||||
$network-container-height: 73px;
|
||||
$network-container-padding: 63.5px 1% 63.5px 5%;
|
||||
$network-container-padding-foreign: $network-container-padding;
|
||||
$network-container-padding: 63.5px 0 63.5px 30px;
|
||||
$network-container-padding-foreign: 63.5px 30px 63.5px 0;
|
||||
$network-basic-label-font-size: 12px;
|
||||
$info-icon-display: none;
|
||||
$network-show-more-font-weight: normal;
|
||||
@ -169,6 +175,7 @@ $bridge-input-label-font-size: 20px;
|
||||
$bridge-input-label-line-height: 42px;
|
||||
$bridge-input-label-margin: 0 20px 0 0;
|
||||
$bridge-transfer-button-border-radius: 2px 2px 2px 2px;
|
||||
$button-bridge-form-hover-background-color: $base-button-bg-color-darker;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 10px;
|
||||
@ -193,7 +200,8 @@ $transfer-operation-arrow-ellipse-image: $base-images-path + '/themes/' + $theme
|
||||
$transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name + '/bridge/arrow.svg';
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
$copy-icon-color: #4DA9A6;
|
||||
$copy-icon-hover-color: #408684;
|
||||
|
||||
// status section
|
||||
$status-text-color: #9EAAB6;
|
||||
@ -212,6 +220,8 @@ $status-container-padding: 37px 0 0 0;
|
||||
$status-page-container-mobile-width: 95%;
|
||||
$status-configuration-data-display: flex;
|
||||
$status-configuration-container-padding: 0 0 30px 0;
|
||||
$status-page-container-width: $container-width;
|
||||
$status-left-container: none;
|
||||
|
||||
$status-authority-logo-0: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-0.svg';
|
||||
$status-authority-logo-1: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-1.svg';
|
||||
@ -253,6 +263,9 @@ $statistics-fee-data-justify-content: flex-start;
|
||||
$statistics-fee-container-width: auto;
|
||||
$statistics-deposit-container-width: auto;
|
||||
$statistics-bridge-data-mobile-margin: 0 0 10px 0;
|
||||
$statistics-page-container-width: $container-width;
|
||||
$statistics-left-container-display: none;
|
||||
$pattern-background-display: none;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
|
||||
@ -346,7 +346,9 @@ export class Bridge extends React.Component {
|
||||
<div className="left-image" />
|
||||
</div>
|
||||
<div className={`bridge-transfer-content bridge-transfer-content-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="bridge-transfer-content-background">
|
||||
<div
|
||||
className={`bridge-transfer-content-background bridge-transfer-content-background-${REACT_APP_UI_STYLES}`}
|
||||
>
|
||||
<BridgeNetwork
|
||||
balance={reverse ? foreignStore.balance : homeStore.getDisplayedBalance()}
|
||||
currency={reverse ? foreignStore.symbol : homeStore.symbol}
|
||||
|
||||
@ -3,7 +3,7 @@ import React from 'react'
|
||||
export const BridgeForm = ({ reverse, currency, onTransfer, onInputChange, displayArrow }) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
return (
|
||||
<div className={`form-container ${displayArrow ? 'transfer-right' : ''}`}>
|
||||
<div className={`form-container ${displayArrow || REACT_APP_UI_STYLES === 'stake' ? 'transfer-right' : ''}`}>
|
||||
<form className="bridge-form" onSubmit={onTransfer} autoComplete="off">
|
||||
<div className={`bridge-form-controls bridge-form-controls-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="bridge-form-input-container">
|
||||
|
||||
@ -27,7 +27,7 @@ export const BridgeNetwork = ({ balance, currency, isHome, networkSubtitle, netw
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={`network-container-${containerName}`}>
|
||||
<div className={`network-container-${containerName} network-container-${containerName}-${REACT_APP_UI_STYLES}`}>
|
||||
<p className={`${side ? `text-${side}` : ''}`}>
|
||||
<span className={`network-title network-title-${REACT_APP_UI_STYLES}`}>{networkTitle}</span>
|
||||
{networkSubtitle ? <span className="network-name">{networkSubtitle}</span> : null}
|
||||
|
||||
@ -2,11 +2,15 @@ import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { SocialIcons } from './SocialIcons'
|
||||
|
||||
export const Footer = () => (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<Link to="/" className="footer-logo" />
|
||||
<SocialIcons />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
export const Footer = () => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const logoClass = REACT_APP_UI_STYLES === 'stake' ? 'footer-logo-alternative' : 'footer-logo'
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<Link to="/" className={logoClass} />
|
||||
<SocialIcons />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -35,7 +35,6 @@ export const NetworkDetails = ({
|
||||
const formattedBalance = isNaN(numeral(balance).format('0.00', Math.floor))
|
||||
? numeral(0).format('0,0.00', Math.floor)
|
||||
: numeral(balance).format('0,0.000', Math.floor)
|
||||
const displayCopyIcon = REACT_APP_UI_STYLES !== 'stake'
|
||||
|
||||
return (
|
||||
<div className="network-details" data-testid="network-details">
|
||||
@ -61,13 +60,11 @@ export const NetworkDetails = ({
|
||||
>
|
||||
{address.slice(0, 27).concat('...')}
|
||||
</a>
|
||||
{displayCopyIcon && (
|
||||
<CopyToClipboard text={address}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
<CopyToClipboard text={address}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
</span>
|
||||
</p>
|
||||
{displayBridgeLimits && (
|
||||
@ -109,13 +106,11 @@ export const NetworkDetails = ({
|
||||
>
|
||||
{tokenAddress.slice(0, 27).concat('...')}
|
||||
</a>
|
||||
{displayCopyIcon && (
|
||||
<CopyToClipboard text={tokenAddress}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
<CopyToClipboard text={tokenAddress}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -4,14 +4,30 @@ import { inject, observer } from 'mobx-react'
|
||||
@inject('RootStore')
|
||||
@observer
|
||||
export default class NetworkSelect extends Component {
|
||||
changeNetworkRPC(e) {
|
||||
state = {
|
||||
displayList: false
|
||||
}
|
||||
|
||||
changeNetworkRPC = e => {
|
||||
const { web3Store } = this.props.RootStore
|
||||
const newNetworkName = e.target.innerHTML
|
||||
web3Store.setSelectedNetwork(newNetworkName)
|
||||
this.hideList()
|
||||
}
|
||||
|
||||
displayList = () => {
|
||||
console.log('Display List!')
|
||||
this.setState({ displayList: true })
|
||||
}
|
||||
|
||||
hideList = () => {
|
||||
console.log('Hide List!')
|
||||
this.setState({ displayList: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { web3Store } = this.props.RootStore
|
||||
const { displayList } = this.state
|
||||
let currentNetworkFullName = ''
|
||||
|
||||
const networks = web3Store.homeNet.id && web3Store.foreignNet.id ? [web3Store.homeNet, web3Store.foreignNet] : []
|
||||
@ -41,8 +57,14 @@ export default class NetworkSelect extends Component {
|
||||
)
|
||||
})
|
||||
|
||||
const displayListClass = displayList ? 'Show-NetworkSelect_List' : ''
|
||||
|
||||
return (
|
||||
<div className={`NetworkSelect nl-NavigationLinks_Link opacityFull`}>
|
||||
<div
|
||||
onMouseEnter={this.displayList}
|
||||
onMouseLeave={this.hideList}
|
||||
className={`NetworkSelect nl-NavigationLinks_Link opacityFull`}
|
||||
>
|
||||
<div className={`NetworkSelect_Top`}>
|
||||
<svg className={`nl-IconNetwork`} xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path
|
||||
@ -55,7 +77,7 @@ export default class NetworkSelect extends Component {
|
||||
<path d="M0 0h8L4 4 0 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<ul className={`NetworkSelect_List`}>{listItems}</ul>
|
||||
<ul className={`NetworkSelect_List ${displayListClass}`}>{listItems}</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user