LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

TipModal: Move "Buy More" next to price selection.

Browse source 
Having the "Buy More LBC" at the bottom seems out of place, since the context of LBC/amount is in the middle of the modal.
This commit is contained in:
infiinte-persistence 2020-07-08 15:38:16 +08:00 committed by Sean Yesmunt
parent 94337820f3
commit 86484eb13f
3 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/app-strings.json
View file

@ -1268,6 +1268,8 @@
"Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages.",
"Remove from Blocked List": "Remove from Blocked List",
"Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?",
"Send A Tip": "Send A Tip",
"Send a chunk of change to this creator to let them know you appreciate their content.": "Send a chunk of change to this creator to let them know you appreciate their content.",
"CableTube Escape Artists": "CableTube Escape Artists",
"Unlink YouTube Channel": "Unlink YouTube Channel",
"Sign In With YouTube": "Sign In With YouTube",

14
ui/component/walletSendTip/view.jsx
View file

@ -228,6 +228,15 @@ function WalletSendTip(props: Props) {
label={__('Custom')}
onClick={() => setUseCustomTip(true)}
/>
{DEFAULT_TIP_AMOUNTS.some(val => val > balance) && (
<Button
button="secondary"
className="button-toggle-group-action"
icon={ICONS.BUY}
title={__('Buy More LBC')}
navigate={`/$/${PAGES.BUY}`}
/>
)}
</div>
{useCustomTip && (
@ -281,11 +290,6 @@ function WalletSendTip(props: Props) {
/>
)}
</div>
{DEFAULT_TIP_AMOUNTS.some(val => val > balance) && (
<div className="section">
<Button button="link" label={__('Buy More LBC')} navigate={`/$/${PAGES.BUY}`} />
</div>
)}
</>
)
}

9
ui/scss/component/_button.scss
View file

@ -176,3 +176,12 @@ svg + .button__label,
border-bottom-left-radius: 0;
}
}
.button-toggle-group-action {
position: absolute; // Centers the button along toggle buttons
@media (max-width: $breakpoint-small) {
position: relative;
top: var(--spacing-s);
}
}