From 2ee1629f3c2eb38499fea59b98fc3da2cc7a766f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 12 Dec 2016 12:58:36 +0900 Subject: [PATCH 1/6] Polishment of titleBar and walletBar Follow-up of https://github.com/brave/browser-laptop/pull/6009/commits/21ece29eab80de4af2c606a65b54c13764b04c93 On about:preferences#payments - Disabled underline of the anchor link of fundsFAQ (fixes 6083) - Set font-size of the elements to 14.5px - Set margin of the elements to 12px - Set min-width to the select, input, and button - Set padding, based on the margin of the items inside it On about:preferences - Made button size consistent by replacing em with rem (to avoid font-size inconsistency of the buttons inside walletBar) - this fixes 6216 - Set the default margin of the buttons to 0 Auditors: @bsclifton Test Plan: 1. Clear ledger files in your brave data folder 2. Open about:preferences 3. Make sure the style of about:preferences looks consistent 4. Open about:preferences#payments 5. Make sure the style of the page looks consistent --- less/about/preferences.less | 107 +++++++++++++++++++++++++++++------- less/button.less | 3 +- 2 files changed, 89 insertions(+), 21 deletions(-) diff --git a/less/about/preferences.less b/less/about/preferences.less index 927e1146a74..b651257e865 100644 --- a/less/about/preferences.less +++ b/less/about/preferences.less @@ -504,7 +504,6 @@ table.sortableTable { } } } - } .modal .dialog.paymentHistory .sectionTitle { @@ -565,11 +564,28 @@ div.nextPaymentSubmission { .paymentsContainer { @walletTableData: 235px + 30px; // .walletBar td (min-width + padding) @barMargin: 15px 0 30px; + @fontSize: 14.5px; // .form-control position: relative; overflow-x: hidden; width: 805px; + a { + vertical-align: middle; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + img { + width: 1.5em; + height: 1.5em; + margin-right: 6px; + vertical-align: middle; + } + } + .titleBar { overflow: hidden; display: flex; @@ -609,15 +625,14 @@ div.nextPaymentSubmission { border-radius: @borderRadiusUIbox; margin: @barMargin; padding: 40px; - font-size: 1.3em; - line-height: 1.3em; + font-size: @fontSize; + line-height: 1.8em; color: @mediumGray; width: 500px; float: left; > div { padding: 0.5em 0; - font-size: 14px; } > h3 { @@ -632,18 +647,55 @@ div.nextPaymentSubmission { } .walletBar { - padding: 20px; - padding-bottom: 10px; + @itemMargin: 12px; // button, .nextReconcileDate, .accountBalanceError, .nextReconcileDate + + padding: calc(@itemMargin * 1.5); background: @lightGray; border-radius: @borderRadiusUIbox; margin: @barMargin; + th { + text-align: left; + } + + tr { + height: 1em; + } + + td { + font-size: @fontSize; + padding: 10px 30px 0 0; // .settingsList .settingItem > *:not(.switchControl) 10px + width: auto; + min-width: 235px; + vertical-align: top; + + .settingsListContainer { + margin-bottom: 0; + + .settingsList { + .settingItem { + .fundsAmount, + .fundsSelectBox, + .addFunds { + min-width: 180px; + width: auto; + } + + .fundsSelectBox { + margin-bottom: 0; + } + } + } + } + } + .settingsList .settingItem { + .paymentHistoryButton { display: block; + font-size: @fontSize; color: @braveOrange; - font-size: 14px; - margin: 0; + margin-top: @itemMargin; padding: 0; text-align: left; cursor: pointer; @@ -656,6 +708,10 @@ div.nextPaymentSubmission { height: 100%; margin-bottom: 0; + span { + font-size: @fontSize; // for "Loading..." and .fundsFAQ + } + > span { height: 2.25em; // .form-control display: flex; @@ -670,12 +726,18 @@ div.nextPaymentSubmission { } + button { - margin-top: 12px; // .nextReconcileDate + margin-top: @itemMargin; } - .fundsFAQ { - color: @gray; - margin: 0 0 0 5px; + a { + &:hover { + text-decoration: none; + } + + .fundsFAQ { + color: @gray; + margin: 0 0 0 5px; + } } } } @@ -689,7 +751,8 @@ div.nextPaymentSubmission { } td { - padding: 15px 30px 0 0; + font-size: @fontSize; + padding: 10px 30px 0 0; // .settingsList .settingItem > *:not(.switchControl) 10px width: auto; min-width: 235px; vertical-align: top; @@ -699,12 +762,9 @@ div.nextPaymentSubmission { .fundsSelectBox { width: auto; + margin-bottom: 0; } } - - .walletStatus { - font-size: 14.5px; // .form-control - } } .fundsAmount { @@ -715,8 +775,11 @@ div.nextPaymentSubmission { .accountBalanceError, .nextReconcileDate { - font-size: 14px; - margin: 10px 0; + margin-top: @itemMargin; + } + + .nextReconcileDate { + margin-bottom: 0; } } @@ -726,6 +789,7 @@ div.nextPaymentSubmission { #paymentHistory { background-color: #FFF; + tr { th { color: @darkGray; @@ -747,7 +811,6 @@ div.nextPaymentSubmission { } tr { - height: 1.7em; th { color: @darkGray; @@ -872,6 +935,10 @@ div.nextPaymentSubmission { } } + .sort { + text-align: left; + } + .board { .panel { padding-left: 100px; diff --git a/less/button.less b/less/button.less index be9e8efcf8c..b20c1a3125b 100644 --- a/less/button.less +++ b/less/button.less @@ -144,8 +144,9 @@ span.buttonSeparator { .settingsList > .settingItem + button, .settingItem > span + button, #paymentsContainer button:not(.close) { - font-size: 13px; + font-size: 0.9rem; padding: 8px 20px; + margin: 0; } .settingsList > .settingItem + button { From 4b835afc8dc9ec6070cd092f2dad9cd87b603252 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 12 Dec 2016 12:59:11 +0900 Subject: [PATCH 2/6] Made the selectors specific on about:preferences#payments to avoid unexpected regressions Also .paymentHistoryFooter was introduced to fix 6061 Renamed - from #paymentsContainer to .paymentsContainer (fixes 6081) - from #paymentHistory to .paymentHistoryTable (as .paymentHistory already exists) - from #fundsSelectBox to .fundsSelectBox - from #paymentsSidebar to .paymentsSidebar - from #coinbaseLogo to .coinbaseLogo - from #appstoreLogo to .appstoreLogo - from #playstoreLogo to .playstoreLogo Moved under .paymentsContainer (in order of appearance) - .coinbaseOverlay - .paymentHistoryTable - .advancedSettings - .settingsPanelDivider - .copyKeyContainer - .recoveryOverlay - .bitcoinDashboard - .walletAddressText - .bitcoinIcon - .advancedSettingsFooter - .paymentsSidebar - .ledgerTable Moved under .bitcoinDashboard - .coinbaseLogo - .appstoreLogo - .playstoreLogo - .fa Moved under .ledgerTable - tr - .fa-file-o Moved out of anchor link - .verified (fix 6225) Removed - button.close span - input[type='range'] (as it exists in sortable.less) - .modal .dialog.paymentHistory .sectionTitle Moved elements above classes/ids -- Auditors: @bsclifton Test Plan: 1. Make sure all of the selectors above (except removed ones) can be found in the code, especially preferences.js 2. Make sure the style of about:preferences#payments is not broken - Open about:preferences#payments - Toggle off/on switch - Click "Advanced Settings..." - Click "Backup your wallet" and "Done" - Click "Recover your wallet" and "Done" - Click "Add funds..." - Click "Display QR code" 3. Visit https://clifton.io some times to display the verified icon on about:preferences#payments 4. Make sure the verified icon is not clickable --- js/about/preferences.js | 14 +- less/about/preferences.less | 867 ++++++++++++++++-------------------- less/button.less | 4 +- less/modalOverlay.less | 21 - 4 files changed, 405 insertions(+), 501 deletions(-) diff --git a/js/about/preferences.js b/js/about/preferences.js index 7db8c173044..b26ac2567f5 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -265,7 +265,7 @@ class LedgerTable extends ImmutableComponent { return [ rank, { - html: {verified ? this.getVerifiedIcon() : null}{faviconURL ? {site} : }{site}, + html:
{verified ? this.getVerifiedIcon() : null}{faviconURL ? {site} : }{site}
, value: site }, { @@ -337,9 +337,9 @@ class BitcoinDashboard extends ImmutableComponent { get qrcodeOverlayFooter () { if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { return
- } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { return
-