diff --git a/assets/images/alphawallet.svg b/assets/images/alphawallet.svg deleted file mode 100644 index d4c4336..0000000 --- a/assets/images/alphawallet.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/images/flags/cn.svg b/assets/images/flags/cn.svg new file mode 100644 index 0000000..d220c3d --- /dev/null +++ b/assets/images/flags/cn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/flags/gb.svg b/assets/images/flags/gb.svg new file mode 100644 index 0000000..8c99653 --- /dev/null +++ b/assets/images/flags/gb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/flags/ru.svg b/assets/images/flags/ru.svg new file mode 100644 index 0000000..b59ecab --- /dev/null +++ b/assets/images/flags/ru.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/fortmatic.svg b/assets/images/fortmatic.svg deleted file mode 100755 index 030459d..0000000 --- a/assets/images/fortmatic.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/images/imtoken.svg b/assets/images/imtoken.svg deleted file mode 100644 index 7cfcdcc..0000000 --- a/assets/images/imtoken.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/line.svg b/assets/images/line.svg deleted file mode 100644 index fd0145f..0000000 --- a/assets/images/line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/images/portis.svg b/assets/images/portis.svg deleted file mode 100755 index ed96393..0000000 --- a/assets/images/portis.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/images/squarelink.svg b/assets/images/squarelink.svg deleted file mode 100755 index 9146ccf..0000000 --- a/assets/images/squarelink.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/images/torus.png b/assets/images/torus.png deleted file mode 100644 index e9cd2ca..0000000 Binary files a/assets/images/torus.png and /dev/null differ diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 55f4aa5..5611ebc 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -18,6 +18,9 @@ @import 'components/step'; @import 'components/header'; @import 'components/wallets'; +@import 'components/modal'; +@import 'components/flag'; +@import 'components/dropdown'; .title { span { @@ -35,3 +38,24 @@ background-size: contain; background-repeat: no-repeat; } + +.delete { + border-radius: 0; + height: .902rem; + max-height: .902rem; + max-width: .902rem; + min-height: .902rem; + min-width: .902rem; + width: .902rem; + background-color: #FFFFFF; + mask-size: contain; + mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2131 1.07106C15.0179 0.875816 14.7013 0.875799 14.506 1.07106L8.14207 7.43502L1.77811 1.07106C1.58286 0.875816 1.26627 0.875799 1.071 1.07106C0.875742 1.26632 0.875752 1.58292 1.071 1.77817L7.43496 8.14213L1.071 14.5061C0.875742 14.7014 0.875752 15.018 1.071 15.2132C1.26625 15.4084 1.58285 15.4085 1.77811 15.2132L8.14207 8.84924L14.506 15.2132C14.7013 15.4084 15.0179 15.4085 15.2131 15.2132C15.4084 15.0179 15.4084 14.7013 15.2131 14.5061L8.84918 8.14213L15.2131 1.77817C15.4084 1.58291 15.4084 1.26631 15.2131 1.07106Z' fill='%23C0D4F3'/%3E%3C/svg%3E%0A"); + + &::before, &::after { + content: none; + } + + &:hover, &:focus { + background-color: #6B6B6B; + } +} diff --git a/assets/styles/components/_base.scss b/assets/styles/components/_base.scss index 8cd6ce7..7fa4f95 100644 --- a/assets/styles/components/_base.scss +++ b/assets/styles/components/_base.scss @@ -38,7 +38,7 @@ $navbar-item-hover-background-color: transparent; $navbar-item-active-color: $primary; $navbar-breakpoint: $tablet; -$modal-background-background-color: rgba(#050505, 0.86); +$modal-background-background-color: rgba(#000, 0.95); $modal-card-title-color: $primary; $modal-card-head-background-color: $primary-invert; $modal-card-head-border-bottom: none; @@ -49,11 +49,26 @@ $modal-card-head-radius: 0; $modal-card-body-padding: 0 1.5rem; $modal-card-head-padding: 1.5rem; -$box-background-color: $primary-invert; +$box-background-color: #1F1F1F; $box-shadow: none; $box-color: #fefefe; $box-padding: 1.5rem; +$footer-background-color: transparent; +$footer-padding: 2rem; + +$dropdown-item-color: $white; +$dropdown-content-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #6B6B6B; +$dropdown-content-background-color: $primary-invert; +$dropdown-item-hover-background-color: #2B2B2B; +$dropdown-item-hover-color: $white; + +$dropdown-item-active-background-color: #313131; +$dropdown-item-active-color: $white; + +$dropdown-content-padding-bottom: 0; +$dropdown-content-padding-top: 0; + @import '~bulma/sass/base/_all'; @import '~bulma/sass/helpers/_all'; @import '~bulma/sass/elements/_all'; diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss index 56babea..449d134 100644 --- a/assets/styles/components/_button.scss +++ b/assets/styles/components/_button.scss @@ -1,6 +1,29 @@ .button { font-weight: 700; + &.is-icon { + width: 1.5rem; + height: 1.5rem; + padding: 0; + background-color: transparent; + border: none; + + .icon { + height: 1.5rem; + width: 1.5rem; + } + + .trnd { + width: 100%; + height: 100%; + background-color: #6B6B6B; + } + + &:focus:not(:active), &.is-focused:not(:active) { + box-shadow: none; + } + } + &.is-primary { &.is-outlined { background-color: #182922; @@ -41,3 +64,16 @@ } } } + +.buttons { + .button.is-icon:not(:last-child):not(.is-fullwidth) { + margin-right: 1.25rem; + } + + .break { + margin: 0 1.25rem .5rem 0; + width: 1px; + align-self: stretch; + background-color: #2A2A2A; + } +} diff --git a/assets/styles/components/_dropdown.scss b/assets/styles/components/_dropdown.scss new file mode 100644 index 0000000..d64fbf1 --- /dev/null +++ b/assets/styles/components/_dropdown.scss @@ -0,0 +1,53 @@ +.dropdown.is-mobile-modal { + .dropdown-content { + overflow: hidden; + } + + .dropdown-item { + &:focus { + outline: none; + } + } + + &.is-expanded-modal { + .dropdown-menu { + @include desktop { + min-width: 400px; + } + } + } +} + + +.dropdown-langs { + margin-bottom: .5rem; + + .dropdown-menu { + min-width: auto; + padding-top: 0; + padding-bottom: .5rem; + } + + &.is-mobile-modal { + .dropdown-menu { + max-width: 100px; + } + } + + a.dropdown-item { + padding-right: 1rem; + line-height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 400; + + .flag-icon { + margin-right: .5rem; + } + } + + .button { + margin-bottom: 0; + } +} diff --git a/assets/styles/components/_flag.scss b/assets/styles/components/_flag.scss new file mode 100644 index 0000000..bc7eb9a --- /dev/null +++ b/assets/styles/components/_flag.scss @@ -0,0 +1,24 @@ +.flag-icon { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; + position: relative; + display: inline-block; + height: 24px; + width: 24px; + &:before { + content: '\00a0'; + } +} + +// https://github.com/HatScripts/circle-flags/tree/master/flags + +@mixin flag-icon($country) { + .flag-icon-#{$country} { + background-image: url('../images/flags/#{$country}.svg'); + } +} +$countries: gb ru cn; +@each $country in $countries { + @include flag-icon($country); +} diff --git a/assets/styles/components/_icons.scss b/assets/styles/components/_icons.scss index 8b2e1cb..0bc5e3c 100644 --- a/assets/styles/components/_icons.scss +++ b/assets/styles/components/_icons.scss @@ -26,4 +26,20 @@ &-logout { mask-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H10C10.5523 18 11 17.5523 11 17C11 16.4477 10.5523 16 10 16H4C2.89545 16 2 15.1046 2 14V4C2 2.89543 2.89545 2 4 2H10C10.5523 2 11 1.55228 11 1C11 0.447716 10.5523 0 10 0H4Z' fill='%230E1633'/%3E%3Cpath d='M15.1213 5.70708C14.7308 5.31655 14.0976 5.31655 13.7071 5.70708C13.3165 6.0976 13.3165 6.73077 13.7071 7.12129L14.5858 7.99997H6C5.44769 7.99997 5 8.44769 5 8.99997C5 9.55225 5.44769 9.99997 6 9.99997H14.6406L13.707 10.9336C13.3165 11.3241 13.3165 11.9571 13.707 12.3476C14.0975 12.7381 14.7306 12.7381 15.1211 12.3476L17.7148 9.75388C17.9575 9.51125 18.0494 9.17508 17.9905 8.86153C17.9597 8.63882 17.8555 8.43955 17.7031 8.28889L15.1213 5.70708Z' fill='%230E1633'/%3E%3C/svg%3E%0A"); } + + &-stats { + mask-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 0C12.4477 0 12 0.447693 12 1V19C12 19.5523 12.4477 20 13 20C13.5523 20 14 19.5523 14 19V1C14 0.447693 13.5523 0 13 0Z' fill='%23838BAD'/%3E%3Cpath d='M8 6C8 5.44769 8.44769 5 9 5C9.55231 5 10 5.44769 10 6V19C10 19.5523 9.55231 20 9 20C8.44769 20 8 19.5523 8 19V6Z' fill='%23838BAD'/%3E%3Cpath d='M5 8C4.44769 8 4 8.44769 4 9V19C4 19.5523 4.44769 20 5 20C5.55231 20 6 19.5523 6 19V9C6 8.44769 5.55231 8 5 8Z' fill='%23838BAD'/%3E%3Cpath d='M0 13C0 12.4477 0.447693 12 1 12C1.55231 12 2 12.4477 2 13V19C2 19.5523 1.55231 20 1 20C0.447693 20 0 19.5523 0 19V13Z' fill='%23838BAD'/%3E%3Cpath d='M0 23C0 22.4477 0.447693 22 1 22H21C21.5523 22 22 22.4477 22 23C22 23.5523 21.5523 24 21 24H1C0.447693 24 0 23.5523 0 23Z' fill='%23838BAD'/%3E%3Cpath d='M16 9C16 8.44769 16.4477 8 17 8C17.5523 8 18 8.44769 18 9V19C18 19.5523 17.5523 20 17 20C16.4477 20 16 19.5523 16 19V9Z' fill='%23838BAD'/%3E%3Cpath d='M21 5C20.4477 5 20 5.44769 20 6V19C20 19.5523 20.4477 20 21 20C21.5523 20 22 19.5523 22 19V6C22 5.44769 21.5523 5 21 5Z' fill='%23838BAD'/%3E%3C/svg%3E%0A"); + } + + &-twitter { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 2.3037C23.1075 2.69439 22.1565 2.95335 21.165 3.07909C22.185 2.47135 22.9635 1.51634 23.3295 0.365239C22.3785 0.93106 21.3285 1.33073 20.2095 1.55376C19.3065 0.594262 18.0195 0 16.6155 0C13.8915 0 11.6985 2.2064 11.6985 4.91127C11.6985 5.30046 11.7315 5.67468 11.8125 6.03094C7.722 5.83185 4.1025 3.87543 1.671 0.895135C1.2465 1.6301 0.9975 2.47135 0.9975 3.37696C0.9975 5.07742 1.875 6.58478 3.183 7.45746C2.3925 7.44249 1.617 7.21347 0.96 6.85272C0.96 6.86769 0.96 6.88715 0.96 6.90661C0.96 9.29264 2.6655 11.2745 4.902 11.7311C4.5015 11.8403 4.065 11.8927 3.612 11.8927C3.297 11.8927 2.979 11.8748 2.6805 11.8089C3.318 13.7533 5.127 15.1829 7.278 15.2293C5.604 16.536 3.4785 17.3234 1.1775 17.3234C0.774 17.3234 0.387 17.3054 0 17.2561C2.1795 18.6586 4.7625 19.4595 7.548 19.4595C16.602 19.4595 21.552 11.9751 21.552 5.48757C21.552 5.27052 21.5445 5.06096 21.534 4.85289C22.5105 4.16133 23.331 3.29763 24 2.3037Z' fill='%23838BAD'/%3E%3C/svg%3E%0A"); + } + + &-telegram { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.4174 13.1813L9.0204 18.7653C9.58841 18.7653 9.83441 18.5213 10.1294 18.2283L12.7925 15.6833L18.3106 19.7243C19.3226 20.2883 20.0357 19.9913 20.3087 18.7933L23.9308 1.8214L23.9318 1.8204C24.2528 0.324404 23.3907 -0.260593 22.4047 0.106405L1.1142 8.25736C-0.33883 8.82136 -0.31683 9.63136 0.867199 9.99835L6.31033 11.6913L18.9536 3.78039C19.5486 3.38639 20.0897 3.60439 19.6446 3.99839L9.4174 13.1813Z' fill='%23838BAD'/%3E%3C/svg%3E%0A"); + } + + &-github { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='23' viewBox='0 0 24 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.37 0 0 5.28 0 11.792C0 17.003 3.438 21.422 8.205 22.98C8.805 23.091 9.025 22.726 9.025 22.413C9.025 22.133 9.015 21.391 9.01 20.408C5.672 21.119 4.968 18.826 4.968 18.826C4.422 17.465 3.633 17.101 3.633 17.101C2.546 16.37 3.717 16.385 3.717 16.385C4.922 16.467 5.555 17.6 5.555 17.6C6.625 19.403 8.364 18.882 9.05 18.581C9.158 17.818 9.467 17.299 9.81 17.004C7.145 16.709 4.344 15.695 4.344 11.177C4.344 9.89 4.809 8.838 5.579 8.013C5.444 7.715 5.039 6.516 5.684 4.892C5.684 4.892 6.689 4.576 8.984 6.101C9.944 5.839 10.964 5.709 11.984 5.703C13.004 5.709 14.024 5.839 14.984 6.101C17.264 4.576 18.269 4.892 18.269 4.892C18.914 6.516 18.509 7.715 18.389 8.013C19.154 8.838 19.619 9.89 19.619 11.177C19.619 15.707 16.814 16.704 14.144 16.994C14.564 17.348 14.954 18.071 14.954 19.176C14.954 20.754 14.939 22.022 14.939 22.405C14.939 22.714 15.149 23.083 15.764 22.965C20.565 21.417 24 16.995 24 11.792C24 5.28 18.627 0 12 0Z' fill='%23838BAD'/%3E%3C/svg%3E%0A"); + } } diff --git a/assets/styles/components/_modal.scss b/assets/styles/components/_modal.scss new file mode 100644 index 0000000..73cf598 --- /dev/null +++ b/assets/styles/components/_modal.scss @@ -0,0 +1,25 @@ +.box-modal { + max-width: 440px; + overflow-y: auto; + + &-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; + + &.is-spaced { + margin-bottom: .475rem; + } + } + + &-title { + font-size: 1rem; + font-weight: bold; + } + + .note { + font-size: 0.875rem; + margin-bottom: 1rem; + } +} diff --git a/assets/styles/components/_wallets.scss b/assets/styles/components/_wallets.scss index ceb216b..5df74b1 100644 --- a/assets/styles/components/_wallets.scss +++ b/assets/styles/components/_wallets.scss @@ -3,15 +3,11 @@ margin: -0.5rem; > .control { - margin: 0; - - &.control-with-select { - margin: 0.5rem; - } + margin: 0.5rem; &:not(.control-with-select) { .button { - margin: 0.5rem; + height: 100%; } } } @@ -23,11 +19,16 @@ height: auto; &.is-black { + color: $primary-invert; background-color: #559774; &:hover { background-color: #94febf; } + + &[disabled] { + background-color: #559774; + } } &:before { @@ -48,33 +49,9 @@ background-image: url('../images/ethereum.svg'); } - &.is-portis:before { - background-image: url('../images/portis.svg'); - } - - &.is-torus:before { - background-image: url('../images/torus.png'); - } - - &.is-squarelink:before { - background-image: url('../images/squarelink.svg'); - } - &.is-trustwallet:before { background-image: url('../images/trustwallet.svg'); } - - &.is-imtoken:before { - background-image: url('../images/imtoken.svg'); - } - - &.is-alphawallet:before { - background-image: url('../images/alphawallet.svg'); - } - - &.is-fortmatic:before { - background-image: url('../images/fortmatic.svg'); - } } .control-with-select { diff --git a/components/Footer.vue b/components/Footer.vue new file mode 100644 index 0000000..1c7486f --- /dev/null +++ b/components/Footer.vue @@ -0,0 +1,105 @@ + + + diff --git a/components/Navbar.vue b/components/Navbar.vue index adce17f..d57a4e9 100644 --- a/components/Navbar.vue +++ b/components/Navbar.vue @@ -6,7 +6,7 @@