Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Refactor about:preferences#payments followups #6047

Merged
merged 6 commits into from
Dec 15, 2016
Merged

Refactor about:preferences#payments followups #6047

merged 6 commits into from
Dec 15, 2016

Commits on Dec 15, 2016

  1. Polishment of titleBar and walletBar 

    Follow-up of 21ece29

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
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    2ee1629 View commit details
    Browse the repository at this point in the history

  2. Made the selectors specific on about:preferences#payments to avoid un… 

    …expected 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
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    4b835af View commit details
    Browse the repository at this point in the history

  3. Added margin-bottom of the transfer funds button (Redo 6049) 

    Fixes 6048

Auditors: @bsclifton

Test Plan:
1. Open https://jsfiddle.net/LnwtLckc/5/
2. Click "register"
3. Make sure "Transfer BTC" button has the margin-bottom on add funds dialog on about:preferences#payments
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    a8e5b89 View commit details
    Browse the repository at this point in the history

  4. Fixed advanced settings modal dialogs on about:preferences#payments 

    Set the equal paddings to
- .advancedSettings
- .ledgerBackupContent
- .recoveryContent

Set the equal margin-bottom to
- .ledgerRecoveryContent
- .firstRecoveryKey
- .secondRecoveryKey

Added white-space:nowrap to recovery keys (fixes 6220)

Auditors: @bsclifton

Test Plan:
1. Open about:preferences#payments
2. Click "Advanced Settings..."
3. Make sure style of "Backup your wallet" and "Recover your wallet" is consistent
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    2745cfd View commit details
    Browse the repository at this point in the history

  5. Polishment of modal dialog and advanced settings dialog on about:pref… 

    …erences#payments

Mockup images by @bradleyrichter: 5719#issuecomment-262431933

Restyled modal dialog under .paymentsContainer
- Made the background of modal dialog consistent (except .coinbaseOverlay)
- Changed border-radius of modal dialog in .paymentsContainer from 4px to 8px (fixes 6223)
- Fixed spacing of the modal dialog header (fixes 6221)
  - Set padding:25px to .sectionTitle in .dialog-header
- Set margin-top:0 to the first panel inside .board
- Set margin-bottom:0 to the last panel inside .board
- Aligned buttons in the footer with flex-end (fixes 6219)
- Introduced .addFundsBoard
  - Aligned fa icons on the payment panel with display:flex (fixes 6222)
  - Aligned "Transfer BTC button" with display:flex
- Fixed panelFooter in .addFundsBoard (fixes 5799)
  - Aligned Coinbase icon and message
  - Display the footer (closes 6007)

Restyled advanced settings dialog
- Designed "hide sites if" options on the dialog (closes 6201, which is a follow-up of 4681)
- Made the margin consistent between the headers/labels and the input/select element
  - Addresses 6047#issuecomment-265946727

Auditors: @bsclifton

Test Plan 1
1. Enable Coinbase if not
2. Open about:preferences#payments
3. Click "Add funds..."
4. Make sure the board is well styled
5. Make sure the footer is aligned horizontally
6. Click "Fund with debit/credit"
7. Make sure Coinbase widget is displayed with transparent background
8. Open https://jsfiddle.net/LnwtLckc/5/
9. Click "register" and go back
10. Make sure "Transfer BTC" button is aligned to right

Test Plan 2
1. Click "Advanced Settings..."
2. Check the margin between the labels and the select forms
3. Click "Backup your wallet"
4. Check the margin between the labels and the keys
5. Click "Done" and "Recover your wallet"
6. Check the margin between the labels and the input forms
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    01f072c View commit details
    Browse the repository at this point in the history

  6. Restyled payment history table 

    Closes 6202
Closes 3485 /cc: @mrose17

- Removed "pull-right" class from the close button in modalOverlay.less (to confirm 21ece29 of 6009 fixed 5719)
- Added color:@braveMediumOrange to .sectionTitle of .paymentHistory (closes 6229)
- Added padding-left and padding-right to th and td (fixes 6231)
- Added white-space:nowrap to disable wrap (fixes 6230)
- Added min-width:80px to the button inside the footer (fixes 6232)
- Made sectionTitle consistent
  - Removed ":not(.paymentHistory)" from modalOverlay.less

Test Plan:
1. Disable the ledger
2. run "npm run add-simulated-payment-history" some times
3. Enable the ledger
4. Click "View Payment History..."
5. Click "OK" button
    Suguru Hirahara committed Dec 15, 2016
    Configuration menu
    Copy the full SHA
    73378b1 View commit details
    Browse the repository at this point in the history