~cytrogen/masto-fe

ea1f9b4223baae32e6933c5bef0d8d3200fe4f2e — fusagiko / takayamaki 2 years ago b735954
[Glitch] Rename Image component to ServerHeroImage

Port ab7716cff4a1f590565b6a229282e899d7d02e96 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
M app/javascript/flavours/glitch/components/server_banner.jsx => app/javascript/flavours/glitch/components/server_banner.jsx +2 -2
@@ 7,7 7,7 @@ import ShortNumber from 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/components/skeleton';
import Account from 'flavours/glitch/containers/account_container';
import { domain } from 'flavours/glitch/initial_state';
import { Image } from 'flavours/glitch/components/image';
import { ServerHeroImage } from 'flavours/glitch/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 ? (

R app/javascript/flavours/glitch/components/image.tsx => app/javascript/flavours/glitch/components/server_hero_image.tsx +1 -1
@@ 9,7 9,7 @@ type Props = {
  className?: string;
};

export const Image: React.FC<Props> = ({
export const ServerHeroImage: React.FC<Props> = ({
  src,
  srcSet,
  blurhash,

M app/javascript/flavours/glitch/features/about/index.jsx => app/javascript/flavours/glitch/features/about/index.jsx +2 -2
@@ 11,7 11,7 @@ import Account from 'flavours/glitch/containers/account_container';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Icon } from 'flavours/glitch/components/icon';
import classNames from 'classnames';
import { Image } from 'flavours/glitch/components/image';
import { ServerHeroImage } from 'flavours/glitch/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>