Enhance file remove modal

[tzarebczan]

The Issue

The current file remove modal can be confusing to users:

1. "from LBRY?" should probably be closer to something like "from the app", especially on claims that you don't own.
2. show the file path/name somewhere
3. rewording of claim abandoning, check on by default. Warn if unchecking - the file is removed from their publishes area and the user can't remove the deposit from the claim page anymore (needs to be deleted via transaction list or redownloaded).

System Configuration

Anything Else

Screenshots

[brentmclark]

Can I grab this one?

[kauffj]

That'd be awesome @brentmclark !

[brentmclark]

Thanks @kauffj! I could use a little help with the verbiage, though. I'm not particularly familiar with this product.

So far, I have this when checked:

and this when unchecked:

[neb-b]

@brentmclark Those are looking great!

[brentmclark]

Thanks, @seanyesmunt! I still have some work to do to get the strings into app-strings.json and the styles into the SCSS files. The app-strings implementation looks pretty straightforward, but I could use some help finding the optimal place for my styles.

For example, the red copy above. Can I add a --color-warning variable to the _vars.scss file or should this be treated as a one-off?

Similarly, for the form field descriptions that rest atop their respective form fields; I see you're using BEM. Does it make sense to extend the fieldset-section block with something like fieldset-section__description and fieldset-section__description--subtext?

[neb-b]

@brentmclark The app-strings will be populated automatically so you don't need to worry about those.

You can just use .error-text for the red text.

For the additional text we should probably just use the helper prop, since we use that in other places. Maybe both the error and description text should be passed as helper? Not sure how that would look.

[brentmclark]

@seanyesmunt Thanks for the quick feedback; I'll give these a shot tonight.

[brentmclark]

@seanyesmunt .error-text worked great; thanks!

The helper prop renders content below the checkbox instead of above the checkbox. To me, it doesn't read properly when rendered below the checkbox in this instance. Thoughts?

[brentmclark]

Oh my goodness I'm dense 😛. How do you feel about this approach instead?

[neb-b]

That's looking great!

[brentmclark]

Awesome. I'll cut the PR tonight. Thanks for your help!

[kauffj]

A copy few suggestions:

• URI and claim are both words we generally avoid forcing users to learn. Maybe "Abandon on blockchain"? It would also be neat if the amount returned could be shown, e.g. "Abandon on blockchain (receive 0.5 LBC back).
• Remove the word "also" for the first checkbox

The vertical spacing is also a bit inconcistent, but that doesn't necessarily need to be fixed and can probably be left to @seanyesmunt

[e4drcf]

may be it's time to close this issue?)
it's in the master already)