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

move lbc symbol to left of amount

Browse source
This commit is contained in:
Sean Yesmunt 2020-09-10 11:54:41 -04:00
parent 4facd12c7c
commit 707abdd280
14 changed files with 39 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelCreate/view.jsx
View file

@ -112,7 +112,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
<FormField
className="form-field--price-amount"
name="channel-deposit"
label={<LbcSymbol prefix={__('Deposit')} size={14} />}
label={<LbcSymbol postfix={__('Deposit')} size={14} />}
step="any"
min="0"
type="number"

2
ui/component/channelEdit/view.jsx
View file

@ -295,7 +295,7 @@ function ChannelForm(props: Props) {
type="number"
name="content_bid2"
step="any"
label={<LbcSymbol prefix={__('Deposit')} size={14} />}
label={<LbcSymbol postfix={__('Deposit')} size={14} />}
value={params.amount}
error={bidError}
min="0.0"

2
ui/component/claimEffectiveAmount/view.jsx
View file

@ -14,7 +14,7 @@ function ClaimEffectiveAmount(props: Props) {
return null;
}
return <LbcSymbol prefix={claim.meta.effective_amount} />;
return <LbcSymbol postfix={claim.meta.effective_amount} />;
}
export default ClaimEffectiveAmount;

2
ui/component/common/credit-amount.jsx
View file

@ -53,7 +53,7 @@ class CreditAmount extends React.PureComponent<Props> {
}
if (showLBC) {
amountText = <LbcSymbol prefix={amountText} />;
amountText = <LbcSymbol postfix={amountText} />;
}
if (fee) {

10
ui/component/common/lbc-symbol.jsx
View file

@ -9,18 +9,24 @@ type Props = {
isTitle?: boolean,
size?: number,
prefix?: string | number,
postfix?: string | number,
};
const LbcSymbol = (props: Props) => {
const { prefix, size, isTitle = false } = props;
const { prefix, postfix, size, isTitle = false } = props;
return (
<>
{prefix}
<Icon
icon={ICONS.LBC}
size={isTitle ? 22 : size}
className={classnames('icon__lbc', { 'icon__lbc--with-text': prefix, 'icon__lbc--title': isTitle })}
className={classnames('icon__lbc', {
'icon__lbc--before-text': prefix,
'icon__lbc--after-text': postfix,
'icon__lbc--title': isTitle,
})}
/>
{postfix}
</>
);
};

4
ui/component/header/view.jsx
View file

@ -183,7 +183,7 @@ const Header = (props: Props) => {
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
iconRight={ICONS.LBC}
icon={ICONS.LBC}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
@ -363,7 +363,7 @@ const Header = (props: Props) => {
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
iconRight={ICONS.LBC}
icon={ICONS.LBC}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();

2
ui/component/publishName/view.jsx
View file

@ -132,7 +132,7 @@ function PublishName(props: Props) {
step="any"
placeholder="0.123"
className="form-field--price-amount"
label={<LbcSymbol prefix={__('Deposit')} size={14} />}
label={<LbcSymbol postfix={__('Deposit')} size={12} />}
value={bid}
error={bidError}
disabled={!name}

2
ui/component/walletBalance/view.jsx
View file

@ -27,7 +27,7 @@ const WalletBalance = (props: Props) => {
<React.Fragment>
<section className="columns">
<Card
title={<LbcSymbol prefix={balance} isTitle />}
title={<LbcSymbol postfix={balance} isTitle />}
subtitle={__('Available Balance')}
actions={
<div className="section__actions">

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

@ -54,7 +54,7 @@ function WalletSendTip(props: Props) {
const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0);
const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
const [tipError, setTipError] = React.useState();
const [sendAsTip, setSendAsTip] = usePersistedState('comment-support:sendAsTip', true);
const [sendAsTip, setSendAsTip] = React.useState(true); // usePersistedState('comment-support:sendAsTip', true);
const [isConfirming, setIsConfirming] = React.useState(false);
const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel');
const { claim_id: claimId } = claim;
@ -175,14 +175,14 @@ function WalletSendTip(props: Props) {
/>
) : (
<Card
title={claimIsMine ? __('Boost your content') : isSupport ? __('Support this content') : __('Send a tip')}
title={claimIsMine ? __('Boost your content') : isSupport ? __('Support this content') : __('Support')}
subtitle={
<React.Fragment>
{isSupport
? __(
'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
)
: __('Send a chunk of change to this creator to let them know you appreciate their content.')}{' '}
: __('Show this channel your appreciation by sending a donation.')}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
</React.Fragment>
}
@ -197,7 +197,7 @@ function WalletSendTip(props: Props) {
<div className="confirm__value">{selectedChannel}</div>
<div className="confirm__label">{__(isSupport ? 'Supporting' : 'Tipping')}</div>
<div className="confirm__value">
<LbcSymbol prefix={tipAmount} size={22} />
<LbcSymbol postfix={tipAmount} size={22} />
</div>
</div>
</div>
@ -233,7 +233,7 @@ function WalletSendTip(props: Props) {
'button-toggle--disabled': amount > balance,
})}
label={amount}
iconRight={ICONS.LBC}
icon={ICONS.LBC}
onClick={() => {
setPresetTipAmount(amount);
setUseCustomTip(false);
@ -245,6 +245,7 @@ function WalletSendTip(props: Props) {
className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
})}
icon={ICONS.LBC}
label={__('Custom')}
onClick={() => setUseCustomTip(true)}
/>
@ -267,8 +268,10 @@ function WalletSendTip(props: Props) {
label={
<React.Fragment>
{__('Custom support amount')}{' '}
<I18nMessage tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} /> }}>
(%lbc_balance% available)
<I18nMessage
tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
>
(%lbc_balance% Credits available)
</I18nMessage>
</React.Fragment>
}
@ -298,7 +301,7 @@ function WalletSendTip(props: Props) {
}
/>
{fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
{!claimIsMine && !fetchingChannels && (
{false && !claimIsMine && !fetchingChannels && (
<FormField
name="toggle-is-support"
type="checkbox"

2
ui/modal/modalConfirmTransaction/view.jsx
View file

@ -32,7 +32,7 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
<div className="section section--padded card--inline confirm__wrapper">
<div className="section">
<div className="confirm__label">{__('Sending')}</div>
<div className="confirm__value">{<LbcSymbol prefix={amount} size={22} />}</div>
<div className="confirm__value">{<LbcSymbol postfix={amount} size={22} />}</div>
<div className="confirm__label">{__('To')}</div>
<div className="confirm__value">{address}</div>
</div>

2
ui/modal/modalRepost/view.jsx
View file

@ -181,7 +181,7 @@ function ModalRepost(props: Props) {
step="any"
placeholder="0.123"
className="form-field--price-amount"
label={<LbcSymbol prefix={__('Deposit')} size={14} />}
label={<LbcSymbol postfix={__('Deposit')} size={14} />}
value={repostBid}
error={repostBidError}
disabled={!repostName}

4
ui/scss/component/_form-field.scss
View file

@ -105,6 +105,10 @@ label {
color: var(--color-input-label);
display: inline-block;
margin-bottom: var(--spacing-xxs);
.icon__lbc {
margin-bottom: 4px;
}
}
input-submit {

11
ui/scss/component/_icon.scss
View file

@ -46,17 +46,16 @@
.icon__lbc {
vertical-align: middle;
// fill: none;
path {
// fill: none;
}
}
.icon__lbc--with-text {
.icon__lbc--before-text {
margin-left: 5px;
}
.icon__lbc--after-text {
margin-right: 5px;
}
.icon__lbc--title {
margin-bottom: 4px;
}

5
ui/scss/component/_purchase.scss
View file

@ -1,9 +1,6 @@
.credit-amount {
display: inline-flex;
align-items: center;
.icon {
// margin-left: var(--spacing-xs);
margin-bottom: 4px;
}
}