From 707abdd28035ab5dba4a59356e5a340a444d6338 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 10 Sep 2020 11:54:41 -0400 Subject: [PATCH] move lbc symbol to left of amount --- ui/component/channelCreate/view.jsx | 2 +- ui/component/channelEdit/view.jsx | 2 +- ui/component/claimEffectiveAmount/view.jsx | 2 +- ui/component/common/credit-amount.jsx | 2 +- ui/component/common/lbc-symbol.jsx | 10 ++++++++-- ui/component/header/view.jsx | 4 ++-- ui/component/publishName/view.jsx | 2 +- ui/component/walletBalance/view.jsx | 2 +- ui/component/walletSendTip/view.jsx | 19 +++++++++++-------- ui/modal/modalConfirmTransaction/view.jsx | 2 +- ui/modal/modalRepost/view.jsx | 2 +- ui/scss/component/_form-field.scss | 4 ++++ ui/scss/component/_icon.scss | 11 +++++------ ui/scss/component/_purchase.scss | 5 +---- 14 files changed, 39 insertions(+), 30 deletions(-) diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx index 5e4bb19c7..7f32ad036 100644 --- a/ui/component/channelCreate/view.jsx +++ b/ui/component/channelCreate/view.jsx @@ -112,7 +112,7 @@ class ChannelCreate extends React.PureComponent { } + label={} step="any" min="0" type="number" diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index e6c10b77e..047b83dc6 100644 --- a/ui/component/channelEdit/view.jsx +++ b/ui/component/channelEdit/view.jsx @@ -295,7 +295,7 @@ function ChannelForm(props: Props) { type="number" name="content_bid2" step="any" - label={} + label={} value={params.amount} error={bidError} min="0.0" diff --git a/ui/component/claimEffectiveAmount/view.jsx b/ui/component/claimEffectiveAmount/view.jsx index ac62b9612..2a6c3aebc 100644 --- a/ui/component/claimEffectiveAmount/view.jsx +++ b/ui/component/claimEffectiveAmount/view.jsx @@ -14,7 +14,7 @@ function ClaimEffectiveAmount(props: Props) { return null; } - return ; + return ; } export default ClaimEffectiveAmount; diff --git a/ui/component/common/credit-amount.jsx b/ui/component/common/credit-amount.jsx index 4f64c487f..d2f6c63af 100644 --- a/ui/component/common/credit-amount.jsx +++ b/ui/component/common/credit-amount.jsx @@ -53,7 +53,7 @@ class CreditAmount extends React.PureComponent { } if (showLBC) { - amountText = ; + amountText = ; } if (fee) { diff --git a/ui/component/common/lbc-symbol.jsx b/ui/component/common/lbc-symbol.jsx index 1f8241b46..9fd879301 100644 --- a/ui/component/common/lbc-symbol.jsx +++ b/ui/component/common/lbc-symbol.jsx @@ -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} + {postfix} ); }; diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index be991a277..6d327f285 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -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(); diff --git a/ui/component/publishName/view.jsx b/ui/component/publishName/view.jsx index c84d29e48..55986a561 100644 --- a/ui/component/publishName/view.jsx +++ b/ui/component/publishName/view.jsx @@ -132,7 +132,7 @@ function PublishName(props: Props) { step="any" placeholder="0.123" className="form-field--price-amount" - label={} + label={} value={bid} error={bidError} disabled={!name} diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx index dfb6f57c3..35ce6bf59 100644 --- a/ui/component/walletBalance/view.jsx +++ b/ui/component/walletBalance/view.jsx @@ -27,7 +27,7 @@ const WalletBalance = (props: Props) => {
} + title={} subtitle={__('Available Balance')} actions={
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index a1d1d925f..bf1565c02 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -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) { /> ) : ( {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.')}{' '}
@@ -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={ {__('Custom support amount')}{' '} - }}> - (%lbc_balance% available) + }} + > + (%lbc_balance% Credits available) } @@ -298,7 +301,7 @@ function WalletSendTip(props: Props) { } /> {fetchingChannels && {__('Loading your channels...')}} - {!claimIsMine && !fetchingChannels && ( + {false && !claimIsMine && !fetchingChannels && ( {
{__('Sending')}
-
{}
+
{}
{__('To')}
{address}
diff --git a/ui/modal/modalRepost/view.jsx b/ui/modal/modalRepost/view.jsx index 65a9a2e61..48336a3dd 100644 --- a/ui/modal/modalRepost/view.jsx +++ b/ui/modal/modalRepost/view.jsx @@ -181,7 +181,7 @@ function ModalRepost(props: Props) { step="any" placeholder="0.123" className="form-field--price-amount" - label={} + label={} value={repostBid} error={repostBidError} disabled={!repostName} diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 54facbcfa..0bf81910a 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -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 { diff --git a/ui/scss/component/_icon.scss b/ui/scss/component/_icon.scss index cdb6fb28f..60efb633c 100644 --- a/ui/scss/component/_icon.scss +++ b/ui/scss/component/_icon.scss @@ -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; } diff --git a/ui/scss/component/_purchase.scss b/ui/scss/component/_purchase.scss index 3c579a5c6..1ab628681 100644 --- a/ui/scss/component/_purchase.scss +++ b/ui/scss/component/_purchase.scss @@ -1,9 +1,6 @@ .credit-amount { - display: inline-flex; - align-items: center; - .icon { - // margin-left: var(--spacing-xs); + margin-bottom: 4px; } }