• payment modal dialog - refactor bitcoinDashboard.js

    Suguru Hirahara
    Suguru Hirahara committed May 3, 2017
    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