diff --git a/ui/component/claimLink/view.jsx b/ui/component/claimLink/view.jsx index 4eb21ab98..067e4dc29 100644 --- a/ui/component/claimLink/view.jsx +++ b/ui/component/claimLink/view.jsx @@ -1,15 +1,12 @@ // @flow import * as React from 'react'; -import Button from 'component/button'; import PreviewLink from 'component/previewLink'; import UriIndicator from 'component/uriIndicator'; type Props = { uri: string, - title: ?string, claim: StreamClaim, children: React.Node, - className: ?string, autoEmbed: ?boolean, description: ?string, isResolvingUri: boolean, @@ -24,7 +21,6 @@ class ClaimLink extends React.Component<Props> { static defaultProps = { href: null, link: false, - title: null, thumbnail: null, autoEmbed: false, description: null, @@ -63,7 +59,7 @@ class ClaimLink extends React.Component<Props> { }; render() { - const { uri, claim, title, className, autoEmbed, children, isResolvingUri } = this.props; + const { uri, claim, autoEmbed, children, isResolvingUri } = this.props; const isUnresolved = (!isResolvingUri && !claim) || !claim; const isBlacklisted = this.isClaimBlackListed(); @@ -71,20 +67,15 @@ class ClaimLink extends React.Component<Props> { return <span>{children}</span>; } - const { name: claimName, value_type: valueType } = claim; + const { value_type: valueType } = claim; const isChannel = valueType === 'channel'; const showPreview = autoEmbed === true && !isUnresolved; - if(isChannel){ - return <UriIndicator uri={uri} link addTooltip /> - } + if (isChannel) { + return <UriIndicator uri={uri} link addTooltip />; + } - return ( - <React.Fragment> - <Button label={children} title={title || claimName} button={'link'} navigate={uri} className={className} /> - {showPreview && <PreviewLink uri={uri} />} - </React.Fragment> - ); + return <React.Fragment>{showPreview && <PreviewLink uri={uri} />}</React.Fragment>; } } diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 727c1373a..cd4804c3e 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -255,10 +255,10 @@ function Comment(props: Props) { <div className="comment__message"> {editedMessage.length >= LENGTH_TO_COLLAPSE ? ( <Expandable> - <MarkdownPreview content={message} /> + <MarkdownPreview content={message} promptLinks /> </Expandable> ) : ( - <MarkdownPreview content={message} /> + <MarkdownPreview content={message} promptLinks /> )} </div> diff --git a/ui/component/previewLink/view.jsx b/ui/component/previewLink/view.jsx index ba009c0f2..d498c6089 100644 --- a/ui/component/previewLink/view.jsx +++ b/ui/component/previewLink/view.jsx @@ -29,20 +29,20 @@ class PreviewLink extends React.PureComponent<Props> { }; return ( - <span className={'preview-link'} role="button" onClick={this.handleClick}> - <span className={'claim-preview'}> - <span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} /> - <span className={'claim-preview-metadata'}> - <span className={'claim-preview-info'}> - <span className={'claim-preview__title'}> + <span className="preview-link" role="button" onClick={this.handleClick}> + <span className="claim-preview"> + <span style={thumbnailStyle} className="preview-link__thumbnail media__thumb" /> + <span className="claim-preview-metadata"> + <span className="claim-preview-info"> + <span className="claim-preview__title"> <TruncatedText text={title} lines={1} /> </span> </span> - <span className={'media__subtitle'}> + <span className="media__subtitle"> <UriIndicator uri={uri} link /> </span> - <span className={'claim-preview-properties'}> - <span className={'preview-link__description media__subtitle'}> + <span className="claim-preview-properties"> + <span className="preview-link__description media__subtitle"> <TruncatedText lines={2} showTooltip={false}> <MarkdownPreview content={description} strip /> </TruncatedText> diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index be01a75d3..b14776392 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -180,13 +180,14 @@ .preview-link { padding: 0; - margin: 1rem 0; + margin: var(--spacing-s) 0; + padding-right: var(--spacing-s); background-color: var(--color-primary-alt); - border-left: 0.5rem solid var(--color-primary); display: block; align-items: center; word-break: break-all; overflow: hidden; + border-radius: var(--border-radius); .claim-preview { border: 0; @@ -198,8 +199,14 @@ } } + .claim-preview-metadata { + padding: var(--spacing-s) 0; + } + .preview-link__thumbnail { width: 12rem; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .preview-link__description {