diff --git a/app/javascript/mastodon/components/server_banner.jsx b/app/javascript/mastodon/components/server_banner.jsx index 991907a3f033083c09a9af432b0c32e3f9ae3370..9669decc850afd0263ba4775cc5d7bced536bc39 100644 --- a/app/javascript/mastodon/components/server_banner.jsx +++ b/app/javascript/mastodon/components/server_banner.jsx @@ -7,7 +7,7 @@ import ShortNumber from 'mastodon/components/short_number'; import Skeleton from 'mastodon/components/skeleton'; import Account from 'mastodon/containers/account_container'; import { domain } from 'mastodon/initial_state'; -import { Image } from 'mastodon/components/image'; +import { ServerHeroImage } from 'mastodon/components/server_hero_image'; import { Link } from 'react-router-dom'; const messages = defineMessages({ @@ -41,7 +41,7 @@ class ServerBanner extends React.PureComponent { <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} /> </div> - <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' /> + <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' /> <div className='server-banner__description'> {isLoading ? ( diff --git a/app/javascript/mastodon/components/image.tsx b/app/javascript/mastodon/components/server_hero_image.tsx similarity index 93% rename from app/javascript/mastodon/components/image.tsx rename to app/javascript/mastodon/components/server_hero_image.tsx index 490543424a5f865b4f51bb12d9cf5bb668be8262..d10b8a620b8b3f6ce6f9705e221d2c3c8a61f87b 100644 --- a/app/javascript/mastodon/components/image.tsx +++ b/app/javascript/mastodon/components/server_hero_image.tsx @@ -9,7 +9,7 @@ type Props = { className?: string; }; -export const Image: React.FC<Props> = ({ +export const ServerHeroImage: React.FC<Props> = ({ src, srcSet, blurhash, diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index 11aff67c67e1a776cdd7fb9a2e0cebc9f7ee14e2..f025a9633a9b83fa814c5507fd453e0d90bcd9ad 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -11,7 +11,7 @@ import Account from 'mastodon/containers/account_container'; import Skeleton from 'mastodon/components/skeleton'; import { Icon } from 'mastodon/components/icon'; import classNames from 'classnames'; -import { Image } from 'mastodon/components/image'; +import { ServerHeroImage } from 'mastodon/components/server_hero_image'; const messages = defineMessages({ title: { id: 'column.about', defaultMessage: 'About' }, @@ -114,7 +114,7 @@ class About extends React.PureComponent { <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}> <div className='scrollable about'> <div className='about__header'> - <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> + <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1> <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p> </div>