Normalize Add funds modal dialog based on the refactored modalOverlay.js
- Reorganize functions
- Reorganize styles to make the dialog consistent with other dialogs
Rename classnames on the BEM style
panel
|- panel__divider
|-- panel__divider_left
|--- panel__divider_left__titleWrapper
|---- panel__divider_left__titleWrapper__iconWrapper
|--- panel__divider_left__listTitleWrapper
|---- panel__divider_left__listTitleWrapper__title
|---- panel__divider_left__listTitleWrapper__subTitle
|-- panel__divider_right
|--- panel__divider_right__title
|--- panel__divider_right__subTitle
|--- panel__divider_right__bitcoinPanel__paymentURL
|--- panel__divider_right__bitcoinPanel__walletLabelText
|--- panel__divider_right__bitcoinPanel__walletAddressText
modalOverlay__qrcodeOverlay
|- modalOverlay__qrcodeOverlay__content
|-- modalOverlay__qrcodeOverlay__content__bitcoinQR
|- modalOverlay__qrcodeOverlay__footerWrapper
|-- modalOverlay__qrcodeOverlay__footerWrapper__footer
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__qrcodeLogo
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__appstoreLogo
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__playstoreLogo
modalOverlay__coinbaseOverlay
|- modalOverlay__coinbaseOverlay__header
|- modalOverlay__coinbaseOverlay__bodyWrapper
|-- modalOverlay__coinbaseOverlay__bodyWrapper__body
|--- modalOverlay__coinbaseOverlay__bodyWrapper__body__iframe
|- modalOverlay__coinbaseOverlay__footer
dashboardFooter
dashboardFooter_coinbaseFooter
|- dashboardFooter_coinbaseFooter__coinbaseMessageWrapper
|-- dashboardFooter_coinbaseFooter__coinbaseMessageWrapper__message
Add bitcoinPanel
Add iconWrapperWidth
Remove modalOverlay.less (Addresses #8661)
Remove data-l10n-id='bitcoinAddress' in favor of 'bitcoinPaymentURL' (Closes#8662)
Remove styles.deviderFirst
Remove styles.alignMiddle
Remove styles.dialogInsideMargin__bottom
Remove styles.disabledPanel
Remove bitcoinDashboard class
Remove unnecessary div
Remove margin:0 from settingListTitle (panel__divider_left__listTitleWrapper__title)
Also:
- Refactor qrcodeOverlay
- Edit qrcodeOverlayContent
- Replace fa icons with functions
- Replace padding magical number with `panelPadding` and `panelPaddingBody`
- Fix done button height on Add funds dialog
- Align done button if coinbase logo is displayed (Closes#6372)
- Display title on Brave wallet QR code (Closes#8663)
Test Plan:
1. Open about:preferences#payments
2. Click "Add funds"
3. Make sure the 3 icons inside the dialog body is aligned
Test plan
1. Open about:preferences#payments
2. Click "Add funds"
3. Click "Fund with credit/debit"
4. Make sure the coinbase widget is displayed at the center
Test Plan:
1. Add your country code to coinbaseCountries.js
2. Open about:preferences#payments
3. Click "Add funds"
4. Click "Display QR code"
5. Make sure the 3 icons appear on the footer
Test Plan:
1. Open about:preferences#payments
2. Enable payments
3. Click "Add funds"
4. Click "Display QR Code"
5. Make sure both the QR image and the label is aligned at the center
Test Plan:
1. Enable coinbase widget (via VPN)
2. Open about:preferences#payments
3. Click "Add funds"
4. Make sure "Done" button is aligned with the other buttons
5. Disable the coinbase widget
6. Make sure "Done button" is aligned to the right side
Test Plan:
1. Open about:preferences#payments
2. Click "Add funds"
3. Click "Display QR code"
4. Hover on the QR code image
5. Make sure its title is displayed