diff options
author | Dan J Miller <danjm.com@gmail.com> | 2019-08-01 03:56:44 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-08-01 03:56:44 +0800 |
commit | e9c7df28ed88f6dc3a5074cf873f3920429d1803 (patch) | |
tree | 6075769d6a43cda8ce7de0a141b8f55065f05727 /ui/app/css | |
parent | 1fd3dc9ecf16f00d721078e114138e529a7b8e16 (diff) | |
download | tangerine-wallet-browser-e9c7df28ed88f6dc3a5074cf873f3920429d1803.tar.gz tangerine-wallet-browser-e9c7df28ed88f6dc3a5074cf873f3920429d1803.tar.zst tangerine-wallet-browser-e9c7df28ed88f6dc3a5074cf873f3920429d1803.zip |
Address book send plus contact list (#6914)
* Style Send Header
* Move Send to-row to send view and restyle
* Add "Recents" group to select recipient view
* Rename SendToRow to AddRecipient
* Basic UI and Layout
* New ENSInput component
* wip - fuzzy search for input
* small refactor
* Add Dialog
* contact list initial
* initial error on invalid address
* clean up edit
* Click to open modal
* Create AddToAddressBookModal component
* Modal styling and layout
* modal i18n
* Add to Addressbook
* ens wip
* ens wip
* ENS Resolution
* Reset input
* Send to explicit address
* Happy Path Complete
* Add back error checking
* Reset send-to when emptying input
* Add back warning object
* Fix linter
* Fix unit test #1 - fix import paths
* Remove dead tests
* One more to go
* Fix all unit tests
* add unit test for reducers and actions
* test rendering AddRecipient
* Add tests for dialog boxes in AddRecipient
* Add test for validating
* Fix linter
* Fix e2e tests
* Token send e2e fix
* Style View Contact
* Style edit-contact
* Fix e2e
* Fix from-import-beta-ui e2e spec
* Make section header say "add recipient” by default
* Auto-focus add recipient input
* Update placeholder text
* Update input title font size
* Auto advance to next step if user paste a valid address
* Ellipsify address when recipient is selected
* Fix app header background color on desktop
* Give each form row a margin of 16px
* Use .container/.component naming pattern for ens-input
* Auto-focus on input when add to addressbook modal is opened; Save on Enter
* Fix and add unit test
* Fix selectors name in e2e tests
* Correct e2e test token amount for address-book-send changes
* Adds e2e test for editing a transaction
* Delete test/integration/lib/send-new-ui.js
* Add tests for amount max button and high value error on send screen to test/e2e/metamask-ui.spec.js
* lint and revert to address as object keys
* add chainId based on current network to address book entry
* fix test
* only display contacts for the current network
* Improve ENS message when not found on current network
* Add error to indicate when network does not support ENS
* bump gaba
* address book, resolve comments
* Move contact-list to its own component
* De-duplicate getaddressbook selector and refactor name selection logic in contact-list-tab/
* Use contact-list component in contact-list-tab.component (i.e. in settings)
* Improve/fix settings headers for popup and browser views
* Lint fixes related to address book updates
* Add 'My accounts' page to settings address book
* Update add new contact button in settings to match floating circular design
* Improve styles of view contact page
* Improve styles and labels of the add-contact.component
* Further lint fixes related to address book updates
* Update unit tests as per address book updates
* Ensure that contact list groups are sorted alphabetically
* Refactor settings component to use a container for connection to redux; allow display of addressbook name in settings header
* Decouple ens-input.component from send context
* Add ens resolution to add contact screen in settings
* Switching networks when an ens address is shown on send form removes the ens address.
* Resolve send screen search for ensAddress to matching address book entry if it exists
* Show resolved ens icon and address if exists (settings: add-contact.component)
* Make the displayed and copied address in view-contact.component the checksummed address
* Default alias state prop in AddToAddressBookModal to empty string
* Use keyCode to detect enter key in AddToAddressBookModal
* Ensure add-contact component properly updates after QR code detection
* Fix display of all recents after clicking 'Load More' in contact list
* Fix send screen contact searching after network switching
* Code cleanup related to address book changes
* Update unit tests for address book changes
* Update ENS name not found on network message
* Add ens registration error message
* Cancel on edit mode takes user back to view screen
* Adds support for memo to settings contact list view and edit screens
* Modify designs of edit and view contact in popup environment
* Update settings content list UX to show split columns in fullscreen and proper internal navigation
* Correct background address book API usages in UI
Diffstat (limited to 'ui/app/css')
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 1 | ||||
-rw-r--r-- | ui/app/css/itcss/components/send.scss | 58 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 100 |
3 files changed, 144 insertions, 15 deletions
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dde66fbb3..0e2034670 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,4 +1,5 @@ @import '../../../components/ui/button/buttons'; +@import '../../../components/ui/dialog/dialog'; @import './footer.scss'; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index ee07c1a7e..81678408a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -536,8 +536,6 @@ } &__form { - padding: 10px 0 25px; - @media screen and (max-width: $break-small) { margin: 0; flex: 1 1 auto; @@ -553,7 +551,7 @@ } &__form-row { - margin: 8px 18px 0px; + margin: 1rem 1rem 0px; position: relative; display: flex; flex-flow: row; @@ -570,7 +568,6 @@ &__form-field { flex: 1 1 auto; min-width: 0; - max-width: 277px; .currency-display { color: $tundora; @@ -758,16 +755,8 @@ &__to-autocomplete { position: relative; - &__down-caret { - z-index: 1026; - position: absolute; - top: 18px; - right: 12px; - } - &__qr-code { z-index: 1026; - position: absolute; top: 13px; right: 33px; cursor: pointer; @@ -778,13 +767,52 @@ &__qr-code:hover { background: #f1f1f1; } + } - &__input.with-qr { - padding-right: 65px; + &__to-autocomplete { + display: flex; + flex-direction: row; + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: 1px solid $Grey-100; + border-radius: 8px; + background-color: $white; + color: $tundora; + padding: 0 10px; + font-family: Roboto; + line-height: 21px; + align-items: center; + + &__input { + font-size: 16px; + height: 100%; + border: none; + flex: 1 1 auto; + width: 0; + + &::placeholder { + color: #A1A5B3; + } + } + + &__resolved { + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + height: 30px; + cursor: pointer; + + + .send-v2__to-autocomplete__qr-code { + top: 2px; + right: 0; + } } } - &__to-autocomplete, &__memo-text-area, &__hex-data { + &__memo-text-area, &__hex-data { &__input { z-index: 1025; position: relative; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index c02be0d98..9257456ec 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -74,6 +74,36 @@ $send-card-z-index: 20; $sidebar-z-index: 26; $sidebar-overlay-z-index: 25; +// Flex +%row-nowrap { + display: flex; + flex-flow: row nowrap; +} + +%col-nowrap { + display: flex; + flex-flow: column nowrap; +} + +// Background Image Sizing +%bg-contain { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +%ellipsify { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +%modal { + background-color: $white; + border-radius: 10px; + box-shadow: 0px 5px 16px rgba($black, 0.25);; +} + /* Z Indicies - Current app - 11 @@ -94,24 +124,73 @@ $break-large: 576px; $primary-font-type: Roboto; $Blue-000: #eaf6ff; +$Blue-100: #a7d9fe; +$Blue-200: #75c4fd; +$Blue-300: #43aefc; $Blue-400: #1098fc; $Blue-500: #037DD6; $Blue-600: #0260a4; +$Blue-700: #024272; +$Blue-800: #01253f; +$Blue-900: #00080d; $Grey-000: #f2f3f4; $Grey-100: #D6D9DC; $Grey-200: #bbc0c5; +$Grey-300: #9fa6ae; $Grey-400: #848c96; +$Grey-200: #bbc0c5; $Grey-500: #6A737D; +$Grey-600: #535a61; $Grey-800: #24272a; $Red-000: #fcf2f3; +$Red-100: #f7d5d8; +$Red-200: #f1b9be; +$Red-300: #e88f97; +$Red-400: #e06470; $Red-500: #D73A49; $Red-600: #b92534; +$Red-700: #8e1d28; +$Red-800: #64141c; +$Red-900: #3a0c10; $Orange-000: #fef5ef; +$Orange-300: #faa66c; +$Orange-600: #c65507; $Orange-500: #F66A0A; +// Font Sizes +%h3 { + font-size: 1.5rem; + line-height: 2.125rem; + font-weight: 400; +} + +%h4 { + font-size: 1.125rem; + line-height: 1.3125rem; + font-weight: 400; +} + +%h5 { + font-size: 1rem; + line-height: 1.25rem; + font-weight: 400; +} + +%h6 { + font-size: .875rem; + line-height: 1.25rem; + font-weight: 400; +} + +%h8 { + font-size: .75rem; + line-height: 1.0625rem; + font-weight: 400; +} + /* Spacing Variables @@ -127,3 +206,24 @@ $xlarge-spacing: 48px; $xxlarge-spacing: 64px; +%input { + background: $white; + border: 1px solid $Grey-100; + box-sizing: border-box; + border-radius: 8px; + padding: .625rem .75rem; + font-size: 1.25rem; +} +// Input mixin + +%input-2 { + border: 2px solid $Grey-200; + border-radius: 6px; + color: $Grey-800; + padding: 0.875rem 1rem; + font-size: 1.125rem; + + &:focus-within { + border-color: $Blue-500; + } +} |