From 0204aa2001af25da01ba61aed32f36eac47079a1 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 19 Sep 2017 21:18:36 -0700 Subject: Add Add Token UI; Add Fuzzy search for tokens --- ui/app/css/itcss/components/add-token.scss | 173 +++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 ui/app/css/itcss/components/add-token.scss (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss new file mode 100644 index 000000000..db1d0dc18 --- /dev/null +++ b/ui/app/css/itcss/components/add-token.scss @@ -0,0 +1,173 @@ +.add-token { + width: 498px; + display: flex; + flex-flow: column nowrap; + align-items: center; + position: relative; + top: -36px; + z-index: 12; + font-family: 'DIN Next Light'; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + + &__wrapper { + box-shadow: none !important; + } + + &__footers { + border-bottom: 1px solid $gallery; + } + } + + &__wrapper { + background-color: $white; + box-shadow: 0 2px 4px 0 rgba($black, .08); + display: flex; + flex-flow: column nowrap; + align-items: center; + flex: 0 0 auto; + } + + &__title-container { + display: flex; + flex-flow: column nowrap; + align-items: center; + padding: 30px 60px 12px; + border-bottom: 1px solid $gallery; + flex: 0 0 auto; + } + + &__title { + color: $scorpion; + font-size: 20px; + line-height: 26px; + text-align: center; + font-weight: 600; + margin-bottom: 12px; + } + + &__description { + text-align: center; + } + + &__description + &__description { + margin-top: 24px; + } + + &__content-container { + width: 100%; + border-bottom: 1px solid $gallery; + } + + &__input-container { + padding: 11px 0; + width: 263px; + margin: 0 auto; + } + + &__input { + width: 100%; + border: 2px solid $gallery; + border-radius: 4px; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__footers { + width: 100%; + } + + &__add-custom { + color: $scorpion; + font-size: 18px; + line-height: 24px; + text-align: center; + padding: 11px 0 19px; + font-weight: 600; + cursor: pointer; + } + + &__add-custom-form { + display: flex; + flex-flow: column nowrap; + margin: 8px 0 51px; + } + + &__add-custom-field { + width: 290px; + margin: 0 auto; + } + + &__add-custom-label { + font-size: 16px; + line-height: 21px; + margin-bottom: 8px; + } + + &__add-custom-input { + width: 100%; + border: 1px solid $silver; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__add-custom-field + &__add-custom-field { + margin-top: 21px; + } + + &__buttons { + display: flex; + flex-flow: column nowrap; + margin: 30px 0 51px; + flex: 0 0 auto; + } + + &__token-icons-container { + display: flex; + flex-flow: row wrap; + } + + &__token-wrapper { + display: flex; + flex-flow: row nowrap; + flex: 0 0 50%; + align-items: center; + padding: 24px 0 24px 24px; + } + + &__token-name { + font-size: 14px; + line-height: 19px; + } + + &__token-symbol { + font-size: 22px; + line-height: 29px; + font-weight: 600; + } + + &__token-icon { + width: 60px; + height: 60px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + border-radius: 50%; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba($black, .24); + margin-right: 12px; + flex: 0 0 auto; + } +} -- cgit From 04da22db0863a9a361a0f414d9cc37bf3bb3a392 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 20 Sep 2017 22:57:36 -0700 Subject: Add Token UI - hover/select state; fetch token address --- ui/app/css/itcss/components/add-token.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index db1d0dc18..ebfdf7b11 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -140,11 +140,22 @@ } &__token-wrapper { + transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 50%; + flex: 0 0 45%; align-items: center; - padding: 24px 0 24px 24px; + padding: 12px; + margin: 2.5%; + box-sizing: border-box; + border-radius: 10px; + cursor: pointer; + border: 2px solid transparent; + + &:hover, + &--selected { + border: 2px solid $malibu-blue; + } } &__token-name { -- cgit From 3ec2f534632426876c28b22c58cbbf14b4904d97 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Sep 2017 18:44:52 -0700 Subject: Integrate Add Token --- ui/app/css/itcss/components/add-token.scss | 95 +++++++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index ebfdf7b11..d5d1aab71 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -56,6 +56,10 @@ margin-top: 24px; } + &__confirmation-description { + margin: 12px 0; + } + &__content-container { width: 100%; border-bottom: 1px solid $gallery; @@ -65,6 +69,18 @@ padding: 11px 0; width: 263px; margin: 0 auto; + position: relative; + } + + &__search-input-error-message { + position: absolute; + bottom: -10px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; } &__input { @@ -89,9 +105,13 @@ font-size: 18px; line-height: 24px; text-align: center; - padding: 11px 0 19px; + padding: 12px 0; font-weight: 600; cursor: pointer; + + &:hover { + background-color: $gallery; + } } &__add-custom-form { @@ -103,6 +123,24 @@ &__add-custom-field { width: 290px; margin: 0 auto; + position: relative; + + &--error { + .add-token__add-custom-input { + border-color: $red; + } + } + } + + &__add-custom-error-message { + position: absolute; + bottom: -21px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; } &__add-custom-label { @@ -152,9 +190,12 @@ cursor: pointer; border: 2px solid transparent; - &:hover, + &:hover { + border: 2px solid rgba($malibu-blue, .5); + } + &--selected { - border: 2px solid $malibu-blue; + border: 2px solid $malibu-blue !important; } } @@ -181,4 +222,52 @@ margin-right: 12px; flex: 0 0 auto; } + + &__confirmation-token-list { + display: flex; + flex-flow: column nowrap; + + .token-balance { + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + + &__amount { + color: $scorpion; + font-size: 43px; + font-weight: 300; + line-height: 43px; + margin-right: 8px; + } + + &__symbol { + color: $scorpion; + font-size: 16px; + line-height: 24px; + } + } + } + + &__confirmation-title { + padding: 30px 120px 12px; + } + + &__confirmation-content { + padding-bottom: 60px; + } + + &__confirmation-token-list-item { + display: flex; + flex-flow: row nowrap; + padding: 0 120px; + align-items: center; + } + + &__confirmation-token-list-item + &__confirmation-token-list-item { + margin-top: 30px; + } + + &__confirmation-token-icon { + margin-right: 18px; + } } -- cgit From a59972dcabc56c3d92f09ba1b88a2ded70ce8c34 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 17:14:48 -0400 Subject: Prevent adding already added tokens (#2362) --- ui/app/css/itcss/components/add-token.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index d5d1aab71..aa8221c9a 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -4,7 +4,6 @@ flex-flow: column nowrap; align-items: center; position: relative; - top: -36px; z-index: 12; font-family: 'DIN Next Light'; @@ -189,6 +188,7 @@ border-radius: 10px; cursor: pointer; border: 2px solid transparent; + position: relative; &:hover { border: 2px solid rgba($malibu-blue, .5); @@ -197,6 +197,11 @@ &--selected { border: 2px solid $malibu-blue !important; } + + &--disabled { + opacity: .4; + pointer-events: none; + } } &__token-name { @@ -223,6 +228,14 @@ flex: 0 0 auto; } + &__token-message { + position: absolute; + color: $caribbean-green; + font-size: 11px; + bottom: 0; + left: 85px; + } + &__confirmation-token-list { display: flex; flex-flow: column nowrap; -- cgit From ba9cefb24e61e570407154c37b6cc30b22829667 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:38:39 -0700 Subject: Add caret to Add Token toggle --- ui/app/css/itcss/components/add-token.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index aa8221c9a..9bdda6a9b 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -109,7 +109,18 @@ cursor: pointer; &:hover { - background-color: $gallery; + background-color: rgba(0, 0, 0, .05); + } + + &:active { + background-color: rgba(0, 0, 0, .1); + } + + .fa { + position: absolute; + right: 24px; + font-size: 24px; + line-height: 24px; } } -- cgit From ad91fcd6628bb892b4c37da50b9e93e7d4605d5a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 17:15:10 -0700 Subject: Add token list and buy modal alignment fix --- ui/app/css/itcss/components/add-token.scss | 48 +++++++++++++++++++++--------- 1 file changed, 34 insertions(+), 14 deletions(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 9bdda6a9b..d2532eecc 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -7,19 +7,6 @@ z-index: 12; font-family: 'DIN Next Light'; - @media screen and (max-width: $break-small) { - top: 0; - width: 100%; - - &__wrapper { - box-shadow: none !important; - } - - &__footers { - border-bottom: 1px solid $gallery; - } - } - &__wrapper { background-color: $white; box-shadow: 0 2px 4px 0 rgba($black, .08); @@ -191,7 +178,7 @@ transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 45%; + flex: 0 0 42.5%; align-items: center; padding: 12px; margin: 2.5%; @@ -215,6 +202,10 @@ } } + &__token-data { + align-self: flex-start; + } + &__token-name { font-size: 14px; line-height: 19px; @@ -294,4 +285,33 @@ &__confirmation-token-icon { margin-right: 18px; } + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + overflow-y: auto; + + &__wrapper { + box-shadow: none !important; + } + + &__footers { + border-bottom: 1px solid $gallery; + } + + &__token-icon { + width: 50px; + height: 50px; + } + + &__token-symbol { + font-size: 18px; + line-height: 24px; + } + + &__token-name { + font-size: 12px; + line-height: 16px; + } + } } -- cgit From b2e440e4ffba6db29cf8a928a41534c1f204d485 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 18:47:28 -0700 Subject: Add Token styling fix --- ui/app/css/itcss/components/add-token.scss | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components/add-token.scss') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index d2532eecc..5f6d0fcff 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -265,6 +265,11 @@ &__confirmation-title { padding: 30px 120px 12px; + + @media screen and (max-width: $break-small) { + padding: 20px 0; + width: 100%; + } } &__confirmation-content { @@ -274,7 +279,7 @@ &__confirmation-token-list-item { display: flex; flex-flow: row nowrap; - padding: 0 120px; + margin: 0 auto; align-items: center; } @@ -289,10 +294,14 @@ @media screen and (max-width: $break-small) { top: 0; width: 100%; - overflow-y: auto; + overflow: hidden; + height: 100%; &__wrapper { box-shadow: none !important; + flex: 1 1 auto; + width: 100%; + overflow-y: auto; } &__footers { @@ -313,5 +322,20 @@ font-size: 12px; line-height: 16px; } + + &__buttons { + flex-flow: row nowrap; + width: 100%; + align-items: center; + justify-content: center; + padding: 12px 0; + margin: 0; + border-top: 1px solid $gallery; + + button { + flex: 1 0 auto; + margin: 0 12px; + } + } } } -- cgit