Add stake theme for Bridge UI (#340)
This commit is contained in:
Gerardo Nardelli
GitHub
parent
d17e9e0eea
commit
c1d58c2908
@ -38,5 +38,6 @@ UI_PORT=3000
|
||||
# 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
|
||||
#UI_STYLES=classic
|
||||
# To use Ethereum-classic styles: classic
|
||||
# To use STAKE styles: stake
|
||||
#UI_STYLES=stake
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
BIN
ui/public/favicons/classic.ico
Normal file
BIN
ui/public/favicons/classic.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
ui/public/favicons/core.ico
Normal file
BIN
ui/public/favicons/core.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
ui/public/favicons/stake.ico
Normal file
BIN
ui/public/favicons/stake.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@ -10,9 +10,8 @@
|
||||
<meta property="og:url" content="https://poanetwork.github.io/bridge-ui" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/images/bridgeogimage.jpg">
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/favicons/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicons/%REACT_APP_UI_STYLES%.ico">
|
||||
<title>TokenBridge UI app</title>
|
||||
</head>
|
||||
|
||||
|
||||
@ -6,12 +6,7 @@ const fs = require('fs')
|
||||
|
||||
const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets')
|
||||
const destinationFilename = 'application.css'
|
||||
let filename
|
||||
|
||||
if (process.env.UI_STYLES === 'classic') {
|
||||
filename = 'application.classic.css'
|
||||
} else {
|
||||
filename = 'application.core.css'
|
||||
}
|
||||
const theme = process.env.UI_STYLES || 'core'
|
||||
const filename = `application.${theme}.css`
|
||||
|
||||
fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename))
|
||||
|
||||
BIN
ui/src/assets/images/themes/core/transparent.png
Normal file
BIN
ui/src/assets/images/themes/core/transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
22
ui/src/assets/images/themes/stake/background/bg-pattern.svg
Normal file
22
ui/src/assets/images/themes/stake/background/bg-pattern.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360">
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M120 300h60v60h-60v-60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M120 360c-33.137 0-60-26.863-60-60h60v60z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M60 240h60v60H60v-60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M120 240H60v-60c33.137 0 60 26.863 60 60z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M60 240c-33.137 0-60-26.863-60-60h60v60z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M0 180c0-33.137 26.863-60 60-60v60H0z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M60 180v-60h60c0 33.137-26.863 60-60 60z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M60 60h60v60H60V60z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M60 60c0-33.137 26.863-60 60-60v60H60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M120 0h60v60h-60V0z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M300 300h60v60h-60v-60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M300 360c-33.137 0-60-26.863-60-60h60v60z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M240 240h60v60h-60v-60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M300 240h-60v-60c33.137 0 60 26.863 60 60z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M240 240c-33.137 0-60-26.863-60-60h60v60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M180 180c0-33.137 26.863-60 60-60v60h-60z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M240 180v-60h60c0 33.137-26.863 60-60 60z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M240 60h60v60h-60V60z"/>
|
||||
<path fill="#5B33A2" fill-rule="evenodd" d="M240 60c0-33.137 26.863-60 60-60v60h-60z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M300 0h60v60h-60V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
ui/src/assets/images/themes/stake/bridge/arrow.svg
Normal file
3
ui/src/assets/images/themes/stake/bridge/arrow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.0917 10.7071C19.4823 10.3166 19.4822 9.68341 19.0917 9.29289L10.6064 0.807612C10.2159 0.417093 9.58277 0.417072 9.19223 0.807612C8.80169 1.19815 8.80171 1.83131 9.19223 2.22183L16.9704 10L9.19223 17.7782C8.80169 18.1687 8.80171 18.8019 9.19223 19.1924C9.58275 19.5829 10.2159 19.5829 10.6064 19.1924L19.0917 10.7071Z" fill="#9EAAB6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 451 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 149 B |
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 149 B |
3
ui/src/assets/images/themes/stake/bridge/close.svg
Normal file
3
ui/src/assets/images/themes/stake/bridge/close.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2923 17.2923C16.9011 17.6835 16.2669 17.6835 15.8757 17.2923L8.79285 10.2094L1.70996 17.2923C1.31878 17.6835 0.684559 17.6835 0.293382 17.2923C-0.0977942 16.9011 -0.0977941 16.2669 0.293383 15.8757L7.37627 8.79285L0.293383 1.70996C-0.0977941 1.31878 -0.0977942 0.684559 0.293382 0.293382C0.684559 -0.0977943 1.31878 -0.097794 1.70996 0.293383L8.79285 7.37627L15.8757 0.293407C16.2669 -0.09777 16.9011 -0.0977703 17.2923 0.293406C17.6835 0.684583 17.6835 1.31881 17.2923 1.70998L10.2094 8.79285L17.2923 15.8757C17.6835 16.2669 17.6835 16.9011 17.2923 17.2923Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 731 B |
BIN
ui/src/assets/images/themes/stake/bridge/pattern-1.png
Normal file
BIN
ui/src/assets/images/themes/stake/bridge/pattern-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
ui/src/assets/images/themes/stake/bridge/pattern-2.png
Normal file
BIN
ui/src/assets/images/themes/stake/bridge/pattern-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="30" cy="30" r="29.5" fill="#F5F7F9" stroke="#E6ECF1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 170 B |
@ -0,0 +1,3 @@
|
||||
<svg width="120" height="1" viewBox="0 0 120 1" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="120" height="1" fill="#E6ECF1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 149 B |
26
ui/src/assets/images/themes/stake/logos/footer-logo.svg
Normal file
26
ui/src/assets/images/themes/stake/logos/footer-logo.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<svg width="129" height="30" viewBox="0 0 129 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0H0V6H12V0Z" fill="#9EAAB6"/>
|
||||
<path d="M30 0H18V6H30V0Z" fill="#9EAAB6"/>
|
||||
<path d="M18 24H24V18H30V30H18V24Z" fill="#9EAAB6"/>
|
||||
<path d="M12 24H6V18H0V30H12V24Z" fill="#9EAAB6"/>
|
||||
<path d="M43.8887 12V2.04688H47.375C48.5827 2.04688 49.4987 2.2793 50.123 2.74414C50.7474 3.20443 51.0596 3.88118 51.0596 4.77441C51.0596 5.26204 50.9342 5.69271 50.6836 6.06641C50.4329 6.43555 50.0843 6.70671 49.6377 6.87988C50.1481 7.00749 50.5492 7.26497 50.8408 7.65234C51.137 8.03971 51.2852 8.51367 51.2852 9.07422C51.2852 10.0312 50.9798 10.7559 50.3691 11.248C49.7585 11.7402 48.888 11.9909 47.7578 12H43.8887ZM45.9395 7.66602V10.3525H47.6963C48.1794 10.3525 48.5553 10.2386 48.8242 10.0107C49.0977 9.77832 49.2344 9.45931 49.2344 9.05371C49.2344 8.14225 48.7627 7.67969 47.8193 7.66602H45.9395ZM45.9395 6.2168H47.457C48.4915 6.19857 49.0088 5.78613 49.0088 4.97949C49.0088 4.52832 48.8766 4.20475 48.6123 4.00879C48.3525 3.80827 47.9401 3.70801 47.375 3.70801H45.9395V6.2168Z" fill="#9EAAB6"/>
|
||||
<path d="M56.8564 6.45605C56.5876 6.4196 56.3506 6.40137 56.1455 6.40137C55.3981 6.40137 54.9082 6.6543 54.6758 7.16016V12H52.7002V4.60352H54.5664L54.6211 5.48535C55.0176 4.80632 55.5667 4.4668 56.2686 4.4668C56.4873 4.4668 56.6924 4.49642 56.8838 4.55566L56.8564 6.45605Z" fill="#9EAAB6"/>
|
||||
<path d="M59.8984 12H57.916V4.60352H59.8984V12ZM57.7998 2.68945C57.7998 2.39323 57.8978 2.14941 58.0938 1.95801C58.2943 1.7666 58.5654 1.6709 58.9072 1.6709C59.2445 1.6709 59.5133 1.7666 59.7139 1.95801C59.9144 2.14941 60.0146 2.39323 60.0146 2.68945C60.0146 2.99023 59.9121 3.23633 59.707 3.42773C59.5065 3.61914 59.2399 3.71484 58.9072 3.71484C58.5745 3.71484 58.3057 3.61914 58.1006 3.42773C57.9001 3.23633 57.7998 2.99023 57.7998 2.68945Z" fill="#9EAAB6"/>
|
||||
<path d="M61.2246 8.24707C61.2246 7.09408 61.4821 6.17578 61.9971 5.49219C62.5166 4.80859 63.2253 4.4668 64.123 4.4668C64.8431 4.4668 65.4378 4.73568 65.9072 5.27344V1.5H67.8896V12H66.1055L66.0098 11.2139C65.5176 11.8291 64.8841 12.1367 64.1094 12.1367C63.2389 12.1367 62.5394 11.7949 62.0107 11.1113C61.4867 10.4232 61.2246 9.46842 61.2246 8.24707ZM63.2002 8.39062C63.2002 9.08333 63.321 9.61426 63.5625 9.9834C63.804 10.3525 64.1549 10.5371 64.6152 10.5371C65.2259 10.5371 65.6566 10.2796 65.9072 9.76465V6.8457C65.6611 6.33073 65.235 6.07324 64.6289 6.07324C63.6764 6.07324 63.2002 6.8457 63.2002 8.39062Z" fill="#9EAAB6"/>
|
||||
<path d="M69.1338 8.24707C69.1338 7.1123 69.4027 6.19857 69.9404 5.50586C70.4827 4.81315 71.2119 4.4668 72.1279 4.4668C72.9391 4.4668 73.5703 4.74479 74.0215 5.30078L74.1035 4.60352H75.8945V11.7539C75.8945 12.401 75.7464 12.9639 75.4502 13.4424C75.1585 13.9209 74.7461 14.2855 74.2129 14.5361C73.6797 14.7868 73.0553 14.9121 72.3398 14.9121C71.7975 14.9121 71.2689 14.8027 70.7539 14.584C70.2389 14.3698 69.8493 14.0918 69.585 13.75L70.46 12.5469C70.9521 13.0983 71.5492 13.374 72.251 13.374C72.7751 13.374 73.1829 13.2327 73.4746 12.9502C73.7663 12.6722 73.9121 12.2757 73.9121 11.7607V11.3643C73.4564 11.8792 72.8571 12.1367 72.1143 12.1367C71.2256 12.1367 70.5055 11.7904 69.9541 11.0977C69.4072 10.4004 69.1338 9.47754 69.1338 8.3291V8.24707ZM71.1094 8.39062C71.1094 9.06055 71.2438 9.58691 71.5127 9.96973C71.7816 10.348 72.1507 10.5371 72.6201 10.5371C73.2217 10.5371 73.6523 10.3115 73.9121 9.86035V6.75C73.6478 6.29883 73.2217 6.07324 72.6338 6.07324C72.1598 6.07324 71.7861 6.26693 71.5127 6.6543C71.2438 7.04167 71.1094 7.62044 71.1094 8.39062Z" fill="#9EAAB6"/>
|
||||
<path d="M80.8232 12.1367C79.7386 12.1367 78.8545 11.804 78.1709 11.1387C77.4919 10.4733 77.1523 9.58691 77.1523 8.47949V8.28809C77.1523 7.54525 77.2959 6.88216 77.583 6.29883C77.8701 5.71094 78.2757 5.25977 78.7998 4.94531C79.3284 4.6263 79.93 4.4668 80.6045 4.4668C81.6162 4.4668 82.4115 4.78581 82.9902 5.42383C83.5736 6.06185 83.8652 6.96647 83.8652 8.1377V8.94434H79.1553C79.2191 9.42741 79.4105 9.81478 79.7295 10.1064C80.0531 10.3981 80.4609 10.5439 80.9531 10.5439C81.7142 10.5439 82.3089 10.2682 82.7373 9.7168L83.708 10.8037C83.4118 11.223 83.0107 11.5511 82.5049 11.7881C81.999 12.0205 81.4385 12.1367 80.8232 12.1367ZM80.5977 6.06641C80.2057 6.06641 79.8867 6.19857 79.6406 6.46289C79.3991 6.72721 79.2441 7.10547 79.1758 7.59766H81.9238V7.44043C81.9147 7.00293 81.7962 6.66569 81.5684 6.42871C81.3405 6.18717 81.0169 6.06641 80.5977 6.06641Z" fill="#9EAAB6"/>
|
||||
<path d="M96.1426 2.04688V8.60254C96.1426 9.69173 95.8008 10.5531 95.1172 11.1865C94.4382 11.82 93.5085 12.1367 92.3281 12.1367C91.166 12.1367 90.2432 11.8291 89.5596 11.2139C88.876 10.5986 88.5273 9.75325 88.5137 8.67773V2.04688H90.5645V8.61621C90.5645 9.2679 90.7194 9.74414 91.0293 10.0449C91.3438 10.3411 91.7767 10.4893 92.3281 10.4893C93.4811 10.4893 94.0667 9.88314 94.085 8.6709V2.04688H96.1426Z" fill="#9EAAB6"/>
|
||||
<path d="M99.7793 12H97.7969V4.60352H99.7793V12ZM97.6807 2.68945C97.6807 2.39323 97.7786 2.14941 97.9746 1.95801C98.1751 1.7666 98.4463 1.6709 98.7881 1.6709C99.1253 1.6709 99.3942 1.7666 99.5947 1.95801C99.7952 2.14941 99.8955 2.39323 99.8955 2.68945C99.8955 2.99023 99.793 3.23633 99.5879 3.42773C99.3874 3.61914 99.1208 3.71484 98.7881 3.71484C98.4554 3.71484 98.1865 3.61914 97.9814 3.42773C97.7809 3.23633 97.6807 2.99023 97.6807 2.68945Z" fill="#9EAAB6"/>
|
||||
<path d="M110.648 9.94922H107.053L106.369 12H104.188L107.894 2.04688H109.794L113.52 12H111.339L110.648 9.94922ZM107.606 8.28809H110.095L108.844 4.5625L107.606 8.28809Z" fill="#9EAAB6"/>
|
||||
<path d="M120.649 8.37012C120.649 9.50944 120.39 10.4232 119.87 11.1113C119.355 11.7949 118.658 12.1367 117.778 12.1367C117.031 12.1367 116.427 11.877 115.967 11.3574V14.8438H113.991V4.60352H115.823L115.892 5.32812C116.37 4.75391 116.994 4.4668 117.765 4.4668C118.676 4.4668 119.385 4.80404 119.891 5.47852C120.396 6.15299 120.649 7.08268 120.649 8.26758V8.37012ZM118.674 8.22656C118.674 7.53841 118.551 7.00749 118.305 6.63379C118.063 6.26009 117.71 6.07324 117.245 6.07324C116.625 6.07324 116.199 6.31022 115.967 6.78418V9.8125C116.208 10.3001 116.639 10.5439 117.259 10.5439C118.202 10.5439 118.674 9.77148 118.674 8.22656Z" fill="#9EAAB6"/>
|
||||
<path d="M128.538 8.37012C128.538 9.50944 128.278 10.4232 127.759 11.1113C127.244 11.7949 126.547 12.1367 125.667 12.1367C124.92 12.1367 124.316 11.877 123.855 11.3574V14.8438H121.88V4.60352H123.712L123.78 5.32812C124.259 4.75391 124.883 4.4668 125.653 4.4668C126.565 4.4668 127.273 4.80404 127.779 5.47852C128.285 6.15299 128.538 7.08268 128.538 8.26758V8.37012ZM126.562 8.22656C126.562 7.53841 126.439 7.00749 126.193 6.63379C125.952 6.26009 125.599 6.07324 125.134 6.07324C124.514 6.07324 124.088 6.31022 123.855 6.78418V9.8125C124.097 10.3001 124.528 10.5439 125.147 10.5439C126.091 10.5439 126.562 9.77148 126.562 8.22656Z" fill="#9EAAB6"/>
|
||||
<path d="M45.4561 24.6455L46.6279 22.7168H47.6826L45.9541 25.3291L47.7363 28H46.6914L45.4707 26.0225L44.25 28H43.2002L44.9824 25.3291L43.2539 22.7168H44.2988L45.4561 24.6455Z" fill="#9EAAB6"/>
|
||||
<path d="M48.7861 28V20.8906H50.793C51.4115 20.8906 51.9583 21.0273 52.4336 21.3008C52.9089 21.5742 53.2751 21.9632 53.5322 22.4678C53.7926 22.9723 53.9245 23.5518 53.9277 24.2061V24.6602C53.9277 25.3307 53.7975 25.9183 53.5371 26.4229C53.2799 26.9274 52.9105 27.3148 52.4287 27.585C51.9502 27.8551 51.3919 27.9935 50.7539 28H48.7861ZM49.7236 21.6621V27.2334H50.71C51.4326 27.2334 51.9941 27.0088 52.3945 26.5596C52.7982 26.1104 53 25.4707 53 24.6406V24.2256C53 23.4183 52.8096 22.7917 52.4287 22.3457C52.0511 21.8965 51.514 21.6686 50.8174 21.6621H49.7236Z" fill="#9EAAB6"/>
|
||||
<path d="M58.4688 28C58.4167 27.8958 58.3743 27.7103 58.3418 27.4434C57.9219 27.8796 57.4206 28.0977 56.8379 28.0977C56.3171 28.0977 55.889 27.9512 55.5537 27.6582C55.2217 27.362 55.0557 26.9876 55.0557 26.5352C55.0557 25.985 55.264 25.5586 55.6807 25.2559C56.1006 24.9499 56.6898 24.7969 57.4482 24.7969H58.3271V24.3818C58.3271 24.0661 58.2327 23.8154 58.0439 23.6299C57.8551 23.4411 57.5768 23.3467 57.209 23.3467C56.8867 23.3467 56.6165 23.4281 56.3984 23.5908C56.1803 23.7536 56.0713 23.9505 56.0713 24.1816H55.1631C55.1631 23.918 55.2559 23.6641 55.4414 23.4199C55.6302 23.1725 55.8841 22.9772 56.2031 22.834C56.5254 22.6908 56.8786 22.6191 57.2627 22.6191C57.8714 22.6191 58.3483 22.7721 58.6934 23.0781C59.0384 23.3809 59.2174 23.7992 59.2305 24.333V26.7646C59.2305 27.2497 59.2923 27.6354 59.416 27.9219V28H58.4688ZM56.9697 27.3115C57.2529 27.3115 57.5215 27.2383 57.7754 27.0918C58.0293 26.9453 58.2132 26.7549 58.3271 26.5205V25.4365H57.6191C56.5124 25.4365 55.959 25.7604 55.959 26.4082C55.959 26.6914 56.0534 26.9128 56.2422 27.0723C56.431 27.2318 56.6735 27.3115 56.9697 27.3115Z" fill="#9EAAB6"/>
|
||||
<path d="M61.6279 28H60.7246V22.7168H61.6279V28ZM60.6514 21.3154C60.6514 21.1689 60.6953 21.0452 60.7832 20.9443C60.8743 20.8434 61.0078 20.793 61.1836 20.793C61.3594 20.793 61.4928 20.8434 61.584 20.9443C61.6751 21.0452 61.7207 21.1689 61.7207 21.3154C61.7207 21.4619 61.6751 21.584 61.584 21.6816C61.4928 21.7793 61.3594 21.8281 61.1836 21.8281C61.0078 21.8281 60.8743 21.7793 60.7832 21.6816C60.6953 21.584 60.6514 21.4619 60.6514 21.3154Z" fill="#9EAAB6"/>
|
||||
<path d="M67.7949 24.8311C66.9909 24.5999 66.4049 24.3167 66.0371 23.9814C65.6725 23.6429 65.4902 23.2262 65.4902 22.7314C65.4902 22.1715 65.7132 21.7093 66.1592 21.3447C66.6084 20.9769 67.1911 20.793 67.9072 20.793C68.3955 20.793 68.8301 20.8874 69.2109 21.0762C69.5951 21.265 69.8913 21.5254 70.0996 21.8574C70.3112 22.1895 70.417 22.5524 70.417 22.9463H69.4746C69.4746 22.5166 69.3379 22.1797 69.0645 21.9355C68.791 21.6882 68.4053 21.5645 67.9072 21.5645C67.445 21.5645 67.0837 21.667 66.8232 21.8721C66.5661 22.0739 66.4375 22.3555 66.4375 22.7168C66.4375 23.0065 66.5596 23.2523 66.8037 23.4541C67.0511 23.6527 67.4694 23.835 68.0586 24.001C68.651 24.167 69.1133 24.3509 69.4453 24.5527C69.7806 24.7513 70.028 24.984 70.1875 25.251C70.3503 25.5179 70.4316 25.832 70.4316 26.1934C70.4316 26.7695 70.207 27.2318 69.7578 27.5801C69.3086 27.9251 68.708 28.0977 67.9561 28.0977C67.4678 28.0977 67.012 28.0049 66.5889 27.8193C66.1657 27.6305 65.8385 27.3734 65.6074 27.0479C65.3796 26.7223 65.2656 26.3529 65.2656 25.9395H66.208C66.208 26.3691 66.3659 26.7093 66.6816 26.96C67.0007 27.2074 67.4255 27.3311 67.9561 27.3311C68.4508 27.3311 68.8301 27.2301 69.0938 27.0283C69.3574 26.8265 69.4893 26.5514 69.4893 26.2031C69.4893 25.8548 69.3672 25.5863 69.123 25.3975C68.8789 25.2054 68.4362 25.0166 67.7949 24.8311Z" fill="#9EAAB6"/>
|
||||
<path d="M76.5498 21.6621H74.2646V28H73.332V21.6621H71.0518V20.8906H76.5498V21.6621Z" fill="#9EAAB6"/>
|
||||
<path d="M81.1396 26.1445H78.1611L77.4922 28H76.5254L79.2402 20.8906H80.0605L82.7803 28H81.8184L81.1396 26.1445ZM78.4443 25.373H80.8613L79.6504 22.0479L78.4443 25.373Z" fill="#9EAAB6"/>
|
||||
<path d="M85.5439 24.6943L84.6748 25.5977V28H83.7373V20.8906H84.6748V24.4062L87.834 20.8906H88.9668L86.1689 24.0303L89.1865 28H88.0635L85.5439 24.6943Z" fill="#9EAAB6"/>
|
||||
<path d="M94.0254 24.7139H90.9443V27.2334H94.5234V28H90.0068V20.8906H94.4746V21.6621H90.9443V23.9473H94.0254V24.7139Z" fill="#9EAAB6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="8">
|
||||
<path fill="#5c34a2" fill-rule="evenodd" d="M3.781 6.375h-.344v1.031a.333.333 0 0 1-.312.337v.007H.469v-.007c-.006.001-.01.007-.016.007a.336.336 0 0 1-.328-.344V1.219c0-.19.147-.344.328-.344.006 0 .01.006.016.007V.875h3.312c1.467 0 2.656 1.231 2.656 2.75s-1.189 2.75-2.656 2.75zM10.422.875c1.838 0 3.328 1.539 3.328 3.437 0 1.899-1.49 3.438-3.328 3.438-1.838 0-3.328-1.539-3.328-3.438 0-1.898 1.49-3.437 3.328-3.437zM21.369 7.532a.209.209 0 0 1-.205.212h-7.542c-.005.001-.008.006-.013.006-.112 0-.203-.098-.203-.219 0-.042.023-.076.042-.109l-.008-.017 3.739-6.363h.017c.021-.094.091-.17.188-.17.098 0 .167.076.189.17h.017l3.779 6.405-.021.032c.005.019.021.032.021.053zM33.562 7.75h-4.374a.313.313 0 0 1-.313-.313V1.188c0-.173.14-.313.313-.313h4.374c.173 0 .313.14.313.313v6.249c0 .173-.14.313-.313.313zM29.5 1.5v5.625h3.75V1.5H29.5zm-2.188 5.625a.313.313 0 1 1 0 .625h-4.374a.313.313 0 0 1-.313-.313V4.312c0-.172.14-.312.313-.312H27V1.5h-4.062a.313.313 0 1 1 0-.625h4.374c.173 0 .313.14.313.313v3.124c0 .173-.14.313-.313.313H23.25v2.5h4.062z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
ui/src/assets/images/themes/stake/logos/logo-foreign.svg
Normal file
3
ui/src/assets/images/themes/stake/logos/logo-foreign.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="8">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M3.781 6.375h-.344v1.031a.333.333 0 0 1-.312.337v.007H.469v-.007c-.006.001-.01.007-.016.007a.336.336 0 0 1-.328-.344V1.219c0-.19.147-.344.328-.344.006 0 .01.006.016.007V.875h3.312c1.467 0 2.656 1.231 2.656 2.75s-1.189 2.75-2.656 2.75zM10.422.875c1.838 0 3.328 1.539 3.328 3.437 0 1.899-1.49 3.438-3.328 3.438-1.838 0-3.328-1.539-3.328-3.438 0-1.898 1.49-3.437 3.328-3.437zM21.369 7.532a.209.209 0 0 1-.205.212h-7.542c-.005.001-.008.006-.013.006-.112 0-.203-.098-.203-.219 0-.042.023-.076.042-.109l-.008-.017 3.739-6.363h.017c.021-.094.091-.17.188-.17.098 0 .167.076.189.17h.017l3.779 6.405-.021.032c.005.019.021.032.021.053zM33.562 7.75h-4.374a.313.313 0 0 1-.313-.313V1.188c0-.173.14-.313.313-.313h4.374c.173 0 .313.14.313.313v6.249c0 .173-.14.313-.313.313zM29.5 1.5v5.625h3.75V1.5H29.5zm-2.188 5.625a.313.313 0 1 1 0 .625h-4.374a.313.313 0 0 1-.313-.313V4.312c0-.172.14-.312.313-.312H27V1.5h-4.062a.313.313 0 1 1 0-.625h4.374c.173 0 .313.14.313.313v3.124c0 .173-.14.313-.313.313H23.25v2.5h4.062z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/src/assets/images/themes/stake/logos/logo-home-modal.png
Normal file
BIN
ui/src/assets/images/themes/stake/logos/logo-home-modal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
ui/src/assets/images/themes/stake/logos/logo-home.png
Normal file
BIN
ui/src/assets/images/themes/stake/logos/logo-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
7
ui/src/assets/images/themes/stake/logos/logo-loading.svg
Normal file
7
ui/src/assets/images/themes/stake/logos/logo-loading.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
26
ui/src/assets/images/themes/stake/logos/logo.svg
Normal file
26
ui/src/assets/images/themes/stake/logos/logo.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<svg width="129" height="30" viewBox="0 0 129 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0H0V6H12V0Z" fill="#4DA9A6"/>
|
||||
<path d="M30 0H18V6H30V0Z" fill="#4DA9A6"/>
|
||||
<path d="M18 24H24V18H30V30H18V24Z" fill="#4DA9A6"/>
|
||||
<path d="M12 24H6V18H0V30H12V24Z" fill="#4DA9A6"/>
|
||||
<path d="M43.8887 12V2.04688H47.375C48.5827 2.04688 49.4987 2.2793 50.123 2.74414C50.7474 3.20443 51.0596 3.88118 51.0596 4.77441C51.0596 5.26204 50.9342 5.69271 50.6836 6.06641C50.4329 6.43555 50.0843 6.70671 49.6377 6.87988C50.1481 7.00749 50.5492 7.26497 50.8408 7.65234C51.137 8.03971 51.2852 8.51367 51.2852 9.07422C51.2852 10.0312 50.9798 10.7559 50.3691 11.248C49.7585 11.7402 48.888 11.9909 47.7578 12H43.8887ZM45.9395 7.66602V10.3525H47.6963C48.1794 10.3525 48.5553 10.2386 48.8242 10.0107C49.0977 9.77832 49.2344 9.45931 49.2344 9.05371C49.2344 8.14225 48.7627 7.67969 47.8193 7.66602H45.9395ZM45.9395 6.2168H47.457C48.4915 6.19857 49.0088 5.78613 49.0088 4.97949C49.0088 4.52832 48.8766 4.20475 48.6123 4.00879C48.3525 3.80827 47.9401 3.70801 47.375 3.70801H45.9395V6.2168Z" fill="#242A31"/>
|
||||
<path d="M56.8564 6.45605C56.5876 6.4196 56.3506 6.40137 56.1455 6.40137C55.3981 6.40137 54.9082 6.6543 54.6758 7.16016V12H52.7002V4.60352H54.5664L54.6211 5.48535C55.0176 4.80632 55.5667 4.4668 56.2686 4.4668C56.4873 4.4668 56.6924 4.49642 56.8838 4.55566L56.8564 6.45605Z" fill="#242A31"/>
|
||||
<path d="M59.8984 12H57.916V4.60352H59.8984V12ZM57.7998 2.68945C57.7998 2.39323 57.8978 2.14941 58.0938 1.95801C58.2943 1.7666 58.5654 1.6709 58.9072 1.6709C59.2445 1.6709 59.5133 1.7666 59.7139 1.95801C59.9144 2.14941 60.0146 2.39323 60.0146 2.68945C60.0146 2.99023 59.9121 3.23633 59.707 3.42773C59.5065 3.61914 59.2399 3.71484 58.9072 3.71484C58.5745 3.71484 58.3057 3.61914 58.1006 3.42773C57.9001 3.23633 57.7998 2.99023 57.7998 2.68945Z" fill="#242A31"/>
|
||||
<path d="M61.2246 8.24707C61.2246 7.09408 61.4821 6.17578 61.9971 5.49219C62.5166 4.80859 63.2253 4.4668 64.123 4.4668C64.8431 4.4668 65.4378 4.73568 65.9072 5.27344V1.5H67.8896V12H66.1055L66.0098 11.2139C65.5176 11.8291 64.8841 12.1367 64.1094 12.1367C63.2389 12.1367 62.5394 11.7949 62.0107 11.1113C61.4867 10.4232 61.2246 9.46842 61.2246 8.24707ZM63.2002 8.39062C63.2002 9.08333 63.321 9.61426 63.5625 9.9834C63.804 10.3525 64.1549 10.5371 64.6152 10.5371C65.2259 10.5371 65.6566 10.2796 65.9072 9.76465V6.8457C65.6611 6.33073 65.235 6.07324 64.6289 6.07324C63.6764 6.07324 63.2002 6.8457 63.2002 8.39062Z" fill="#242A31"/>
|
||||
<path d="M69.1338 8.24707C69.1338 7.1123 69.4027 6.19857 69.9404 5.50586C70.4827 4.81315 71.2119 4.4668 72.1279 4.4668C72.9391 4.4668 73.5703 4.74479 74.0215 5.30078L74.1035 4.60352H75.8945V11.7539C75.8945 12.401 75.7464 12.9639 75.4502 13.4424C75.1585 13.9209 74.7461 14.2855 74.2129 14.5361C73.6797 14.7868 73.0553 14.9121 72.3398 14.9121C71.7975 14.9121 71.2689 14.8027 70.7539 14.584C70.2389 14.3698 69.8493 14.0918 69.585 13.75L70.46 12.5469C70.9521 13.0983 71.5492 13.374 72.251 13.374C72.7751 13.374 73.1829 13.2327 73.4746 12.9502C73.7663 12.6722 73.9121 12.2757 73.9121 11.7607V11.3643C73.4564 11.8792 72.8571 12.1367 72.1143 12.1367C71.2256 12.1367 70.5055 11.7904 69.9541 11.0977C69.4072 10.4004 69.1338 9.47754 69.1338 8.3291V8.24707ZM71.1094 8.39062C71.1094 9.06055 71.2438 9.58691 71.5127 9.96973C71.7816 10.348 72.1507 10.5371 72.6201 10.5371C73.2217 10.5371 73.6523 10.3115 73.9121 9.86035V6.75C73.6478 6.29883 73.2217 6.07324 72.6338 6.07324C72.1598 6.07324 71.7861 6.26693 71.5127 6.6543C71.2438 7.04167 71.1094 7.62044 71.1094 8.39062Z" fill="#242A31"/>
|
||||
<path d="M80.8232 12.1367C79.7386 12.1367 78.8545 11.804 78.1709 11.1387C77.4919 10.4733 77.1523 9.58691 77.1523 8.47949V8.28809C77.1523 7.54525 77.2959 6.88216 77.583 6.29883C77.8701 5.71094 78.2757 5.25977 78.7998 4.94531C79.3284 4.6263 79.93 4.4668 80.6045 4.4668C81.6162 4.4668 82.4115 4.78581 82.9902 5.42383C83.5736 6.06185 83.8652 6.96647 83.8652 8.1377V8.94434H79.1553C79.2191 9.42741 79.4105 9.81478 79.7295 10.1064C80.0531 10.3981 80.4609 10.5439 80.9531 10.5439C81.7142 10.5439 82.3089 10.2682 82.7373 9.7168L83.708 10.8037C83.4118 11.223 83.0107 11.5511 82.5049 11.7881C81.999 12.0205 81.4385 12.1367 80.8232 12.1367ZM80.5977 6.06641C80.2057 6.06641 79.8867 6.19857 79.6406 6.46289C79.3991 6.72721 79.2441 7.10547 79.1758 7.59766H81.9238V7.44043C81.9147 7.00293 81.7962 6.66569 81.5684 6.42871C81.3405 6.18717 81.0169 6.06641 80.5977 6.06641Z" fill="#242A31"/>
|
||||
<path d="M96.1426 2.04688V8.60254C96.1426 9.69173 95.8008 10.5531 95.1172 11.1865C94.4382 11.82 93.5085 12.1367 92.3281 12.1367C91.166 12.1367 90.2432 11.8291 89.5596 11.2139C88.876 10.5986 88.5273 9.75325 88.5137 8.67773V2.04688H90.5645V8.61621C90.5645 9.2679 90.7194 9.74414 91.0293 10.0449C91.3438 10.3411 91.7767 10.4893 92.3281 10.4893C93.4811 10.4893 94.0667 9.88314 94.085 8.6709V2.04688H96.1426Z" fill="#242A31"/>
|
||||
<path d="M99.7793 12H97.7969V4.60352H99.7793V12ZM97.6807 2.68945C97.6807 2.39323 97.7786 2.14941 97.9746 1.95801C98.1751 1.7666 98.4463 1.6709 98.7881 1.6709C99.1253 1.6709 99.3942 1.7666 99.5947 1.95801C99.7952 2.14941 99.8955 2.39323 99.8955 2.68945C99.8955 2.99023 99.793 3.23633 99.5879 3.42773C99.3874 3.61914 99.1208 3.71484 98.7881 3.71484C98.4554 3.71484 98.1865 3.61914 97.9814 3.42773C97.7809 3.23633 97.6807 2.99023 97.6807 2.68945Z" fill="#242A31"/>
|
||||
<path d="M110.648 9.94922H107.053L106.369 12H104.188L107.894 2.04688H109.794L113.52 12H111.339L110.648 9.94922ZM107.606 8.28809H110.095L108.844 4.5625L107.606 8.28809Z" fill="#242A31"/>
|
||||
<path d="M120.649 8.37012C120.649 9.50944 120.39 10.4232 119.87 11.1113C119.355 11.7949 118.658 12.1367 117.778 12.1367C117.031 12.1367 116.427 11.877 115.967 11.3574V14.8438H113.991V4.60352H115.823L115.892 5.32812C116.37 4.75391 116.994 4.4668 117.765 4.4668C118.676 4.4668 119.385 4.80404 119.891 5.47852C120.396 6.15299 120.649 7.08268 120.649 8.26758V8.37012ZM118.674 8.22656C118.674 7.53841 118.551 7.00749 118.305 6.63379C118.063 6.26009 117.71 6.07324 117.245 6.07324C116.625 6.07324 116.199 6.31022 115.967 6.78418V9.8125C116.208 10.3001 116.639 10.5439 117.259 10.5439C118.202 10.5439 118.674 9.77148 118.674 8.22656Z" fill="#242A31"/>
|
||||
<path d="M128.538 8.37012C128.538 9.50944 128.278 10.4232 127.759 11.1113C127.244 11.7949 126.547 12.1367 125.667 12.1367C124.92 12.1367 124.316 11.877 123.855 11.3574V14.8438H121.88V4.60352H123.712L123.78 5.32812C124.259 4.75391 124.883 4.4668 125.653 4.4668C126.565 4.4668 127.273 4.80404 127.779 5.47852C128.285 6.15299 128.538 7.08268 128.538 8.26758V8.37012ZM126.562 8.22656C126.562 7.53841 126.439 7.00749 126.193 6.63379C125.952 6.26009 125.599 6.07324 125.134 6.07324C124.514 6.07324 124.088 6.31022 123.855 6.78418V9.8125C124.097 10.3001 124.528 10.5439 125.147 10.5439C126.091 10.5439 126.562 9.77148 126.562 8.22656Z" fill="#242A31"/>
|
||||
<path d="M45.4561 24.6455L46.6279 22.7168H47.6826L45.9541 25.3291L47.7363 28H46.6914L45.4707 26.0225L44.25 28H43.2002L44.9824 25.3291L43.2539 22.7168H44.2988L45.4561 24.6455Z" fill="#75818D"/>
|
||||
<path d="M48.7861 28V20.8906H50.793C51.4115 20.8906 51.9583 21.0273 52.4336 21.3008C52.9089 21.5742 53.2751 21.9632 53.5322 22.4678C53.7926 22.9723 53.9245 23.5518 53.9277 24.2061V24.6602C53.9277 25.3307 53.7975 25.9183 53.5371 26.4229C53.2799 26.9274 52.9105 27.3148 52.4287 27.585C51.9502 27.8551 51.3919 27.9935 50.7539 28H48.7861ZM49.7236 21.6621V27.2334H50.71C51.4326 27.2334 51.9941 27.0088 52.3945 26.5596C52.7982 26.1104 53 25.4707 53 24.6406V24.2256C53 23.4183 52.8096 22.7917 52.4287 22.3457C52.0511 21.8965 51.514 21.6686 50.8174 21.6621H49.7236Z" fill="#75818D"/>
|
||||
<path d="M58.4688 28C58.4167 27.8958 58.3743 27.7103 58.3418 27.4434C57.9219 27.8796 57.4206 28.0977 56.8379 28.0977C56.3171 28.0977 55.889 27.9512 55.5537 27.6582C55.2217 27.362 55.0557 26.9876 55.0557 26.5352C55.0557 25.985 55.264 25.5586 55.6807 25.2559C56.1006 24.9499 56.6898 24.7969 57.4482 24.7969H58.3271V24.3818C58.3271 24.0661 58.2327 23.8154 58.0439 23.6299C57.8551 23.4411 57.5768 23.3467 57.209 23.3467C56.8867 23.3467 56.6165 23.4281 56.3984 23.5908C56.1803 23.7536 56.0713 23.9505 56.0713 24.1816H55.1631C55.1631 23.918 55.2559 23.6641 55.4414 23.4199C55.6302 23.1725 55.8841 22.9772 56.2031 22.834C56.5254 22.6908 56.8786 22.6191 57.2627 22.6191C57.8714 22.6191 58.3483 22.7721 58.6934 23.0781C59.0384 23.3809 59.2174 23.7992 59.2305 24.333V26.7646C59.2305 27.2497 59.2923 27.6354 59.416 27.9219V28H58.4688ZM56.9697 27.3115C57.2529 27.3115 57.5215 27.2383 57.7754 27.0918C58.0293 26.9453 58.2132 26.7549 58.3271 26.5205V25.4365H57.6191C56.5124 25.4365 55.959 25.7604 55.959 26.4082C55.959 26.6914 56.0534 26.9128 56.2422 27.0723C56.431 27.2318 56.6735 27.3115 56.9697 27.3115Z" fill="#75818D"/>
|
||||
<path d="M61.6279 28H60.7246V22.7168H61.6279V28ZM60.6514 21.3154C60.6514 21.1689 60.6953 21.0452 60.7832 20.9443C60.8743 20.8434 61.0078 20.793 61.1836 20.793C61.3594 20.793 61.4928 20.8434 61.584 20.9443C61.6751 21.0452 61.7207 21.1689 61.7207 21.3154C61.7207 21.4619 61.6751 21.584 61.584 21.6816C61.4928 21.7793 61.3594 21.8281 61.1836 21.8281C61.0078 21.8281 60.8743 21.7793 60.7832 21.6816C60.6953 21.584 60.6514 21.4619 60.6514 21.3154Z" fill="#75818D"/>
|
||||
<path d="M67.7949 24.8311C66.9909 24.5999 66.4049 24.3167 66.0371 23.9814C65.6725 23.6429 65.4902 23.2262 65.4902 22.7314C65.4902 22.1715 65.7132 21.7093 66.1592 21.3447C66.6084 20.9769 67.1911 20.793 67.9072 20.793C68.3955 20.793 68.8301 20.8874 69.2109 21.0762C69.5951 21.265 69.8913 21.5254 70.0996 21.8574C70.3112 22.1895 70.417 22.5524 70.417 22.9463H69.4746C69.4746 22.5166 69.3379 22.1797 69.0645 21.9355C68.791 21.6882 68.4053 21.5645 67.9072 21.5645C67.445 21.5645 67.0837 21.667 66.8232 21.8721C66.5661 22.0739 66.4375 22.3555 66.4375 22.7168C66.4375 23.0065 66.5596 23.2523 66.8037 23.4541C67.0511 23.6527 67.4694 23.835 68.0586 24.001C68.651 24.167 69.1133 24.3509 69.4453 24.5527C69.7806 24.7513 70.028 24.984 70.1875 25.251C70.3503 25.5179 70.4316 25.832 70.4316 26.1934C70.4316 26.7695 70.207 27.2318 69.7578 27.5801C69.3086 27.9251 68.708 28.0977 67.9561 28.0977C67.4678 28.0977 67.012 28.0049 66.5889 27.8193C66.1657 27.6305 65.8385 27.3734 65.6074 27.0479C65.3796 26.7223 65.2656 26.3529 65.2656 25.9395H66.208C66.208 26.3691 66.3659 26.7093 66.6816 26.96C67.0007 27.2074 67.4255 27.3311 67.9561 27.3311C68.4508 27.3311 68.8301 27.2301 69.0938 27.0283C69.3574 26.8265 69.4893 26.5514 69.4893 26.2031C69.4893 25.8548 69.3672 25.5863 69.123 25.3975C68.8789 25.2054 68.4362 25.0166 67.7949 24.8311Z" fill="#75818D"/>
|
||||
<path d="M76.5498 21.6621H74.2646V28H73.332V21.6621H71.0518V20.8906H76.5498V21.6621Z" fill="#75818D"/>
|
||||
<path d="M81.1396 26.1445H78.1611L77.4922 28H76.5254L79.2402 20.8906H80.0605L82.7803 28H81.8184L81.1396 26.1445ZM78.4443 25.373H80.8613L79.6504 22.0479L78.4443 25.373Z" fill="#75818D"/>
|
||||
<path d="M85.5439 24.6943L84.6748 25.5977V28H83.7373V20.8906H84.6748V24.4062L87.834 20.8906H88.9668L86.1689 24.0303L89.1865 28H88.0635L85.5439 24.6943Z" fill="#75818D"/>
|
||||
<path d="M94.0254 24.7139H90.9443V27.2334H94.5234V28H90.0068V20.8906H94.4746V21.6621H90.9443V23.9473H94.0254V24.7139Z" fill="#75818D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="59">
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M6 0h47a6 6 0 0 1 6 6v47a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6a6 6 0 0 1 6-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M19 12h6v6h-6v-6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M13 18a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M13 18h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 30v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M7 30a6 6 0 0 1 6-6v6H7z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M13 36a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M19 36h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 36h6v6h-6v-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M19 48a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M19 42h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M35 42h6v6h-6v-6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M41 48v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M41 36h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 36a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 36v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M53 30h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 30a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 18h6v6h-6v-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M47 18h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M35 12h6v6h-6v-6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="59">
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M6 0h47a6 6 0 0 1 6 6v47a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6a6 6 0 0 1 6-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M19 12h6v6h-6v-6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M13 18a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M13 18h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 30v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M7 30a6 6 0 0 1 6-6v6H7z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M13 36a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M19 36h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 36h6v6h-6v-6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M19 48a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M19 42h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M35 42h6v6h-6v-6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M41 48v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M41 36h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 36a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 36v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M53 30h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 30a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 18h6v6h-6v-6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M47 18h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M35 12h6v6h-6v-6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="59">
|
||||
<path fill="#9987FC" fill-rule="evenodd" d="M6 0h47a6 6 0 0 1 6 6v47a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6a6 6 0 0 1 6-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M19 12h6v6h-6v-6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M13 18a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M13 18h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 30v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M7 30a6 6 0 0 1 6-6v6H7z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M13 36a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M19 36h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 36h6v6h-6v-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M19 48a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M19 42h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M35 42h6v6h-6v-6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M41 48v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M41 36h6v6h-6v-6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 36a6 6 0 0 1 6-6v6h-6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 36v-6h6a6 6 0 0 1-6 6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M53 30h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#90E1D9" fill-rule="evenodd" d="M47 30a6 6 0 0 1-6-6h6v6z"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M41 18h6v6h-6v-6z"/>
|
||||
<path fill="#61DC97" fill-rule="evenodd" d="M47 18h-6v-6a6 6 0 0 1 6 6z"/>
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M35 12h6v6h-6v-6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
BIN
ui/src/assets/images/themes/stake/transparent.png
Normal file
BIN
ui/src/assets/images/themes/stake/transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
3
ui/src/assets/stylesheets/application.stake.scss
Normal file
3
ui/src/assets/stylesheets/application.stake.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "helpers/variables";
|
||||
@import "themes/stake";
|
||||
@import "base-imports";
|
||||
@ -80,6 +80,7 @@ strong {
|
||||
}
|
||||
|
||||
.separator {
|
||||
display: $separator-display;
|
||||
background-color: $separator-color;
|
||||
height: 51px;
|
||||
width: 1px;
|
||||
@ -102,3 +103,7 @@ strong {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.swal-button {
|
||||
background-color: $base-button-bg-color;
|
||||
}
|
||||
|
||||
@ -26,6 +26,10 @@
|
||||
height: 80px;
|
||||
width: 960px;
|
||||
|
||||
&-stake {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: none
|
||||
}
|
||||
@ -66,6 +70,10 @@
|
||||
height: 80px;
|
||||
width: 960px;
|
||||
|
||||
&-stake {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: none
|
||||
}
|
||||
@ -116,7 +124,7 @@
|
||||
}
|
||||
}
|
||||
.bridge-transfer {
|
||||
height: 276px;
|
||||
height: $form-container-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -125,6 +133,11 @@
|
||||
}
|
||||
.left-image-wrapper {
|
||||
background-color: $bridge-gradient-start;
|
||||
|
||||
&-stake {
|
||||
display: none
|
||||
}
|
||||
|
||||
.left-image {
|
||||
background-color: $main-background-color;
|
||||
background-image: url('#{ $bridge-image-left }');
|
||||
@ -144,6 +157,11 @@
|
||||
|
||||
.right-image-wrapper {
|
||||
background-color: $bridge-gradient-end;
|
||||
|
||||
&-stake {
|
||||
display: none
|
||||
}
|
||||
|
||||
.right-image {
|
||||
background-color: $main-background-color;
|
||||
background-image: url('#{ $bridge-image-right }');
|
||||
@ -168,7 +186,13 @@
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
width: 880px;
|
||||
width: $bridge-transfer-width;
|
||||
|
||||
&-stake {
|
||||
border: 1px solid #E6ECF1;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
border-radius: 8px;
|
||||
@ -180,7 +204,7 @@
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
width: 880px;
|
||||
width: $bridge-transfer-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
background-image: url('#{ $bridge-image-center-pointing-down }');
|
||||
@ -196,9 +220,9 @@
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 136px;
|
||||
justify-content: space-evenly;
|
||||
padding: 70px 1% 70px 5%;
|
||||
height: $network-container-height;
|
||||
justify-content: $network-container-justify-content;
|
||||
padding: $network-container-padding;
|
||||
width: 22%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@ -207,15 +231,16 @@
|
||||
height: 136px;
|
||||
padding: 5px 0 5px 0;
|
||||
width: auto;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.network-container-foreign {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 136px;
|
||||
justify-content: space-evenly;
|
||||
padding: 70px 5% 70px 1%;
|
||||
height: $network-container-height;
|
||||
justify-content: $network-container-justify-content;
|
||||
padding: $network-container-padding-foreign;
|
||||
width: 22%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@ -224,6 +249,7 @@
|
||||
height: 136px;
|
||||
padding: 5px 0 5px 0;
|
||||
width: auto;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.bridge-network-data {
|
||||
@ -232,7 +258,7 @@
|
||||
display: flex;
|
||||
}
|
||||
.network-basic-label {
|
||||
font-size: 13px;
|
||||
font-size: $network-basic-label-font-size;
|
||||
color: $bridge-label-color;
|
||||
}
|
||||
.network-title {
|
||||
@ -240,6 +266,12 @@
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
&-stake {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
.network-name {
|
||||
color: $bridge-label-color;
|
||||
@ -277,17 +309,17 @@
|
||||
}
|
||||
.network-balance {
|
||||
color: $bridge-balance-color;
|
||||
font-size: 13px;
|
||||
font-size: $network-basic-label-font-size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.network-show-more {
|
||||
color: $bridge-link-color;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-weight: $network-show-more-font-weight;
|
||||
}
|
||||
.info-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
display: $info-icon-display;
|
||||
justify-content: center;
|
||||
path {
|
||||
fill: $bridge-link-color;
|
||||
@ -318,8 +350,8 @@
|
||||
}
|
||||
}
|
||||
.form-container {
|
||||
height: 276px;
|
||||
max-width: 384px;
|
||||
height: $form-container-height;
|
||||
max-width: $form-container-max-width;
|
||||
width: 44%;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
align-self: center;
|
||||
@ -329,7 +361,7 @@
|
||||
.bridge-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 276px;
|
||||
height: $form-container-height;
|
||||
justify-content: space-evenly;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
height: auto;
|
||||
@ -346,6 +378,21 @@
|
||||
flex-direction: column;
|
||||
padding: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
&-stake {
|
||||
border: 1px solid #E6ECF1;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
height: 60px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
background-color: unset;
|
||||
flex-direction: column;
|
||||
padding: 0 0 0 0;
|
||||
margin: 0 8px 0 8px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bridge-form-input-container {
|
||||
display: flex;
|
||||
@ -363,7 +410,7 @@
|
||||
color: $bridge-textfield-color;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
height: 48px;
|
||||
height: $bridge-input-label-line-height;
|
||||
padding-left: 16px;
|
||||
width: 165px;
|
||||
|
||||
@ -386,10 +433,10 @@
|
||||
}
|
||||
&-label {
|
||||
color: $bridge-input-label-color;
|
||||
font-size: 24px;
|
||||
font-size: $bridge-input-label-font-size;
|
||||
font-weight: 700;
|
||||
line-height: 48px;
|
||||
margin: 0 10px;
|
||||
line-height: $bridge-input-label-line-height;
|
||||
margin: $bridge-input-label-margin;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@ -398,17 +445,17 @@
|
||||
}
|
||||
&-button {
|
||||
background-color: $bridge-button-background-color;
|
||||
border-radius: 3px;
|
||||
border-radius: $bridge-transfer-button-border-radius;
|
||||
color: $bridge-button-text-color;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
height: 48px;
|
||||
height: $bridge-transfer-button-height;
|
||||
text-decoration: none;
|
||||
width: 92px;
|
||||
width: $bridge-transfer-button-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-radius: $bridge-transfer-button-border-radius;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -454,6 +501,10 @@
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-stake {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.details-logo-container:after {
|
||||
@ -480,7 +531,7 @@
|
||||
.details-body {
|
||||
align-self: flex-end;
|
||||
background-color: $modal-background-color;
|
||||
border-radius: 0 10px 10px 10px;
|
||||
border-radius: $network-details-body-border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 254px;
|
||||
@ -488,6 +539,12 @@
|
||||
padding: 38px;
|
||||
width: 440px;
|
||||
|
||||
&-stake {
|
||||
padding: 26px 30px 26px 30px;
|
||||
width: 480px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
align-self: center;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
@ -499,7 +556,7 @@
|
||||
height: 300px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
height: 250px;
|
||||
height: $network-details-body-mobile-height;
|
||||
}
|
||||
|
||||
.details-data-container {
|
||||
@ -517,15 +574,40 @@
|
||||
.details-description {
|
||||
color: $modal-link-color;
|
||||
font-size: 14px;
|
||||
|
||||
&-currency {
|
||||
&-stake {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.details-description-black {
|
||||
color: $modal-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
&-stake {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.details-copy {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-weight: bold;
|
||||
color: $modal-text-color;
|
||||
}
|
||||
|
||||
&-core {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-classic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.details-body:before {
|
||||
@ -547,13 +629,17 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.details-body-stake:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.transfer-alert {
|
||||
background-color: $modal-background-color;
|
||||
border-radius: 8px;
|
||||
border-radius: $transfer-alert-border-radius;
|
||||
display: flex;
|
||||
height: 265px;
|
||||
width: 600px;
|
||||
height: $transfer-alert-height;
|
||||
width: $transfer-alert-width;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
@ -572,20 +658,22 @@
|
||||
margin-top: 39px;
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
&-stake {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.alert-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 40px;
|
||||
padding-right: 60px;
|
||||
padding-top: 40px;
|
||||
width: 374px;
|
||||
justify-content: $transfer-alert-container-justify-content;
|
||||
padding: $transfer-alert-container-padding;
|
||||
width: $transfer-alert-container-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-left: 5px;
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
padding: 10px 10px;
|
||||
width: 94%;
|
||||
height: 317px;
|
||||
}
|
||||
.alert-corner {
|
||||
height: 12px;
|
||||
@ -611,48 +699,121 @@
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&-stake {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-title-alternative {
|
||||
&-core,
|
||||
&-classic {
|
||||
display: none;
|
||||
}
|
||||
&-stake {
|
||||
|
||||
.transfer-title-text {
|
||||
color: $modal-text-color;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
.transfer-operation-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.transfer-operation-box {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
border: 1px solid #E6ECF1;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.transfer-operation-box-value {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.transfer-operation-box-network {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-operation-arrow-container {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
background-image: url('#{ $transfer-operation-arrow-line-image }');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.transfer-operation-ellipse {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
background-image: url('#{ $transfer-operation-arrow-ellipse-image }');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.transfer-operation-arrow {
|
||||
width: 113px;
|
||||
height: 60px;
|
||||
background-image: url('#{ $transfer-operation-arrow-image }');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-description {
|
||||
color: $modal-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding: $transfer-description-padding;
|
||||
}
|
||||
.transfer-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0 0;
|
||||
padding: $transfer-buttons-padding;
|
||||
|
||||
.transfer-confirm {
|
||||
background-color: $button-background-color;
|
||||
border-radius: 3px;
|
||||
border-radius: $button-transfer-confirm-border-radius;
|
||||
color: $button-text-color;
|
||||
flex-grow: 1;
|
||||
font-size: 15px;
|
||||
font-size: $button-transfer-confirm-font-size;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
height: 40px;
|
||||
max-width: 49%;
|
||||
height: $button-transfer-confirm-height;
|
||||
max-width: $button-transfer-confirm-max-width;
|
||||
text-decoration: none;
|
||||
order: $transfer-alert-confirm-button-order;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($button-background-color, 10%);
|
||||
background-color: $button-transfer-confirm-hover-background-color;
|
||||
}
|
||||
}
|
||||
.transfer-cancel {
|
||||
background-color: $button-bordered-background-color;
|
||||
border-radius: 3px;
|
||||
border: solid 1px $button-bordered-border-color;
|
||||
border-radius: $button-transfer-cancel-border-radius;
|
||||
border: $button-transfer-cancel-border;
|
||||
color: $button-bordered-text-color;
|
||||
flex-grow: 1;
|
||||
font-size: 15px;
|
||||
font-size: $button-transfer-cancel-font-size;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
height: 40px;
|
||||
max-width: 49%;
|
||||
height: $button-transfer-cancel-height;
|
||||
max-width: $button-transfer-cancel-max-width;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
opacity: $button-transfer-cancel-hover-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 50px;
|
||||
width: 234px;
|
||||
height: $loading-logo-height;
|
||||
width: $loading-logo-width;
|
||||
}
|
||||
|
||||
.loading {
|
||||
@ -27,12 +27,26 @@
|
||||
background-color: $modal-overlay-background-color;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: $loading-container-justify-content;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: $loading-container-justify-content;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
|
||||
&-stake {
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
@ -46,6 +60,7 @@
|
||||
height: 50px;
|
||||
opacity: .2;
|
||||
width: 2px;
|
||||
display: $loading-logo-i-display;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .1s;
|
||||
@ -54,14 +69,14 @@
|
||||
|
||||
&-text {
|
||||
color: $loading-item-text-color;
|
||||
font-size: 24px;
|
||||
font-size: $loading-text-font-size;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 3;
|
||||
line-height: $loading-text-line-height;
|
||||
text-align: center;
|
||||
width: 500px;
|
||||
width: $loading-text-width;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
font-size: 18px;
|
||||
|
||||
@ -2,24 +2,27 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
|
||||
.modal {
|
||||
border-radius: 10px;
|
||||
min-height: 410px;
|
||||
min-width: 558px;
|
||||
min-height: $modal-min-height;
|
||||
min-width: $modal-min-width;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: 90%;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 90%;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
min-width: 100%;
|
||||
min-width: 90%;
|
||||
width: 90%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@ -38,16 +41,16 @@
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 15px;
|
||||
padding: $modal-close-button-padding;
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: 40px;
|
||||
right: $modal-close-button-right;
|
||||
top: $modal-close-button-top;
|
||||
z-index: 400000;
|
||||
|
||||
i {
|
||||
&.icon {
|
||||
&:before {
|
||||
content: url("../images/modal/close.svg");
|
||||
content: url($modal-close-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -61,8 +64,8 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
top: -40px;
|
||||
right: 0;
|
||||
top: $modal-close-button-top-mobile;
|
||||
right: $modal-close-button-right-mobile;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
.statistics-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: $status-container-justify-content;
|
||||
max-width: $container-width;
|
||||
padding-bottom: 25px;
|
||||
width: 70%;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
width: 100%;
|
||||
width: $status-page-container-mobile-width;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@ -21,26 +22,34 @@
|
||||
.statistics-title {
|
||||
color: $statistics-title-color;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 20px;
|
||||
font-size: $statistics-title-font-size;
|
||||
line-height: $statistics-title-line-height;
|
||||
font-weight: $statistics-title-font-weight;
|
||||
letter-spacing: $statistics-title-letter-spacing;
|
||||
text-transform: $statistics-title-text-transform;
|
||||
padding: $statistics-title-padding;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.statistics-bridge-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 30px;
|
||||
padding: $status-container-padding;
|
||||
|
||||
.statistics-bridge-data {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: $statistics-fee-data-justify-content;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
display: $status-configuration-data-display;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.datablock-container {
|
||||
margin: $statistics-bridge-data-mobile-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -48,8 +57,9 @@
|
||||
.statistics-fee-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 90px;
|
||||
width: 50%;
|
||||
padding: $statistics-fee-container-padding;
|
||||
width: $statistics-fee-container-width;
|
||||
order: $statistics-fee-container-order;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: auto;
|
||||
@ -58,12 +68,12 @@
|
||||
|
||||
.statistics-fee-data {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: $statistics-fee-data-justify-content;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: auto;
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
display: $status-configuration-data-display;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 20px;
|
||||
}
|
||||
@ -73,7 +83,7 @@
|
||||
.statistics-transaction-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 90px;
|
||||
padding: $statistics-fee-container-padding;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: column;
|
||||
@ -81,7 +91,7 @@
|
||||
}
|
||||
|
||||
.statistics-deposit-container {
|
||||
width: 40%;
|
||||
width: $statistics-deposit-container-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 40px;
|
||||
@ -91,7 +101,7 @@
|
||||
}
|
||||
|
||||
.statistics-withdraw-container {
|
||||
width: 40%;
|
||||
width: $statistics-deposit-container-width;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: auto;
|
||||
@ -100,13 +110,18 @@
|
||||
|
||||
.statistics-bridge-data {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: $statistics-fee-data-justify-content;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
display: $status-configuration-data-display;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.datablock-container {
|
||||
margin: $statistics-bridge-data-mobile-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,15 @@
|
||||
|
||||
.status-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: $status-container-flex-direction;
|
||||
justify-content: $status-container-justify-content;
|
||||
max-width: $container-width;
|
||||
width: 70%;
|
||||
padding-bottom: 25px;
|
||||
padding: $status-container-padding;
|
||||
|
||||
@media screen and (max-width: $tablet-width-landscape) {
|
||||
width: 100%;
|
||||
width: $status-page-container-mobile-width;
|
||||
flex-direction: $status-container-mobile-flex-direction;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@ -20,15 +22,22 @@
|
||||
|
||||
.status-title {
|
||||
color: $status-text-color;
|
||||
font-size: 24px;
|
||||
line-height: 3;
|
||||
font-size: $status-title-font-size;
|
||||
line-height: $status-title-line-height;
|
||||
text-align: left;
|
||||
font-weight: $status-title-font-weight;
|
||||
letter-spacing: $status-title-letter-spacing;
|
||||
text-transform: $status-title-text-transform;
|
||||
padding: $status-title-padding;
|
||||
}
|
||||
|
||||
.status-configuration-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 30px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding: $status-configuration-container-padding;
|
||||
}
|
||||
|
||||
.status-configuration-data {
|
||||
display: flex;
|
||||
@ -36,9 +45,15 @@
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
display: $status-configuration-data-display;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: $statistics-fee-data-justify-content;
|
||||
|
||||
.datablock-container {
|
||||
margin: $statistics-bridge-data-mobile-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,8 +52,7 @@
|
||||
margin-left: 10px;
|
||||
transition: .15s ease-in;
|
||||
path {
|
||||
fill: #fff;
|
||||
opacity: .52;
|
||||
fill: $header-menu-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,7 +85,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: $header-menu-text-color;
|
||||
transition: .15s ease-in;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
@ -120,7 +119,7 @@
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
color: $header-menu-text-color;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 18px;
|
||||
@ -160,5 +159,5 @@
|
||||
}
|
||||
|
||||
.nl-IconNetwork_Path {
|
||||
fill: #60db97;
|
||||
fill: $header-menu-icon-color;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
padding: 15px;
|
||||
|
||||
.daily-quota-title {
|
||||
color: $primary-color;
|
||||
color: $daily-quota-modal-title;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
@ -3,26 +3,51 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
width: $datablock-container-width;
|
||||
min-width: $datablock-container-width;
|
||||
height: $datablock-container-height;
|
||||
background-color: $datablock-container-background;
|
||||
border: $datablock-container-border;
|
||||
box-sizing: $datablock-container-box-sizing;
|
||||
border-radius: $datablock-container-border-radius;
|
||||
margin: $datablock-container-margin;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
align-items: normal;
|
||||
justify-content: flex-start;
|
||||
align-items: $datablock-container-mobile-align-items;
|
||||
justify-content: $datablock-container-mobile-justify-content;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.datablock-value {
|
||||
color: $datablock-value-color;
|
||||
font-size: 30px;
|
||||
font-size: $datablock-value-font-size;
|
||||
line-height: $datablock-value-line-height;
|
||||
font-weight: bold;
|
||||
|
||||
&-green {
|
||||
color: #4DA9A6;
|
||||
}
|
||||
|
||||
&-yellow {
|
||||
color: #FFA800;
|
||||
}
|
||||
|
||||
&-red {
|
||||
color: #FF002E;
|
||||
}
|
||||
}
|
||||
|
||||
.datablock-type {
|
||||
color: $datablock-type-color;
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
font-size: $datablock-type-font-size;
|
||||
line-height: $datablock-type-line-height;
|
||||
font-weight: $datablock-type-font-weight;
|
||||
margin-left: $datablock-type-margin-left;
|
||||
}
|
||||
|
||||
.datablock-description {
|
||||
color: $datablock-text-color;
|
||||
font-size: 14px;
|
||||
font-size: $datablock-description-font-size;
|
||||
line-height: $datablock-description-line-height;
|
||||
}
|
||||
}
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
&-logo {
|
||||
background-image: url('#{ $logo-image }');
|
||||
background-image: url('#{ $footer-logo-image }');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
|
||||
@ -21,13 +21,17 @@
|
||||
}
|
||||
}
|
||||
.wallet-text {
|
||||
color: #fff;
|
||||
color: $wallet-text;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-stake {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.wallet-link {
|
||||
cursor: pointer;
|
||||
|
||||
@ -6,6 +6,11 @@
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
&-stake {
|
||||
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
|
||||
border-bottom: 1px solid #D4DADF;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -30,5 +35,4 @@
|
||||
height: $header-logo-height;
|
||||
width: $header-logo-width;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
.menu-items {
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
|
||||
&-core,
|
||||
&-classic {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -16,6 +20,10 @@
|
||||
.menu-items-text {
|
||||
color: $header-menu-text-color;
|
||||
margin-left: 10px;
|
||||
|
||||
&-selected {
|
||||
color: $header-menu-text-color-selected;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-items-icon {
|
||||
@ -23,4 +31,10 @@
|
||||
path {
|
||||
fill: $header-menu-icon-color;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
path {
|
||||
fill: $header-menu-icon-color-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,3 +29,7 @@
|
||||
fill: $social-icons-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.social-alternative-icons-item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ $secondary-color-dark: #64a231;
|
||||
$tertiary-color: #ffaa07;
|
||||
$danger-color: #f13662;
|
||||
$blue-color: #3ab9fe;
|
||||
$base-button-bg-color: #08b3f2;
|
||||
|
||||
$text-color: #333;
|
||||
$link-color: $primary-color;
|
||||
@ -17,6 +18,7 @@ $gradient-color-1: $primary-color;
|
||||
$gradient-color-2: #7b5ab2;
|
||||
|
||||
// main
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
|
||||
$main-background-color: #fff;
|
||||
$main-font-family: 'Nunito', sans-serif;
|
||||
|
||||
@ -28,8 +30,11 @@ $header-logo-height: 26px;
|
||||
// header menu
|
||||
$header-menu-icon-color: $secondary-color;
|
||||
$header-menu-text-color: #fff;
|
||||
$header-menu-icon-color-selected: $secondary-color;
|
||||
$header-menu-text-color-selected: #fff;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #fff;
|
||||
$daily-quota-background: $primary-color-darker;
|
||||
$daily-quota-progress: $secondary-color;
|
||||
|
||||
@ -41,6 +46,7 @@ $footer-text-color: #fff;
|
||||
|
||||
// separator
|
||||
$separator-color: #e4e4e4;
|
||||
$separator-display: initial;
|
||||
|
||||
// background
|
||||
$pattern-background-image: $base-images-path + '/themes/' + $theme-name + '/background/bg-pattern.svg';
|
||||
@ -51,6 +57,7 @@ $social-icons-icon-color: $primary-color;
|
||||
|
||||
// logo
|
||||
$logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo.svg';
|
||||
$footer-logo-image: $logo-image;
|
||||
|
||||
// home logo
|
||||
$home-logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo-home.png';
|
||||
@ -80,6 +87,17 @@ $button-text-color-4: #fff;
|
||||
$button-bordered-background-color: #fff;
|
||||
$button-bordered-text-color: $primary-color;
|
||||
$button-bordered-border-color: $primary-color;
|
||||
$button-transfer-cancel-border-radius: 3px;
|
||||
$button-transfer-cancel-border: solid 1px $button-bordered-border-color;
|
||||
$button-transfer-cancel-font-size: 15px;
|
||||
$button-transfer-cancel-hover-opacity: 0.7;
|
||||
$button-transfer-cancel-height: 40px;
|
||||
$button-transfer-cancel-max-width: 49%;
|
||||
$button-transfer-confirm-border-radius: 3px;
|
||||
$button-transfer-confirm-font-size: 15px;
|
||||
$button-transfer-confirm-hover-background-color: darken($button-background-color, 10%);
|
||||
$button-transfer-confirm-height: 40px;
|
||||
$button-transfer-confirm-max-width: 49%;
|
||||
|
||||
// modals
|
||||
$modal-background-color: #fff;
|
||||
@ -87,6 +105,15 @@ $modal-overlay-background-color: rgba($primary-color-dark, 0.8);
|
||||
$modal-title-color: $primary-color;
|
||||
$modal-text-color: $text-color;
|
||||
$modal-link-color: $primary-color;
|
||||
$daily-quota-modal-title: $primary-color;
|
||||
$modal-close-button: "../images/modal/close.svg";
|
||||
$modal-close-button-padding: 15px;
|
||||
$modal-close-button-right: -40px;
|
||||
$modal-close-button-top: 40px;
|
||||
$modal-close-button-top-mobile: -40px;
|
||||
$modal-close-button-right-mobile: 0px;
|
||||
$modal-min-width: 558px;
|
||||
$modal-min-height: 410px;
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-darker;
|
||||
@ -96,6 +123,13 @@ $mobile-menu-overlay-color: rgba($primary-color-darker, 0.9);
|
||||
$loading-item-background-color: $secondary-color;
|
||||
$loading-item-text-color: #fff;
|
||||
$loading-logo: $base-images-path + '/themes/' + $theme-name + '/logos/logo-loading.svg';
|
||||
$loading-logo-height: 50px;
|
||||
$loading-logo-width: 234px;
|
||||
$loading-logo-i-display: block;
|
||||
$loading-text-font-size: 24px;
|
||||
$loading-text-line-height: 3;
|
||||
$loading-text-width: 500px;
|
||||
$loading-container-justify-content: center;
|
||||
|
||||
// bridge section
|
||||
$bridge-gradient-start: $gradient-color-1;
|
||||
@ -118,10 +152,45 @@ $bridge-image-center-pointing-down: $base-images-path + '/themes/' + $theme-name
|
||||
$bridge-image-left: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-1.png';
|
||||
$bridge-image-right: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-2.png';
|
||||
$bridge-transfer-title-color: $primary-color;
|
||||
$bridge-transfer-width: 880px;
|
||||
$bridge-transfer-button-height: 48px;
|
||||
$bridge-transfer-button-width: 92px;
|
||||
$bridge-transfer-button-border-radius: 3px;
|
||||
$form-container-height: 276px;
|
||||
$form-container-max-width: 384px;
|
||||
$network-container-height: 136px;
|
||||
$network-container-padding: 70px 1% 70px 5%;
|
||||
$network-container-padding-foreign: 70px 5% 70px 1%;
|
||||
$network-basic-label-font-size: 13px;
|
||||
$info-icon-display: flex;
|
||||
$network-show-more-font-weight: 700;
|
||||
$network-container-justify-content: space-evenly;
|
||||
$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;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 0 10px 10px 10px;
|
||||
$network-details-body-mobile-height: 250px;
|
||||
|
||||
// bridge alert
|
||||
$alert-logo-box-background-color: $primary-color;
|
||||
|
||||
// bridge transfer alert
|
||||
$transfer-alert-height: 265px;
|
||||
$transfer-alert-width: 600px;
|
||||
$transfer-alert-border-radius: 8px;
|
||||
$transfer-alert-container-width: 374px;
|
||||
$transfer-alert-container-padding: 40px 60px 40px 0;
|
||||
$transfer-alert-confirm-button-order: 0;
|
||||
$transfer-alert-container-justify-content: space-around;
|
||||
$transfer-description-padding: 10px 0 10px 0;
|
||||
$transfer-buttons-padding: 20px 0 0;
|
||||
$transfer-operation-arrow-line-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
$transfer-operation-arrow-ellipse-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
$transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
|
||||
@ -129,6 +198,19 @@ $copy-icon-color: $primary-color;
|
||||
$status-text-color: $text-color;
|
||||
$status-authority-number-color: $primary-color;
|
||||
$status-authority-address-color: $text-color;
|
||||
$status-title-font-size: 24px;
|
||||
$status-title-line-height: 3;
|
||||
$status-title-font-weight: normal;
|
||||
$status-title-letter-spacing: normal;
|
||||
$status-title-text-transform: none;
|
||||
$status-container-flex-direction: column;
|
||||
$status-container-mobile-flex-direction: $status-container-flex-direction;
|
||||
$status-container-justify-content: unset;
|
||||
$status-container-padding: 30px 0 25px 0;
|
||||
$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-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';
|
||||
@ -136,11 +218,40 @@ $status-authority-logo-2: $base-images-path + '/themes/' + $theme-name + '/statu
|
||||
|
||||
// datablock
|
||||
$datablock-value-color: $primary-color;
|
||||
$datablock-value-font-size: 30px;
|
||||
$datablock-value-line-height: 35px;
|
||||
$datablock-type-font-size: 18px;
|
||||
$datablock-type-line-height: 21px;
|
||||
$datablock-type-font-weight: normal;
|
||||
$datablock-type-margin-left: 10px;
|
||||
$datablock-type-color: $primary-color;
|
||||
$datablock-text-color: $text-color;
|
||||
$datablock-container-width: auto;
|
||||
$datablock-container-height: auto;
|
||||
$datablock-container-background: transparent;
|
||||
$datablock-container-border: none;
|
||||
$datablock-container-box-sizing: unset;
|
||||
$datablock-container-border-radius: 0;
|
||||
$datablock-container-margin: 0 0 0 0;
|
||||
$datablock-container-mobile-align-items: normal;
|
||||
$datablock-container-mobile-justify-content: flex-start;
|
||||
$datablock-description-font-size: 14px;
|
||||
$datablock-description-line-height: 16px;
|
||||
|
||||
// statistics
|
||||
$statistics-title-color: $text-color;
|
||||
$statistics-title-font-size: $status-title-font-size;
|
||||
$statistics-title-line-height: 1.5;
|
||||
$statistics-title-font-weight: normal;
|
||||
$statistics-title-letter-spacing: normal;
|
||||
$statistics-title-text-transform: none;
|
||||
$statistics-title-padding: 0 0 20px 0;
|
||||
$statistics-fee-container-order: 0;
|
||||
$statistics-fee-container-padding: 90px 0 0 0;
|
||||
$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;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
|
||||
@ -9,6 +9,7 @@ $secondary-color-dark: #64a231;
|
||||
$tertiary-color: #ffaa07;
|
||||
$danger-color: #f13662;
|
||||
$blue-color: #3ab9fe;
|
||||
$base-button-bg-color: #08b3f2;
|
||||
|
||||
$text-color: #fff;
|
||||
$link-color: $secondary-color;
|
||||
@ -17,6 +18,7 @@ $gradient-color-1: #352d59;
|
||||
$gradient-color-2: #352d59;
|
||||
|
||||
// main
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
|
||||
$main-background-color: #17132b;
|
||||
$main-font-family: 'Nunito', sans-serif;
|
||||
|
||||
@ -28,8 +30,11 @@ $header-logo-height: 41px;
|
||||
// header menu
|
||||
$header-menu-icon-color: $primary-color;
|
||||
$header-menu-text-color: #fff;
|
||||
$header-menu-icon-color-selected: $primary-color;
|
||||
$header-menu-text-color-selected: #fff;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #fff;
|
||||
$daily-quota-background: rgba(255, 255, 255, 0.2);
|
||||
$daily-quota-progress: $primary-color;
|
||||
|
||||
@ -41,6 +46,7 @@ $footer-text-color: #fff;
|
||||
|
||||
// separator
|
||||
$separator-color: #333;
|
||||
$separator-display: initial;
|
||||
|
||||
// background
|
||||
$pattern-background-image: $base-images-path + '/themes/' + $theme-name + '/background/bg-pattern.svg';
|
||||
@ -51,6 +57,7 @@ $social-icons-icon-color: #b9b0e1;
|
||||
|
||||
// logo
|
||||
$logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo.svg';
|
||||
$footer-logo-image: $logo-image;
|
||||
|
||||
// home logo
|
||||
$home-logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo-home.svg';
|
||||
@ -80,6 +87,17 @@ $button-text-color-4: #fff;
|
||||
$button-bordered-background-color: #fff;
|
||||
$button-bordered-text-color: $primary-color-dark;
|
||||
$button-bordered-border-color: $primary-color-dark;
|
||||
$button-transfer-cancel-border-radius: 3px;
|
||||
$button-transfer-cancel-border: solid 1px $button-bordered-border-color;
|
||||
$button-transfer-cancel-font-size: 15px;
|
||||
$button-transfer-cancel-hover-opacity: 0.7;
|
||||
$button-transfer-cancel-height: 40px;
|
||||
$button-transfer-cancel-max-width: 49%;
|
||||
$button-transfer-confirm-border-radius: 3px;
|
||||
$button-transfer-confirm-font-size: 15px;
|
||||
$button-transfer-confirm-hover-background-color: darken($button-background-color, 10%);
|
||||
$button-transfer-confirm-height: 40px;
|
||||
$button-transfer-confirm-max-width: 49%;
|
||||
|
||||
// modals
|
||||
$modal-background-color: #fff;
|
||||
@ -87,6 +105,15 @@ $modal-overlay-background-color: rgba($primary-color-darker, 0.9);
|
||||
$modal-title-color: $primary-color-dark;
|
||||
$modal-text-color: #352d59;
|
||||
$modal-link-color: $secondary-color;
|
||||
$daily-quota-modal-title: $primary-color;
|
||||
$modal-close-button: "../images/modal/close.svg";
|
||||
$modal-close-button-padding: 15px;
|
||||
$modal-close-button-right: -40px;
|
||||
$modal-close-button-top: 40px;
|
||||
$modal-close-button-top-mobile: -40px;
|
||||
$modal-close-button-right-mobile: 0px;
|
||||
$modal-min-width: 558px;
|
||||
$modal-min-height: 410px;
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-darker;
|
||||
@ -96,6 +123,13 @@ $mobile-menu-overlay-color: rgba($primary-color-darker, 0.9);
|
||||
$loading-item-background-color: $secondary-color;
|
||||
$loading-item-text-color: #fff;
|
||||
$loading-logo: $base-images-path + '/themes/' + $theme-name + '/logos/logo-loading.svg';
|
||||
$loading-logo-height: 50px;
|
||||
$loading-logo-width: 234px;
|
||||
$loading-logo-i-display: block;
|
||||
$loading-text-font-size: 24px;
|
||||
$loading-text-line-height: 3;
|
||||
$loading-text-width: 500px;
|
||||
$loading-container-justify-content: center;
|
||||
|
||||
// bridge section
|
||||
$bridge-gradient-start: #fff;
|
||||
@ -118,10 +152,45 @@ $bridge-image-center-pointing-down: $base-images-path + '/themes/' + $theme-name
|
||||
$bridge-image-left: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-1.png';
|
||||
$bridge-image-right: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-2.png';
|
||||
$bridge-transfer-title-color: $modal-text-color;
|
||||
$bridge-transfer-width: 880px;
|
||||
$bridge-transfer-button-height: 48px;
|
||||
$bridge-transfer-button-width: 92px;
|
||||
$bridge-transfer-button-border-radius: 3px;
|
||||
$form-container-height: 276px;
|
||||
$form-container-max-width: 384px;
|
||||
$network-container-height: 136px;
|
||||
$network-container-padding: 70px 1% 70px 5%;
|
||||
$network-container-padding-foreign: 70px 5% 70px 1%;
|
||||
$network-basic-label-font-size: 13px;
|
||||
$info-icon-display: flex;
|
||||
$network-show-more-font-weight: 700;
|
||||
$network-container-justify-content: space-evenly;
|
||||
$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;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 0 10px 10px 10px;
|
||||
$network-details-body-mobile-height: 250px;
|
||||
|
||||
// bridge alert
|
||||
$alert-logo-box-background-color: $primary-color;
|
||||
|
||||
// bridge transfer alert
|
||||
$transfer-alert-height: 265px;
|
||||
$transfer-alert-width: 600px;
|
||||
$transfer-alert-border-radius: 8px;
|
||||
$transfer-alert-container-width: 374px;
|
||||
$transfer-alert-container-padding: 40px 60px 40px 0;
|
||||
$transfer-alert-confirm-button-order: 0;
|
||||
$transfer-alert-container-justify-content: space-around;
|
||||
$transfer-description-padding: 10px 0 10px 0;
|
||||
$transfer-buttons-padding: 20px 0 0;
|
||||
$transfer-operation-arrow-line-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
$transfer-operation-arrow-ellipse-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
$transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
|
||||
@ -129,6 +198,19 @@ $copy-icon-color: $primary-color;
|
||||
$status-text-color: $text-color;
|
||||
$status-authority-number-color: $text-color;
|
||||
$status-authority-address-color: $primary-color;
|
||||
$status-title-font-size: 24px;
|
||||
$status-title-line-height: 3;
|
||||
$status-title-font-weight: normal;
|
||||
$status-title-letter-spacing: normal;
|
||||
$status-title-text-transform: none;
|
||||
$status-container-flex-direction: column;
|
||||
$status-container-mobile-flex-direction: $status-container-flex-direction;
|
||||
$status-container-justify-content: unset;
|
||||
$status-container-padding: 30px 0 25px 0;
|
||||
$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-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';
|
||||
@ -136,11 +218,40 @@ $status-authority-logo-2: $base-images-path + '/themes/' + $theme-name + '/statu
|
||||
|
||||
// datablock
|
||||
$datablock-value-color: $primary-color;
|
||||
$datablock-value-font-size: 30px;
|
||||
$datablock-value-line-height: 35px;
|
||||
$datablock-type-font-size: 18px;
|
||||
$datablock-type-line-height: 21px;
|
||||
$datablock-type-font-weight: normal;
|
||||
$datablock-type-margin-left: 10px;
|
||||
$datablock-type-color: $primary-color;
|
||||
$datablock-text-color: $text-color;
|
||||
$datablock-container-width: auto;
|
||||
$datablock-container-height: auto;
|
||||
$datablock-container-background: transparent;
|
||||
$datablock-container-border: none;
|
||||
$datablock-container-box-sizing: unset;
|
||||
$datablock-container-border-radius: 0;
|
||||
$datablock-container-mobile-align-items: normal;
|
||||
$datablock-container-mobile-justify-content: flex-start;
|
||||
$datablock-container-margin: 0 0 0 0;
|
||||
$datablock-description-font-size: 14px;
|
||||
$datablock-description-line-height: 16px;
|
||||
|
||||
// statistics
|
||||
$statistics-title-color: $text-color;
|
||||
$statistics-title-font-size: $status-title-font-size;
|
||||
$statistics-title-line-height: 1.5;
|
||||
$statistics-title-font-weight: normal;
|
||||
$statistics-title-letter-spacing: normal;
|
||||
$statistics-title-text-transform: none;
|
||||
$statistics-title-padding: 0 0 20px 0;
|
||||
$statistics-fee-container-order: 0;
|
||||
$statistics-fee-container-padding: 90px 0 0 0;
|
||||
$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;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
|
||||
264
ui/src/assets/stylesheets/themes/_stake.scss
Normal file
264
ui/src/assets/stylesheets/themes/_stake.scss
Normal file
@ -0,0 +1,264 @@
|
||||
$theme-name: 'stake';
|
||||
|
||||
// base colors
|
||||
$primary-color: #E6ECF1;
|
||||
$primary-color-dark: #F5F7F9;
|
||||
$primary-color-darker: #45277a;
|
||||
$secondary-color: #60db97;
|
||||
$secondary-color-dark: #64a231;
|
||||
$tertiary-color: #ffaa07;
|
||||
$danger-color: #f13662;
|
||||
$blue-color: #3ab9fe;
|
||||
$base-button-bg-color: #4DA9A6;
|
||||
|
||||
$text-color: #333;
|
||||
$link-color: #4DA9A6;
|
||||
|
||||
$gradient-color-1: $primary-color;
|
||||
$gradient-color-2: #7b5ab2;
|
||||
|
||||
// main
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
|
||||
$main-background-color: #F5F7F9;
|
||||
$main-font-family: 'Roboto', sans-serif;
|
||||
|
||||
// header
|
||||
$header-background-color: #fff;
|
||||
$header-logo-width: 128.54px;
|
||||
$header-logo-height: 30px;
|
||||
|
||||
// header menu
|
||||
$header-menu-icon-color: #9EAAB6;
|
||||
$header-menu-text-color: #242A31;
|
||||
$header-menu-icon-color-selected: #4DA9A6;
|
||||
$header-menu-text-color-selected: #4DA9A6;
|
||||
|
||||
// daily quota
|
||||
$wallet-text: #3C454E;
|
||||
$daily-quota-background: #DBE0E5;
|
||||
$daily-quota-progress: #9EAAB6;
|
||||
|
||||
// footer
|
||||
$footer-background-color: $primary-color;
|
||||
$footer-logo-width: 128.54px;
|
||||
$footer-logo-height: 30px;
|
||||
$footer-text-color: #fff;
|
||||
|
||||
// separator
|
||||
$separator-color: #e4e4e4;
|
||||
$separator-display: none;
|
||||
|
||||
// background
|
||||
$pattern-background-image: $base-images-path + '/themes/' + $theme-name + '/transparent.png';
|
||||
|
||||
// social icons
|
||||
$social-icons-background-color: #fff;
|
||||
$social-icons-icon-color: $primary-color;
|
||||
|
||||
// logo
|
||||
$logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo.svg';
|
||||
$footer-logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/footer-logo.svg';
|
||||
|
||||
// home logo
|
||||
$home-logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo-home.png';
|
||||
$home-logo-image-modal: $base-images-path + '/themes/' + $theme-name + '/logos/logo-home-modal.png';
|
||||
$home-logo-width: 52px;
|
||||
$home-logo-height: 16px;
|
||||
|
||||
// foreign logo
|
||||
$foreign-logo-image: $base-images-path + '/themes/' + $theme-name + '/logos/logo-foreign.svg';
|
||||
$foreign-logo-image-modal: $base-images-path + '/themes/' + $theme-name + '/logos/logo-foreign-modal.svg';
|
||||
$foreign-logo-width: 54px;
|
||||
$foreign-logo-height: 11px;
|
||||
|
||||
// buttons
|
||||
$button-background-color: #4DA9A6;
|
||||
$button-text-color: #fff;
|
||||
|
||||
$button-background-color-2: $tertiary-color;
|
||||
$button-text-color-2: #fff;
|
||||
|
||||
$button-background-color-3: $secondary-color-dark;
|
||||
$button-text-color-3: #fff;
|
||||
|
||||
$button-background-color-4: #5c34a2;
|
||||
$button-text-color-4: #fff;
|
||||
|
||||
$button-bordered-background-color: #E6ECF1;
|
||||
$button-bordered-text-color: #75818D;
|
||||
$button-bordered-border-color: $primary-color;
|
||||
$button-transfer-cancel-border-radius: 2px;
|
||||
$button-transfer-cancel-border: none;
|
||||
$button-transfer-cancel-font-size: 14px;
|
||||
$button-transfer-cancel-hover-opacity: 1;
|
||||
$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-height: 42px;
|
||||
$button-transfer-confirm-max-width: 150px;
|
||||
|
||||
// modals
|
||||
$modal-background-color: #fff;
|
||||
$modal-overlay-background-color: rgba(#9EAAB6, 0.8);
|
||||
$modal-title-color: #242A31;
|
||||
$modal-text-color: #242A31;
|
||||
$modal-link-color: #4DA9A6;
|
||||
$daily-quota-modal-title: $text-color;
|
||||
$modal-close-button: "../images/themes/stake/bridge/close.svg";
|
||||
$modal-close-button-padding: 0;
|
||||
$modal-close-button-right: -30px;
|
||||
$modal-close-button-top: -30px;
|
||||
$modal-close-button-top-mobile: $modal-close-button-top;
|
||||
$modal-close-button-right-mobile: 10px;
|
||||
$modal-min-width: 500px;
|
||||
$modal-min-height: 300px;
|
||||
|
||||
// mobile menu
|
||||
$mobile-menu-background-color: $primary-color-dark;
|
||||
$mobile-menu-overlay-color: rgba(#9EAAB6, 0.8);
|
||||
|
||||
// loading
|
||||
$loading-item-background-color: $secondary-color;
|
||||
$loading-item-text-color: #242A31;
|
||||
$loading-logo: $base-images-path + '/themes/' + $theme-name + '/logos/logo-loading.svg';
|
||||
$loading-logo-height: 193px;
|
||||
$loading-logo-width: 150px;
|
||||
$loading-logo-i-display: none;
|
||||
$loading-text-font-size: 14px;
|
||||
$loading-text-line-height: 24px;
|
||||
$loading-text-width: auto;
|
||||
$loading-container-justify-content: space-around;
|
||||
|
||||
// bridge section
|
||||
$bridge-gradient-start: #fff;
|
||||
$bridge-gradient-end: #fff;
|
||||
$bridge-logo-background-color: $primary-color;
|
||||
$bridge-link-color: #4DA9A6;
|
||||
$bridge-balance-color: #4DA9A6;
|
||||
$bridge-button-background-color: #4DA9A6;
|
||||
$bridge-button-text-color: #fff;
|
||||
$bridge-textfield-background: #F5F7F9;
|
||||
$bridge-input-label-color: #75818D;
|
||||
$bridge-label-color: #242A31;
|
||||
$bridge-textfield-color: #242A31;
|
||||
$bridge-textfield-placeholder-color: #75818D;
|
||||
$bridge-side-image-width: 272px;
|
||||
$bridge-side-image-height: 276px;
|
||||
$bridge-image-center-pointing-left: $base-images-path + '/themes/' + $theme-name + '/bridge/center-image-pointing-left.svg';
|
||||
$bridge-image-center-pointing-right: $base-images-path + '/themes/' + $theme-name + '/bridge/center-image-pointing-right.svg';
|
||||
$bridge-image-center-pointing-down: $base-images-path + '/themes/' + $theme-name + '/bridge/center-image-pointing-down@2x.png';
|
||||
$bridge-image-left: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-1.png';
|
||||
$bridge-image-right: $base-images-path + '/themes/' + $theme-name + '/bridge/pattern-2.png';
|
||||
$bridge-transfer-title-color: $primary-color;
|
||||
$bridge-transfer-width: 960px;
|
||||
$bridge-transfer-button-height: 42px;
|
||||
$bridge-transfer-button-width: 100px;
|
||||
$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-basic-label-font-size: 12px;
|
||||
$info-icon-display: none;
|
||||
$network-show-more-font-weight: normal;
|
||||
$network-container-justify-content: space-between;
|
||||
$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;
|
||||
|
||||
// Network details
|
||||
$network-details-body-border-radius: 10px;
|
||||
$network-details-body-mobile-height: 400px;
|
||||
|
||||
|
||||
// bridge alert
|
||||
$alert-logo-box-background-color: $primary-color;
|
||||
|
||||
// bridge transfer alert
|
||||
$transfer-alert-height: 317px;
|
||||
$transfer-alert-width: 540px;
|
||||
$transfer-alert-border-radius: 10px;
|
||||
$transfer-alert-container-width: $transfer-alert-width;
|
||||
$transfer-alert-container-padding: 26px 30px 30px 30px;
|
||||
$transfer-alert-confirm-button-order: 1;
|
||||
$transfer-alert-container-justify-content: space-between;
|
||||
$transfer-description-padding: 0 0 0 0;
|
||||
$transfer-buttons-padding: 0 0 0 0;
|
||||
$transfer-operation-arrow-line-image: $base-images-path + '/themes/' + $theme-name + '/bridge/transfer-line.svg';
|
||||
$transfer-operation-arrow-ellipse-image: $base-images-path + '/themes/' + $theme-name + '/bridge/transfer-ellipse.svg';
|
||||
$transfer-operation-arrow-image: $base-images-path + '/themes/' + $theme-name + '/bridge/arrow.svg';
|
||||
|
||||
// copy icon
|
||||
$copy-icon-color: $primary-color;
|
||||
|
||||
// status section
|
||||
$status-text-color: #9EAAB6;
|
||||
$status-authority-number-color: $primary-color;
|
||||
$status-authority-address-color: $text-color;
|
||||
$status-title-font-size: 12px;
|
||||
$status-title-line-height: 14px;
|
||||
$status-title-font-weight: bold;
|
||||
$status-title-letter-spacing: 0.2em;
|
||||
$status-title-text-transform: uppercase;
|
||||
$status-title-padding: 0 0 17px 0;
|
||||
$status-container-flex-direction: row;
|
||||
$status-container-mobile-flex-direction: column;
|
||||
$status-container-justify-content: space-between;
|
||||
$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-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';
|
||||
$status-authority-logo-2: $base-images-path + '/themes/' + $theme-name + '/status/authority/logo-2.svg';
|
||||
|
||||
// datablock
|
||||
$datablock-value-color: #242A31;
|
||||
$datablock-value-font-size: 20px;
|
||||
$datablock-value-line-height: 23px;
|
||||
$datablock-type-font-size: 20px;
|
||||
$datablock-type-line-height: 23px;
|
||||
$datablock-type-font-weight: bold;
|
||||
$datablock-type-color: #242A31;
|
||||
$datablock-type-margin-left: 5px;
|
||||
$datablock-text-color: #242A31;
|
||||
$datablock-container-width: 217px;
|
||||
$datablock-container-height: 70px;
|
||||
$datablock-container-background: #fff;
|
||||
$datablock-container-border: 1px solid #E6ECF1;
|
||||
$datablock-container-box-sizing: border-box;
|
||||
$datablock-container-border-radius: 4px;
|
||||
$datablock-container-margin: 0 30px 0 0;
|
||||
$datablock-container-mobile-align-items: center;
|
||||
$datablock-container-mobile-justify-content: space-evenly;
|
||||
$datablock-description-font-size: 12px;
|
||||
$datablock-description-line-height: 14px;
|
||||
|
||||
// statistics
|
||||
$statistics-title-color: $status-text-color;
|
||||
$statistics-title-font-size: $status-title-font-size;
|
||||
$statistics-title-line-height: $status-title-line-height;
|
||||
$statistics-title-font-weight: $status-title-font-weight;
|
||||
$statistics-title-letter-spacing: $status-title-letter-spacing;
|
||||
$statistics-title-text-transform: $status-title-text-transform;
|
||||
$statistics-title-padding: $status-title-padding;
|
||||
$statistics-fee-container-order: 1;
|
||||
$statistics-fee-container-padding: 38px 0 0 0;
|
||||
$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;
|
||||
|
||||
// events
|
||||
$events-title-color: $text-color;
|
||||
$events-filter-color: $text-color;
|
||||
$events-select-color: $text-color;
|
||||
$events-column-title-color: $text-color;
|
||||
$events-recipient-label-color: $text-color;
|
||||
$events-value-color: $text-color;
|
||||
$events-block-color: $text-color;
|
||||
@ -1,8 +1,6 @@
|
||||
import BN from 'bignumber.js'
|
||||
import React from 'react'
|
||||
import { toHex } from 'web3-utils'
|
||||
import foreignLogoPurple from '../assets/images/logos/logo-poa-20-purple@2x.png'
|
||||
import homeLogoPurple from '../assets/images/logos/logo-poa-sokol-purple@2x.png'
|
||||
import swal from 'sweetalert'
|
||||
import { BRIDGE_MODES, ERC_TYPES, isErcToErcMode } from '../../../commons'
|
||||
import { BridgeAddress } from './index'
|
||||
@ -242,9 +240,8 @@ export class Bridge extends React.Component {
|
||||
|
||||
const modalData = {
|
||||
isHome: true,
|
||||
networkData: web3Store.homeNet,
|
||||
networkName: homeStore.networkName,
|
||||
url: web3Store.COMMON_HOME_RPC_URL,
|
||||
logo: homeLogoPurple,
|
||||
address: homeStore.COMMON_HOME_BRIDGE_ADDRESS,
|
||||
currency: homeStore.symbol,
|
||||
maxCurrentLimit: homeStore.maxCurrentDeposit,
|
||||
@ -271,9 +268,8 @@ export class Bridge extends React.Component {
|
||||
|
||||
const modalData = {
|
||||
isHome: false,
|
||||
networkData: web3Store.foreignNet,
|
||||
networkName: foreignStore.networkName,
|
||||
url: foreignDisplayUrl,
|
||||
logo: foreignLogoPurple,
|
||||
address: foreignStore.COMMON_FOREIGN_BRIDGE_ADDRESS,
|
||||
currency: foreignStore.symbol,
|
||||
maxCurrentLimit: foreignStore.maxCurrentDeposit,
|
||||
@ -292,6 +288,11 @@ export class Bridge extends React.Component {
|
||||
}
|
||||
|
||||
getNetworkTitle = networkName => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
if (REACT_APP_UI_STYLES === 'stake') {
|
||||
return networkName
|
||||
}
|
||||
|
||||
const index = networkName.indexOf(' ')
|
||||
|
||||
if (index === -1) {
|
||||
@ -302,6 +303,11 @@ export class Bridge extends React.Component {
|
||||
}
|
||||
|
||||
getNetworkSubTitle = networkName => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
if (REACT_APP_UI_STYLES === 'stake') {
|
||||
return false
|
||||
}
|
||||
|
||||
const index = networkName.indexOf(' ')
|
||||
|
||||
if (index === -1) {
|
||||
@ -312,6 +318,7 @@ export class Bridge extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const { web3Store, foreignStore, homeStore } = this.props.RootStore
|
||||
const { showModal, modalData, showConfirmation, confirmationData } = this.state
|
||||
const { reverse } = web3Store
|
||||
@ -335,10 +342,10 @@ export class Bridge extends React.Component {
|
||||
<div className="bridge">
|
||||
<BridgeAddress isHome={true} reverse={reverse} />
|
||||
<div className="bridge-transfer">
|
||||
<div className="left-image-wrapper">
|
||||
<div className={`left-image-wrapper left-image-wrapper-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="left-image" />
|
||||
</div>
|
||||
<div className="bridge-transfer-content">
|
||||
<div className={`bridge-transfer-content bridge-transfer-content-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="bridge-transfer-content-background">
|
||||
<BridgeNetwork
|
||||
balance={reverse ? foreignStore.balance : homeStore.getDisplayedBalance()}
|
||||
@ -367,7 +374,7 @@ export class Bridge extends React.Component {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right-image-wrapper">
|
||||
<div className={`right-image-wrapper right-image-wrapper-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="right-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
export const BridgeAddress = ({ isHome, reverse }) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
|
||||
const getAddress = () =>
|
||||
isHome ? <div className="home-address-container" /> : <div className="foreign-address-container" />
|
||||
|
||||
return isHome ? (
|
||||
<div className="bridge-home">
|
||||
<div className={`bridge-home bridge-home-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="bridge-home-container">
|
||||
<div className="home-logo-container">
|
||||
<div className={reverse ? 'foreign-logo' : 'home-logo'} />
|
||||
@ -14,7 +16,7 @@ export const BridgeAddress = ({ isHome, reverse }) => {
|
||||
{getAddress()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bridge-foreign">
|
||||
<div className={`bridge-foreign bridge-foreign-${REACT_APP_UI_STYLES}`}>
|
||||
{getAddress()}
|
||||
<div className="bridge-foreign-container">
|
||||
<div className="foreign-logo-container">
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
export const BridgeForm = ({ reverse, currency, onTransfer, onInputChange, displayArrow }) => (
|
||||
export const BridgeForm = ({ reverse, currency, onTransfer, onInputChange, displayArrow }) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
return (
|
||||
<div className={`form-container ${displayArrow ? 'transfer-right' : ''}`}>
|
||||
<form className="bridge-form" onSubmit={onTransfer} autoComplete="off">
|
||||
<div className="bridge-form-controls">
|
||||
<div className={`bridge-form-controls bridge-form-controls-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="bridge-form-input-container">
|
||||
<input
|
||||
onChange={onInputChange}
|
||||
@ -26,4 +28,5 @@ export const BridgeForm = ({ reverse, currency, onTransfer, onInputChange, displ
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import numeral from 'numeral'
|
||||
import { InfoIcon } from './icons/InfoIcon'
|
||||
|
||||
export const BridgeNetwork = ({ balance, currency, isHome, networkSubtitle, networkTitle, showModal, side }) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const containerName = isHome ? 'home' : 'foreign'
|
||||
const formattedBalance = isNaN(numeral(balance).format('0.00', Math.floor))
|
||||
? numeral(0).format('0,0.00', Math.floor)
|
||||
@ -28,7 +29,7 @@ export const BridgeNetwork = ({ balance, currency, isHome, networkSubtitle, netw
|
||||
return (
|
||||
<div className={`network-container-${containerName}`}>
|
||||
<p className={`${side ? `text-${side}` : ''}`}>
|
||||
<span className="network-title">{networkTitle}</span>
|
||||
<span className={`network-title network-title-${REACT_APP_UI_STYLES}`}>{networkTitle}</span>
|
||||
{networkSubtitle ? <span className="network-name">{networkSubtitle}</span> : null}
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export const DataBlock = ({ description, value, type, dataTestid }) => (
|
||||
export const DataBlock = ({ description, value, type, dataTestid, valueClass = '' }) => (
|
||||
<div className="datablock-container" data-testid={dataTestid}>
|
||||
<p>
|
||||
<span className="datablock-value">{value}</span>
|
||||
<span className={`datablock-value datablock-value-${valueClass}`}>{value}</span>
|
||||
<span className={type ? 'datablock-type' : ''}>{type}</span>
|
||||
</p>
|
||||
<p className="datablock-description">{description}</p>
|
||||
|
||||
@ -10,21 +10,58 @@ import { inject, observer } from 'mobx-react/index'
|
||||
@inject('RootStore')
|
||||
@observer
|
||||
export class Header extends React.Component {
|
||||
state = {
|
||||
selected: '/'
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ selected: window.location.pathname })
|
||||
}
|
||||
|
||||
changeSelectedMenuMobile = newSelected => {
|
||||
const { onMenuToggle } = this.props
|
||||
this.changeSelectedMenu(newSelected)
|
||||
onMenuToggle()
|
||||
}
|
||||
|
||||
changeSelectedMenu = newSelected => {
|
||||
if (newSelected !== this.state.selected) {
|
||||
this.setState({ selected: newSelected })
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
showMobileMenu,
|
||||
onMenuToggle,
|
||||
RootStore: { alertStore, web3Store }
|
||||
} = this.props
|
||||
const { REACT_APP_UI_HOME_WITHOUT_EVENTS: HOME, REACT_APP_UI_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
|
||||
const { selected } = this.state
|
||||
const {
|
||||
REACT_APP_UI_HOME_WITHOUT_EVENTS: HOME,
|
||||
REACT_APP_UI_FOREIGN_WITHOUT_EVENTS: FOREIGN,
|
||||
REACT_APP_UI_STYLES
|
||||
} = process.env
|
||||
const withoutEvents = web3Store.isSelectedNetwork(web3Store.homeNet.id) ? yn(HOME) : yn(FOREIGN)
|
||||
const displayEventsTab = REACT_APP_UI_STYLES !== 'stake'
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
{showMobileMenu ? <MobileMenu withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} /> : null}
|
||||
<header className={`header header-${REACT_APP_UI_STYLES}`}>
|
||||
{showMobileMenu ? (
|
||||
<MobileMenu selected={selected} withoutEvents={withoutEvents} onMenuToggle={this.changeSelectedMenuMobile} />
|
||||
) : null}
|
||||
<div className="container">
|
||||
<Link to="/" onClick={showMobileMenu ? onMenuToggle : null} className="header-logo" />
|
||||
<HeaderMenu withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />
|
||||
<Link
|
||||
to="/"
|
||||
onClick={showMobileMenu ? onMenuToggle : () => this.changeSelectedMenu('/')}
|
||||
className="header-logo"
|
||||
/>
|
||||
<HeaderMenu
|
||||
selected={selected}
|
||||
withoutEvents={withoutEvents}
|
||||
onMenuToggle={this.changeSelectedMenu}
|
||||
displayEventsTab={displayEventsTab}
|
||||
/>
|
||||
<MobileMenuButton onMenuToggle={onMenuToggle} showMobileMenu={showMobileMenu} />
|
||||
</div>
|
||||
{alertStore && alertStore.showDailyQuotaInfo && <DailyQuotaModal />}
|
||||
|
||||
@ -3,9 +3,14 @@ import { MenuItems } from './MenuItems'
|
||||
import { Wallet } from './Wallet'
|
||||
import NetworkSelect from './NetworkSelect'
|
||||
|
||||
export const HeaderMenu = ({ withoutEvents }) => (
|
||||
export const HeaderMenu = ({ selected, withoutEvents, displayEventsTab, onMenuToggle }) => (
|
||||
<div className="header-menu">
|
||||
<MenuItems withoutEvents={withoutEvents} />
|
||||
<MenuItems
|
||||
selected={selected}
|
||||
withoutEvents={withoutEvents}
|
||||
displayEventsTab={displayEventsTab}
|
||||
onMenuToggle={onMenuToggle}
|
||||
/>
|
||||
<Wallet />
|
||||
<NetworkSelect />
|
||||
</div>
|
||||
|
||||
@ -7,19 +7,27 @@ import { PreventExit } from './PreventExit'
|
||||
@observer
|
||||
export class Loading extends React.Component {
|
||||
render() {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const { alertStore } = this.props.RootStore
|
||||
const { loadingStepIndex, loadingSteps, blockConfirmations } = alertStore
|
||||
const style = alertStore.showLoading ? { display: 'flex' } : { display: 'none' }
|
||||
const progress = loadingStepIndex === 3 ? 100 : loadingStepIndex * 25 + blockConfirmations * 4
|
||||
const radius = REACT_APP_UI_STYLES === 'stake' ? 33 : 40
|
||||
|
||||
return (
|
||||
<div className={`loading-container ${loadingStepIndex > 0 ? 'mobile-container' : ''}`} style={style}>
|
||||
<div
|
||||
className={`loading-container-content ${
|
||||
loadingStepIndex > 0 ? 'loading-container-content-' + REACT_APP_UI_STYLES : ''
|
||||
} ${loadingStepIndex > 0 ? 'mobile-container' : ''}`}
|
||||
style={style}
|
||||
>
|
||||
{loadingStepIndex > 0 && (
|
||||
<ProgressRing
|
||||
confirmationNumber={blockConfirmations}
|
||||
hideConfirmationNumber={loadingStepIndex > 1}
|
||||
progress={progress}
|
||||
radius={40}
|
||||
radius={radius}
|
||||
stroke={4}
|
||||
/>
|
||||
)}
|
||||
@ -28,6 +36,7 @@ export class Loading extends React.Component {
|
||||
{loadingStepIndex > 0 && <div className="loading-text">{loadingSteps[loadingStepIndex]}</div>}
|
||||
{alertStore.showLoading && <PreventExit />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,44 @@
|
||||
import React from 'react'
|
||||
import { EventsIcon, StatusIcon, StatisticsIcon } from './menu-icons'
|
||||
import { EventsIcon, StatusIcon, StatisticsIcon, AlternativeStatusIcon } from './menu-icons'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export const MenuItems = ({ onMenuToggle = null, withoutEvents }) => {
|
||||
export const MenuItems = ({ selected, onMenuToggle = null, withoutEvents, displayEventsTab }) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const menuItems = [
|
||||
{
|
||||
hide: withoutEvents,
|
||||
hide: withoutEvents || !displayEventsTab,
|
||||
icon: <EventsIcon />,
|
||||
link: '/events',
|
||||
text: 'Events'
|
||||
text: 'Events',
|
||||
selected: selected === '/events'
|
||||
},
|
||||
{
|
||||
hide: false,
|
||||
icon: <StatusIcon />,
|
||||
icon: displayEventsTab ? <StatusIcon /> : <AlternativeStatusIcon />,
|
||||
link: '/status',
|
||||
text: 'Status'
|
||||
text: 'Status',
|
||||
selected: selected === '/status'
|
||||
},
|
||||
{
|
||||
hide: withoutEvents,
|
||||
icon: <StatisticsIcon />,
|
||||
link: '/statistics',
|
||||
text: 'Statistics'
|
||||
text: 'Statistics',
|
||||
selected: selected === '/statistics'
|
||||
}
|
||||
]
|
||||
|
||||
return menuItems.map((item, index) => {
|
||||
return (
|
||||
<Link key={index} to={item.link} className="menu-items" onClick={onMenuToggle}>
|
||||
<span className="menu-items-icon">{item.icon}</span>
|
||||
<span className="menu-items-text">{item.text}</span>
|
||||
const selectedLabel = item.selected ? 'selected' : ''
|
||||
return item.hide ? null : (
|
||||
<Link
|
||||
key={index}
|
||||
to={item.link}
|
||||
className={`menu-items menu-items-${REACT_APP_UI_STYLES}`}
|
||||
onClick={() => onMenuToggle(item.link)}
|
||||
>
|
||||
<span className={`menu-items-icon menu-items-icon-${selectedLabel}`}>{item.icon}</span>
|
||||
<span className={`menu-items-text menu-items-text-${selectedLabel}`}>{item.text}</span>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
|
||||
@ -2,10 +2,10 @@ import React from 'react'
|
||||
import { MenuItems } from './MenuItems'
|
||||
import NetworkSelect from './NetworkSelect'
|
||||
|
||||
export const MobileMenu = ({ onMenuToggle, withoutEvents }) => (
|
||||
export const MobileMenu = ({ selected, onMenuToggle, withoutEvents }) => (
|
||||
<div className="mobile-menu">
|
||||
<div className="mobile-menu-links">
|
||||
<MenuItems withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />
|
||||
<MenuItems selected={selected} withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />
|
||||
<NetworkSelect />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,9 +5,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
|
||||
|
||||
export const NetworkDetails = ({
|
||||
isHome,
|
||||
networkData,
|
||||
networkName,
|
||||
url,
|
||||
logo,
|
||||
address,
|
||||
currency,
|
||||
maxCurrentLimit,
|
||||
@ -23,6 +22,7 @@ export const NetworkDetails = ({
|
||||
tokenName,
|
||||
getExplorerAddressUrl
|
||||
}) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const networkTitle = isHome ? 'Bridge Home' : 'Bridge Foreign'
|
||||
const logoClass = isHome ? 'home-logo home-logo-modal' : 'foreign-logo foreign-logo-modal'
|
||||
const totalTitle =
|
||||
@ -35,13 +35,17 @@ 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">
|
||||
<div className="details-logo-container">
|
||||
<div className={`details-logo-container details-logo-container-${REACT_APP_UI_STYLES}`}>
|
||||
<div className={logoClass} />
|
||||
</div>
|
||||
<div className="details-body">
|
||||
<div className={`details-body details-body-${REACT_APP_UI_STYLES}`}>
|
||||
<p className={`details-data-container details-data-container-${REACT_APP_UI_STYLES}`}>
|
||||
<span className="details-title">{networkName}</span>
|
||||
</p>
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Network</span>
|
||||
<span className="details-description">{url}</span>
|
||||
@ -49,29 +53,38 @@ export const NetworkDetails = ({
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">{networkTitle} Address</span>
|
||||
<span className="details-description details-copy">
|
||||
<a className="details-description" href={getExplorerAddressUrl(address)} target="_blank">
|
||||
<a
|
||||
className="details-description"
|
||||
href={getExplorerAddressUrl(address)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{address.slice(0, 27).concat('...')}
|
||||
</a>
|
||||
{displayCopyIcon && (
|
||||
<CopyToClipboard text={address}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
{displayBridgeLimits && (
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Remaining Daily {currency} Quota</span>
|
||||
<span className="details-description-black">
|
||||
{numeral(maxCurrentLimit).format('0,0.0', Math.floor)} {currency}
|
||||
</span>
|
||||
<div className="details-description-black">
|
||||
{numeral(maxCurrentLimit).format('0,0.0', Math.floor)}
|
||||
<span className={`details-description-currency-${REACT_APP_UI_STYLES}`}>{' ' + currency}</span>
|
||||
</div>
|
||||
</p>
|
||||
)}
|
||||
{displayBridgeLimits && (
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Maximum Amount Per Transaction</span>
|
||||
<span className="details-description-black">
|
||||
{numeral(maxPerTx).format('0,0.0', Math.floor)} {currency}
|
||||
{numeral(maxPerTx).format('0,0.0', Math.floor)}
|
||||
<span className={`details-description-currency-${REACT_APP_UI_STYLES}`}>{' ' + currency}</span>
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
@ -79,7 +92,8 @@ export const NetworkDetails = ({
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Minimum Amount Per Transaction</span>
|
||||
<span className="details-description-black">
|
||||
{numeral(minPerTx).format('0,0.000', Math.floor)} {currency}
|
||||
{numeral(minPerTx).format('0,0.000', Math.floor)}
|
||||
<span className={`details-description-currency-${REACT_APP_UI_STYLES}`}>{' ' + currency}</span>
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
@ -87,33 +101,44 @@ export const NetworkDetails = ({
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Token Address</span>
|
||||
<span className="details-description details-copy">
|
||||
<a className="details-description" href={getExplorerAddressUrl(tokenAddress)} target="_blank">
|
||||
<a
|
||||
className="details-description"
|
||||
href={getExplorerAddressUrl(tokenAddress)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{tokenAddress.slice(0, 27).concat('...')}
|
||||
</a>
|
||||
{displayCopyIcon && (
|
||||
<CopyToClipboard text={tokenAddress}>
|
||||
<span className="copy-icon copy-icon-right">
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
{displayTokenAddress && (
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Token Name</span>
|
||||
<span className="details-description-black">{tokenName || 'No token name'}</span>
|
||||
<span className={`details-description-black details-description-black-${REACT_APP_UI_STYLES}`}>
|
||||
{tokenName || 'No token name'}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">{totalTitle}</span>
|
||||
<span className="details-description-black">
|
||||
{numeral(totalAmount).format('0,0.000', Math.floor)} {currency}
|
||||
{numeral(totalAmount).format('0,0.000', Math.floor)}
|
||||
<span className={`details-description-currency-${REACT_APP_UI_STYLES}`}>{' ' + currency}</span>
|
||||
</span>
|
||||
</p>
|
||||
<p className="details-data-container">
|
||||
<span className="details-label">Your {currency} Balance</span>
|
||||
<span className="details-description-black">
|
||||
{formattedBalance} {currency}
|
||||
{formattedBalance}
|
||||
<span className={`details-description-currency-${REACT_APP_UI_STYLES}`}>{' ' + currency}</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -8,13 +8,22 @@ export class ProgressRing extends Component {
|
||||
|
||||
render() {
|
||||
const { radius, stroke, progress, confirmationNumber, hideConfirmationNumber } = this.props
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const { circumference, normalizedRadius } = this.state
|
||||
const strokeDashoffset = circumference - (progress / 100) * circumference
|
||||
const confirmations = hideConfirmationNumber ? '' : `${confirmationNumber}/8`
|
||||
const strokeColor = REACT_APP_UI_STYLES === 'stake' ? '#E6ECF1' : '#7b5ab2'
|
||||
const strokeProgressColor = REACT_APP_UI_STYLES === 'stake' ? '#4DA9A6' : '#60dc97'
|
||||
const textParams =
|
||||
REACT_APP_UI_STYLES === 'stake'
|
||||
? { x: '22', y: '38', font: 'Roboto', fontSize: '14', fill: '#242A31' }
|
||||
: { x: '28', y: '47', font: 'Nunito', fontSize: '18', fill: 'white' }
|
||||
const progressTransform = REACT_APP_UI_STYLES === 'stake' ? 'rotate(-90 33 33)' : ''
|
||||
|
||||
return (
|
||||
<svg height={radius * 2} width={radius * 2}>
|
||||
<circle
|
||||
stroke="#7b5ab2"
|
||||
stroke={strokeColor}
|
||||
fill="transparent"
|
||||
strokeWidth={stroke}
|
||||
strokeDasharray={circumference + ' ' + circumference}
|
||||
@ -24,7 +33,7 @@ export class ProgressRing extends Component {
|
||||
cy={radius}
|
||||
/>
|
||||
<circle
|
||||
stroke="#60dc97"
|
||||
stroke={strokeProgressColor}
|
||||
fill="transparent"
|
||||
strokeWidth={stroke}
|
||||
strokeDasharray={circumference + ' ' + circumference}
|
||||
@ -32,8 +41,15 @@ export class ProgressRing extends Component {
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
transform={progressTransform}
|
||||
/>
|
||||
<text x="28" y="47" fontFamily="Nunito" fontSize="18" fill="white">
|
||||
<text
|
||||
x={textParams.x}
|
||||
y={textParams.y}
|
||||
fontFamily={textParams.font}
|
||||
fontSize={textParams.fontSize}
|
||||
fill={textParams.fill}
|
||||
>
|
||||
{confirmations}
|
||||
</text>
|
||||
</svg>
|
||||
|
||||
@ -1,23 +1,36 @@
|
||||
import React from 'react'
|
||||
import { IconGithub, IconPOA, IconTelegram, IconTwitter } from './social-icons'
|
||||
import {
|
||||
AlternativeIconGithub,
|
||||
AlternativeIconTelegram,
|
||||
AlternativeIconTwitter,
|
||||
IconGithub,
|
||||
IconPOA,
|
||||
IconTelegram,
|
||||
IconTwitter,
|
||||
IconXDai
|
||||
} from './social-icons'
|
||||
|
||||
export const SocialIcons = () => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const useAlternativeIcons = REACT_APP_UI_STYLES === 'stake'
|
||||
const iconClass = useAlternativeIcons ? 'social-alternative-icons-item' : 'social-icons-item'
|
||||
|
||||
const socialItems = [
|
||||
{
|
||||
icon: <IconPOA />,
|
||||
link: 'https://poa.network'
|
||||
icon: useAlternativeIcons ? <IconXDai /> : <IconPOA />,
|
||||
link: useAlternativeIcons ? 'https://xdaichain.com/' : 'https://poa.network'
|
||||
},
|
||||
{
|
||||
icon: <IconTwitter />,
|
||||
link: 'https://twitter.com/poanetwork'
|
||||
icon: useAlternativeIcons ? <AlternativeIconTwitter /> : <IconTwitter />,
|
||||
link: useAlternativeIcons ? 'https://twitter.com/xdaichain' : 'https://twitter.com/poanetwork'
|
||||
},
|
||||
{
|
||||
icon: <IconTelegram />,
|
||||
link: 'https://t.me/poa_network'
|
||||
icon: useAlternativeIcons ? <AlternativeIconTelegram /> : <IconTelegram />,
|
||||
link: useAlternativeIcons ? 'https://t.me/xdaistable' : 'https://t.me/poa_network'
|
||||
},
|
||||
{
|
||||
icon: <IconGithub />,
|
||||
link: 'https://github.com/poanetwork/tokenbridge'
|
||||
icon: useAlternativeIcons ? <AlternativeIconGithub /> : <IconGithub />,
|
||||
link: useAlternativeIcons ? 'https://github.com/xdaichain' : 'https://github.com/poanetwork/tokenbridge'
|
||||
}
|
||||
]
|
||||
|
||||
@ -25,7 +38,7 @@ export const SocialIcons = () => {
|
||||
<div className="social-icons">
|
||||
{socialItems.map((item, index) => {
|
||||
return (
|
||||
<a key={index} href={item.link} target="_blank" className="social-icons-item">
|
||||
<a key={index} href={item.link} target="_blank" rel="noopener noreferrer" className={iconClass}>
|
||||
{item.icon}
|
||||
</a>
|
||||
)
|
||||
|
||||
@ -6,6 +6,7 @@ import { inject, observer } from 'mobx-react'
|
||||
import { isMediatorMode } from 'commons'
|
||||
import { formatDistanceStrict } from 'date-fns'
|
||||
import { DataBlock } from './DataBlock'
|
||||
import { getDateColor } from './utils/date'
|
||||
|
||||
@inject('RootStore')
|
||||
@observer
|
||||
@ -28,6 +29,8 @@ export class StatusPage extends React.Component {
|
||||
let fromForeignToHomeText
|
||||
let lastEventOnHome
|
||||
let lastEventOnForeign
|
||||
let lastEventOnHomeColor
|
||||
let lastEventOnForeignColor
|
||||
if (displayLatestOperations) {
|
||||
fromHomeToForeignText = `From ${homeStore.networkName} To ${foreignStore.networkName}`
|
||||
fromForeignToHomeText = `From ${foreignStore.networkName} To ${homeStore.networkName}`
|
||||
@ -36,11 +39,13 @@ export class StatusPage extends React.Component {
|
||||
lastEventOnHome = formatDistanceStrict(lastDateOnHome, new Date(), {
|
||||
addSuffix: true
|
||||
})
|
||||
lastEventOnHomeColor = getDateColor(lastDateOnHome)
|
||||
|
||||
const lastDateOnForeign = new Date(0).setUTCSeconds(foreignStore.lastEventRelayedOnForeign)
|
||||
lastEventOnForeign = formatDistanceStrict(lastDateOnForeign, new Date(), {
|
||||
addSuffix: true
|
||||
})
|
||||
lastEventOnForeignColor = getDateColor(lastDateOnForeign)
|
||||
}
|
||||
return (
|
||||
<div className="status-page">
|
||||
@ -70,8 +75,18 @@ export class StatusPage extends React.Component {
|
||||
<div className="status-configuration-container">
|
||||
<span className="status-configuration-title status-title">Latest Operations</span>
|
||||
<div className="status-configuration-data">
|
||||
<DataBlock description={fromHomeToForeignText} value={lastEventOnForeign} type="" />
|
||||
<DataBlock description={fromForeignToHomeText} value={lastEventOnHome} type="" />
|
||||
<DataBlock
|
||||
description={fromHomeToForeignText}
|
||||
value={lastEventOnForeign}
|
||||
type=""
|
||||
valueClass={lastEventOnHomeColor}
|
||||
/>
|
||||
<DataBlock
|
||||
description={fromForeignToHomeText}
|
||||
value={lastEventOnHome}
|
||||
type=""
|
||||
valueClass={lastEventOnForeignColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -15,16 +15,17 @@ export const TransferAlert = ({
|
||||
fee,
|
||||
reverse
|
||||
}) => {
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const formattedFromAmount = numeral(fromAmount).format('0,0[.][000000000000000000]', Math.floor)
|
||||
const formattedToAmount = numeral(toAmount).format('0,0[.][000000000000000000]', Math.floor)
|
||||
|
||||
return (
|
||||
<div className="transfer-alert">
|
||||
<div className="image-container">
|
||||
<div className={`image-container image-container-${REACT_APP_UI_STYLES}`}>
|
||||
<img className="arrows-icon" src={arrowsIcon} alt="transfer icon" />
|
||||
</div>
|
||||
<div className="alert-container">
|
||||
<div className="transfer-title">
|
||||
<div className={`transfer-title transfer-title-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="alert-logo-box">
|
||||
<div className={reverse ? 'foreign-logo' : 'home-logo'} />
|
||||
</div>
|
||||
@ -39,11 +40,35 @@ export const TransferAlert = ({
|
||||
<div className={reverse ? 'home-logo' : 'foreign-logo'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={`transfer-title-alternative transfer-title-alternative-${REACT_APP_UI_STYLES}`}>
|
||||
<span className="transfer-title-text">Confirm Transfer</span>
|
||||
</div>
|
||||
<div className={`transfer-title-alternative transfer-title-alternative-${REACT_APP_UI_STYLES}`}>
|
||||
<div className="transfer-operation-container">
|
||||
<div className="transfer-operation-box">
|
||||
<div className="transfer-operation-box-value">
|
||||
<strong>{formattedFromAmount}</strong> {fromCurrency}
|
||||
</div>
|
||||
<div className="transfer-operation-box-network">{from}</div>
|
||||
</div>
|
||||
<div className="transfer-operation-arrow-container">
|
||||
<div className="transfer-operation-ellipse">
|
||||
<div className="transfer-operation-arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="transfer-operation-box">
|
||||
<div className="transfer-operation-box-value">
|
||||
<strong>{formattedToAmount}</strong> {toCurrency}
|
||||
</div>
|
||||
<div className="transfer-operation-box-network">{to}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="transfer-description" data-testid="transfer-description">
|
||||
<strong>{fee && `Fee: ${fee.toString()}%`}</strong>
|
||||
<br />
|
||||
Please confirm that you would like to send <strong>{formattedFromAmount}</strong> {fromCurrency} from {from}{' '}
|
||||
to receive <strong>{formattedToAmount}</strong> {toCurrency} on {to}.
|
||||
Please confirm that you would like to send {formattedFromAmount} {fromCurrency} from {from} to receive{' '}
|
||||
{formattedToAmount} {toCurrency} on {to}.
|
||||
</p>
|
||||
<div className="transfer-buttons">
|
||||
<button className="transfer-confirm" onClick={onConfirmation}>
|
||||
|
||||
@ -7,6 +7,7 @@ import { WalletIcon } from './menu-icons/WalletIcon'
|
||||
export class Wallet extends React.Component {
|
||||
render() {
|
||||
const { web3Store, homeStore, foreignStore, alertStore } = this.props.RootStore
|
||||
const { REACT_APP_UI_STYLES } = process.env
|
||||
const isHome = web3Store.isSelectedNetwork(web3Store.homeNet.id)
|
||||
const address = web3Store.defaultAccount.address
|
||||
const explorerAddressUrl = isHome
|
||||
@ -17,7 +18,12 @@ export class Wallet extends React.Component {
|
||||
|
||||
const wallet =
|
||||
web3Store.defaultAccount.address !== '' && web3Store.defaultAccount.address !== undefined ? (
|
||||
<a href={explorerAddressUrl} target="_blank" className="wallet-text wallet-link">
|
||||
<a
|
||||
href={explorerAddressUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`wallet-text wallet-link wallet-text-${REACT_APP_UI_STYLES}`}
|
||||
>
|
||||
{web3Store.defaultAccount.address.slice(0, 17).concat('...')}
|
||||
</a>
|
||||
) : (
|
||||
|
||||
@ -10,7 +10,7 @@ export const Event = ({ color, eventName, transactionHash, recipient, value, blo
|
||||
<div className="event-tx-container txhash-column">
|
||||
<span className={`event-name background-${color}`}>{eventName}</span>
|
||||
<span>
|
||||
<a href={txUrl} target="_blank" className="event-txhash">
|
||||
<a href={txUrl} target="_blank" rel="noopener noreferrer" className="event-txhash">
|
||||
{transactionHash.slice(0, 18).concat('...')}
|
||||
</a>
|
||||
<CopyToClipboard text={transactionHash}>
|
||||
@ -20,7 +20,7 @@ export const Event = ({ color, eventName, transactionHash, recipient, value, blo
|
||||
</CopyToClipboard>
|
||||
</span>
|
||||
</div>
|
||||
<a href={accountUrl} target="_blank" className="event-recipient recipient-column">
|
||||
<a href={accountUrl} target="_blank" rel="noopener noreferrer" className="event-recipient recipient-column">
|
||||
{recipient ? <strong className="only-mobile event-recipient-label ">Recipient</strong> : ''}
|
||||
{recipient ? recipient.slice(0, 27).concat('...') : ''}
|
||||
</a>
|
||||
|
||||
21
ui/src/components/menu-icons/AlternativeStatusIcon.js
Normal file
21
ui/src/components/menu-icons/AlternativeStatusIcon.js
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
|
||||
export const AlternativeStatusIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15 0C14.4477 0 14 0.447716 14 1V3C14 3.55228 14.4477 4 15 4C15.5523 4 16 3.55228 16 3H17C17.5523 3 18 2.55228 18 2C18 1.44772 17.5523 1 17 1H16C16 0.447716 15.5523 0 15 0Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
<path d="M0 2C0 1.44772 0.447693 1 1 1H12V3H1C0.447693 3 0 2.55228 0 2Z" fill="#9EAAB6" />
|
||||
<path
|
||||
d="M10 7C9.44769 7 9 7.44772 9 8V10C9 10.5523 9.44769 11 10 11C10.5523 11 11 10.5523 11 10H17C17.5523 10 18 9.55228 18 9C18 8.44772 17.5523 8 17 8H11C11 7.44772 10.5523 7 10 7Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
<path d="M0 9C0 8.44772 0.447693 8 1 8H7V10H1C0.447693 10 0 9.55228 0 9Z" fill="#9EAAB6" />
|
||||
<path
|
||||
d="M6 15C6 14.4477 5.55231 14 5 14C4.44769 14 4 14.4477 4 15V17C4 17.5523 4.44769 18 5 18C5.55231 18 6 17.5523 6 17H17C17.5523 17 18 16.5523 18 16C18 15.4477 17.5523 15 17 15H6Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
<path d="M1 15H2V17H1C0.447693 17 0 16.5523 0 16C0 15.4477 0.447693 15 1 15Z" fill="#9EAAB6" />
|
||||
</svg>
|
||||
)
|
||||
@ -3,3 +3,4 @@ export * from './MobileMenuCloseIcon'
|
||||
export * from './MobileMenuIcon'
|
||||
export * from './StatisticsIcon'
|
||||
export * from './StatusIcon'
|
||||
export * from './AlternativeStatusIcon'
|
||||
|
||||
13
ui/src/components/social-icons/AlternativeIconGithub.js
Normal file
13
ui/src/components/social-icons/AlternativeIconGithub.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
export const AlternativeIconGithub = () => {
|
||||
return (
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#DBE0E5" />
|
||||
<path
|
||||
d="M15 8C11.1325 8 8 11.2139 8 15.1776C8 18.3495 10.0055 21.0393 12.7862 21.9876C13.1363 22.0552 13.2646 21.833 13.2646 21.6425C13.2646 21.4721 13.2587 21.0204 13.2558 20.4221C11.3087 20.8549 10.898 19.4591 10.898 19.4591C10.5795 18.6307 10.1192 18.4091 10.1192 18.4091C9.48517 17.9642 10.1682 17.9733 10.1682 17.9733C10.8712 18.0232 11.2404 18.7129 11.2404 18.7129C11.8646 19.8103 12.879 19.4932 13.2792 19.31C13.3422 18.8456 13.5224 18.5297 13.7225 18.3501C12.1679 18.1705 10.534 17.5533 10.534 14.8033C10.534 14.0199 10.8052 13.3796 11.2544 12.8774C11.1757 12.696 10.9394 11.9662 11.3157 10.9777C11.3157 10.9777 11.9019 10.7853 13.2407 11.7136C13.8007 11.5541 14.3957 11.475 14.9907 11.4713C15.5857 11.475 16.1807 11.5541 16.7407 11.7136C18.0707 10.7853 18.6569 10.9777 18.6569 10.9777C19.0332 11.9662 18.7969 12.696 18.7269 12.8774C19.1732 13.3796 19.4444 14.0199 19.4444 14.8033C19.4444 17.5606 17.8082 18.1675 16.2507 18.344C16.4957 18.5595 16.7232 18.9996 16.7232 19.6722C16.7232 20.6327 16.7144 21.4045 16.7144 21.6376C16.7144 21.8257 16.8369 22.0503 17.1957 21.9785C19.9962 21.0362 22 18.3446 22 15.1776C22 11.2139 18.8657 8 15 8Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
13
ui/src/components/social-icons/AlternativeIconTelegram.js
Normal file
13
ui/src/components/social-icons/AlternativeIconTelegram.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
export const AlternativeIconTelegram = () => {
|
||||
return (
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#DBE0E5" />
|
||||
<path
|
||||
d="M12.4934 16.6892L12.2618 19.9465C12.5931 19.9465 12.7366 19.8042 12.9087 19.6332L14.4621 18.1487L17.6809 20.5059C18.2713 20.8349 18.6872 20.6617 18.8464 19.9628L20.9593 10.0625L20.9599 10.0619C21.1471 9.18924 20.6443 8.84799 20.0691 9.06207L7.64994 13.8168C6.80235 14.1458 6.81519 14.6183 7.50585 14.8324L10.6809 15.82L18.056 11.2052C18.4031 10.9754 18.7187 11.1026 18.4591 11.3324L12.4934 16.6892Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
13
ui/src/components/social-icons/AlternativeIconTwitter.js
Normal file
13
ui/src/components/social-icons/AlternativeIconTwitter.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
export const AlternativeIconTwitter = () => {
|
||||
return (
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#DBE0E5" />
|
||||
<path
|
||||
d="M22 10.4206C21.4794 10.6615 20.9246 10.8212 20.3462 10.8988C20.9412 10.524 21.3954 9.93508 21.6089 9.22523C21.0541 9.57415 20.4416 9.82062 19.7889 9.95815C19.2621 9.36646 18.5114 9 17.6924 9C16.1034 9 14.8241 10.3606 14.8241 12.0286C14.8241 12.2686 14.8434 12.4994 14.8906 12.7191C12.5045 12.5963 10.3931 11.3898 8.97475 9.552C8.72712 10.0052 8.58188 10.524 8.58188 11.0825C8.58188 12.1311 9.09375 13.0606 9.85675 13.5988C9.39562 13.5895 8.94325 13.4483 8.56 13.2258C8.56 13.2351 8.56 13.2471 8.56 13.2591C8.56 14.7305 9.55487 15.9526 10.8595 16.2342C10.6259 16.3015 10.3712 16.3338 10.107 16.3338C9.92325 16.3338 9.73775 16.3228 9.56362 16.2822C9.9355 17.4812 10.9908 18.3628 12.2455 18.3914C11.269 19.1972 10.0291 19.6828 8.68688 19.6828C8.4515 19.6828 8.22575 19.6717 8 19.6412C9.27137 20.5062 10.7781 21 12.403 21C17.6845 21 20.572 16.3846 20.572 12.384C20.572 12.2502 20.5676 12.1209 20.5615 11.9926C21.1311 11.5662 21.6097 11.0335 22 10.4206Z"
|
||||
fill="#9EAAB6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
13
ui/src/components/social-icons/IconXDai.js
Normal file
13
ui/src/components/social-icons/IconXDai.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
export const IconXDai = () => {
|
||||
return (
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#DBE0E5" />
|
||||
<path d="M13.0002 8H8.0002L8.00015 11H13.0001L13.0002 8Z" fill="#9EAAB6" />
|
||||
<path d="M22.0002 8H17.0002V11H22.0002V8Z" fill="#9EAAB6" />
|
||||
<path d="M17.0002 19H19V17H22.0002V22H17.0002V19Z" fill="#9EAAB6" />
|
||||
<path d="M13 19H11V17H8V22H13V19Z" fill="#9EAAB6" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -2,3 +2,7 @@ export * from './IconGithub'
|
||||
export * from './IconPOA'
|
||||
export * from './IconTelegram'
|
||||
export * from './IconTwitter'
|
||||
export * from './AlternativeIconGithub'
|
||||
export * from './IconXDai'
|
||||
export * from './AlternativeIconTelegram'
|
||||
export * from './AlternativeIconTwitter'
|
||||
|
||||
17
ui/src/components/utils/date.js
Normal file
17
ui/src/components/utils/date.js
Normal file
@ -0,0 +1,17 @@
|
||||
const DAY_DIF_CONSTANTS = {
|
||||
threeDays: 259200000,
|
||||
oneWeek: 604800000
|
||||
}
|
||||
|
||||
export const getDateColor = date => {
|
||||
const now = new Date()
|
||||
const diff = now - date
|
||||
|
||||
if (diff < DAY_DIF_CONSTANTS.threeDays) {
|
||||
return 'green'
|
||||
} else if (diff < DAY_DIF_CONSTANTS.oneWeek) {
|
||||
return 'yellow'
|
||||
} else {
|
||||
return 'red'
|
||||
}
|
||||
}
|
||||
@ -11,8 +11,7 @@ import {
|
||||
getTokenType,
|
||||
ERC20_BYTES32_ABI,
|
||||
getDeployedAtBlock,
|
||||
isMediatorMode,
|
||||
HOME_V1_ABI
|
||||
isMediatorMode
|
||||
} from '../../../commons'
|
||||
import {
|
||||
getMaxPerTxLimit,
|
||||
@ -203,11 +202,13 @@ class ForeignStore {
|
||||
try {
|
||||
this.symbol = await getSymbol(this.tokenContract)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-control-regex
|
||||
this.symbol = this.foreignWeb3.utils.hexToAscii(await getSymbol(alternativeContract)).replace(/\u0000*$/, '')
|
||||
}
|
||||
try {
|
||||
this.tokenName = await getName(this.tokenContract)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-control-regex
|
||||
this.tokenName = this.foreignWeb3.utils.hexToAscii(await getName(alternativeContract)).replace(/\u0000*$/, '')
|
||||
}
|
||||
|
||||
|
||||
@ -210,11 +210,13 @@ class HomeStore {
|
||||
try {
|
||||
this.symbol = await getSymbol(this.tokenContract)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-control-regex
|
||||
this.symbol = this.homeWeb3.utils.hexToAscii(await getSymbol(alternativeContract)).replace(/\u0000*$/, '')
|
||||
}
|
||||
try {
|
||||
this.tokenName = await getName(this.tokenContract)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-control-regex
|
||||
this.tokenName = this.homeWeb3.utils.hexToAscii(await getName(alternativeContract)).replace(/\u0000*$/, '')
|
||||
}
|
||||
this.tokenDecimals = await getDecimals(this.tokenContract)
|
||||
|
||||
@ -2,7 +2,6 @@ import { action, computed, observable } from 'mobx'
|
||||
import getWeb3, { getBalance, getWeb3Instance, getNetwork } from './utils/web3'
|
||||
import { balanceLoaded } from './utils/testUtils'
|
||||
import { BRIDGE_MODES } from '../../../commons'
|
||||
import { toHex } from 'web3-utils'
|
||||
|
||||
class Web3Store {
|
||||
@observable
|
||||
|
||||
Loading…
Reference in New Issue
Block a user