fix spacing on send tip modal

This commit is contained in:
Sean Yesmunt 2020-01-21 17:38:10 -05:00
parent 5aec8ad0a8
commit 80595311c6
3 changed files with 10 additions and 4 deletions

View file

@ -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;

View file

@ -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%

View file

@ -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);
}