fix spacing on send tip modal
This commit is contained in:
parent
5aec8ad0a8
commit
80595311c6
3 changed files with 10 additions and 4 deletions
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import type { Node } from 'react';
|
import type { Node } from 'react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Tooltip from 'component/common/tooltip';
|
import Tooltip from 'component/common/tooltip';
|
||||||
import ClaimPreview from 'component/claimPreview';
|
import ClaimPreview from 'component/claimPreview';
|
||||||
|
@ -17,6 +18,7 @@ type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
// to allow for other elements to be nested within the UriIndicator
|
// to allow for other elements to be nested within the UriIndicator
|
||||||
children: ?Node,
|
children: ?Node,
|
||||||
|
inline: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
class UriIndicator extends React.PureComponent<Props> {
|
class UriIndicator extends React.PureComponent<Props> {
|
||||||
|
@ -41,7 +43,7 @@ class UriIndicator extends React.PureComponent<Props> {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { link, isResolvingUri, claim, addTooltip, children } = this.props;
|
const { link, isResolvingUri, claim, addTooltip, children, inline } = this.props;
|
||||||
|
|
||||||
if (!claim) {
|
if (!claim) {
|
||||||
return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
|
return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
|
||||||
|
@ -50,7 +52,7 @@ class UriIndicator extends React.PureComponent<Props> {
|
||||||
const isChannelClaim = claim.value_type === 'channel';
|
const isChannelClaim = claim.value_type === 'channel';
|
||||||
|
|
||||||
if (!claim.signing_channel && !isChannelClaim) {
|
if (!claim.signing_channel && !isChannelClaim) {
|
||||||
return <span className="channel-name">Anonymous</span>;
|
return <span className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const channelClaim = isChannelClaim ? claim : claim.signing_channel;
|
const channelClaim = isChannelClaim ? claim : claim.signing_channel;
|
||||||
|
@ -59,7 +61,7 @@ class UriIndicator extends React.PureComponent<Props> {
|
||||||
const { name } = channelClaim;
|
const { name } = channelClaim;
|
||||||
const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
|
const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
|
||||||
|
|
||||||
const inner = <span className="channel-name">{name}</span>;
|
const inner = <span className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>;
|
||||||
|
|
||||||
if (!channelLink) {
|
if (!channelLink) {
|
||||||
return inner;
|
return inner;
|
||||||
|
|
|
@ -27,7 +27,7 @@ class ModalSendTip extends React.PureComponent<Props> {
|
||||||
) : (
|
) : (
|
||||||
<I18nMessage
|
<I18nMessage
|
||||||
tokens={{
|
tokens={{
|
||||||
url: <UriIndicator uri={uri} />,
|
url: <UriIndicator uri={uri} inline />,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Send a tip to %url%
|
Send a tip to %url%
|
||||||
|
|
|
@ -154,3 +154,7 @@ $metadata-z-index: 1;
|
||||||
z-index: $metadata-z-index;
|
z-index: $metadata-z-index;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.channel-name--inline {
|
||||||
|
margin-left: var(--spacing-xsmall);
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue