Polish add funds dialog

[luixxiul]

Fixes #11289
Addresses #11193

Auditors: @cezaraugusto

Test Plan:

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.

Test Plan:

Reviewer Checklist:

Tests

• Adequate test coverage exists to prevent regressions
• Tests should be independent and work correctly when run individually or as a suite ref
• New files have MPL2 license header

[luixxiul]

TODO: Change the string copied when you click the clipboard button to Copied! just as you get on about:brave.

Addressed with ab06756#diff-fe64555358df277d4c4c5ed8609eb492R90

[NejcZdovc]

@luixxiul this should do it

diff --git a/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js
index 75f3a5ec6..06dd07c0c 100644
--- a/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js
+++ b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js
@@ -40,6 +40,7 @@ class AddFundsWizardAddress extends React.Component {
   get copyToClipboardButton () {
     return (
       <ClipboardButton
+        dataL10nId='copyToClipboard'
         bottomTooltip
         className={globalStyles.appIcons.clipboard}
         copyAction={this.onCopy}

[NejcZdovc]

nope, sorry this is not the correct one

[luixxiul]

yeah copied is hardcoded.

[NejcZdovc]

ok found it. We only have it in app.properties, we need it in preferences.properties as well

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index fec6a1909..4d86a6f4a 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -86,6 +86,7 @@ contributionStatementFooterNoteBoxHeading2=About publisher distributions
 contributionStatements=Contribution statements
 contributionTime=Contribution Time
+copied=Copied!
 copy=Copy
 copyToClipboard=Copy to clipboard
 createdWalletStatus=Your wallet is ready!
 createWallet=create wallet

[bradleyrichter]

@luixxiul @cezaraugusto The text strings as shown above are not correct. The main strings should be as follows:

Go to your external Bitcoin account and send BTC to your Brave wallet address below:

Go to your external Ethereum account and send ETH to your Brave wallet address below:

Go to your external BAT account and send BAT to your Brave wallet address below:

Go to your external Lightcoin account and send LTC to your Brave wallet address below:

---

The lower "note:" strings look correct but need a width adjustment.

The layout needs a little more refinement to make everything fit and align.

[cezaraugusto]

@luixxiul changes Brad suggested are in the main add funds branch, please cherry-pick from there and add your changes. for what I see this lgtm but yes UI changed a little

[luixxiul]

oh, it looks like I have just reverted the design to the old one...

With the current layout you would not be able to align the textbox with the currency icon, as the icon is added there with :before pseudo-class specified with a parent where the rest of the stuff is placed.

To achieve that:

• create a block for the icon and the main strings
• Set width: calc(100% - ${marginAroundTheDivider} - ${qrcodeWidth}) to the block

and

• Set width: 100% to the groupedTextbox wrapper div

and

• create a block for note strings
• Set max-width: calc(${upholdFooterBlockWidth} - calc(${upholdLogoWidth} * 2))
• Set display: flex and flex: flex-end

and so on...

--

If that re-alignment is not necessary, adding enough margin for Copied! tooltip to fix #11289 should be enough.

[luixxiul]

I'll be offline so help wanted 🙏

[luixxiul]

Un-assigning myself for now..

If this PR is not necessary anymore, please just close it in favor of a new one, thanks!

[NejcZdovc]

closing this one for now, because I think @cezaraugusto addressed all feedbacks from @bradleyrichter. If that's not the case please reopen it.

[luixxiul]

• Discussion about the way of importing the variables Polish add funds dialog #11291 (comment)
• Correction of BEM style naming Polish add funds dialog #11291 (comment)

@cezaraugusto let's do that as a follow-up for 0.21.x or 0.22.x since that is not a blocker. sounds good?

If so, I'm going to open an issue for them.