🎨 make avatars a bit bigger

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>

app/javascript/mastodon/components/account.js

@@ -37,27 +37,27 @@ class Account extends ImmutablePureComponent {
 
   handleFollow = () => {
     this.props.onFollow(this.props.account);
-  }
+  };
 
   handleBlock = () => {
     this.props.onBlock(this.props.account);
-  }
+  };
 
   handleMute = () => {
     this.props.onMute(this.props.account);
-  }
+  };
 
   handleMuteNotifications = () => {
     this.props.onMuteNotifications(this.props.account, true);
-  }
+  };
 
   handleUnmuteNotifications = () => {
     this.props.onMuteNotifications(this.props.account, false);
-  }
+  };
 
   handleAction = () => {
     this.props.onActionClick(this.props.account);
-  }
+  };
 
   render () {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle } = this.props;
@@ -111,7 +111,10 @@ class Account extends ImmutablePureComponent {
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar
+              account={account}
+              size={55}
+            /></div >
             <DisplayName account={account} />
           </Permalink>
 

app/javascript/mastodon/components/avatar.js

@@ -7,16 +7,16 @@ export default class Avatar extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
-    size: PropTypes.number.isRequired,
+    size   : PropTypes.number.isRequired,
-    style: PropTypes.object,
+    style  : PropTypes.object,
-    inline: PropTypes.bool,
+    inline : PropTypes.bool,
     animate: PropTypes.bool,
   };
 
   static defaultProps = {
     animate: autoPlayGif,
-    size: 20,
+    size   : 20,
-    inline: false,
+    inline : false,
   };
 
   state = {
@@ -26,14 +26,14 @@ export default class Avatar extends React.PureComponent {
   handleMouseEnter = () => {
     if (this.props.animate) return;
     this.setState({ hovering: true });
-  }
+  };
 
   handleMouseLeave = () => {
     if (this.props.animate) return;
     this.setState({ hovering: false });
-  }
+  };
 
-  render () {
+  render() {
     const { account, size, animate, inline } = this.props;
     const { hovering } = this.state;
 
@@ -48,8 +48,8 @@ export default class Avatar extends React.PureComponent {
 
     const style = {
       ...this.props.style,
-      width: `${size}px`,
+      width         : `${size}px`,
-      height: `${size}px`,
+      height        : `${size}px`,
       backgroundSize: `${size}px ${size}px`,
     };
 

app/javascript/mastodon/components/status.js

@@ -503,12 +503,12 @@ class Status extends ImmutablePureComponent {
     if (otherAccounts && otherAccounts.size > 0) {
       statusAvatar = (<AvatarComposite
         accounts={otherAccounts}
-        size={48}
+        size={55}
       />);
     } else if (account === undefined || account === null) {
       statusAvatar = (<Avatar
         account={status.get('account')}
-        size={48}
+        size={55}
       />);
     } else {
       statusAvatar = (<AvatarOverlay

app/javascript/mastodon/features/account/components/header.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import Button from 'mastodon/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, me, isStaff } from 'mastodon/initial_state';
+import { autoPlayGif, isStaff, me } from 'mastodon/initial_state';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
 import Avatar from 'mastodon/components/avatar';
@@ -70,7 +70,7 @@ class Header extends ImmutablePureComponent {
 
   openEditProfile = () => {
     window.open('/settings/profile', '_blank');
-  }
+  };
 
   isStatusesPageActive = (match, location) => {
     if (!match) {
@@ -78,7 +78,7 @@ class Header extends ImmutablePureComponent {
     }
 
     return !location.pathname.match(/\/(followers|following)\/?$/);
-  }
+  };
 
   _updateEmojis () {
     const node = this.node;
@@ -111,15 +111,15 @@ class Header extends ImmutablePureComponent {
 
   handleEmojiMouseEnter = ({ target }) => {
     target.src = target.getAttribute('data-original');
-  }
+  };
 
   handleEmojiMouseLeave = ({ target }) => {
     target.src = target.getAttribute('data-static');
-  }
+  };
 
   setRef = (c) => {
     this.node = c;
-  }
+  };
 
   render () {
     const { account, intl, domain, identity_proofs } = this.props;
@@ -263,7 +263,10 @@ class Header extends ImmutablePureComponent {
         <div className='account__header__bar'>
           <div className='account__header__tabs'>
             <a className='avatar' href={account.get('url')} rel='noopener noreferrer' target='_blank'>
-              <Avatar account={account} size={90} />
+              <Avatar
+                account={account}
+                size={120}
+              />
             </a>
 
             <div className='spacer' />

app/javascript/mastodon/features/compose/components/navigation_bar.js

@@ -26,7 +26,7 @@ export default class NavigationBar extends ImmutablePureComponent {
           <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
           <Avatar
             account={this.props.account}
-            size={48}
+            size={55}
           />
         </Permalink >
 

app/javascript/mastodon/features/direct_timeline/components/conversation.js

@@ -179,7 +179,7 @@ class Conversation extends ImmutablePureComponent {
           <div className='conversation__avatar'>
             <AvatarComposite
               accounts={accounts}
-              size={48}
+              size={55}
             />
           </div >
 

app/javascript/mastodon/features/directory/components/account_card.js

@@ -9,10 +9,10 @@ import DisplayName from 'mastodon/components/display_name';
 import Permalink from 'mastodon/components/permalink';
 import RelativeTimestamp from 'mastodon/components/relative_timestamp';
 import IconButton from 'mastodon/components/icon_button';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
 import { shortNumberFormat } from 'mastodon/utils/numbers';
-import { followAccount, unfollowAccount, blockAccount, unblockAccount, unmuteAccount } from 'mastodon/actions/accounts';
+import { blockAccount, followAccount, unblockAccount, unfollowAccount, unmuteAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { initMuteModal } from 'mastodon/actions/mutes';
 
@@ -113,27 +113,27 @@ class AccountCard extends ImmutablePureComponent {
 
   handleEmojiMouseEnter = ({ target }) => {
     target.src = target.getAttribute('data-original');
-  }
+  };
 
   handleEmojiMouseLeave = ({ target }) => {
     target.src = target.getAttribute('data-static');
-  }
+  };
 
   handleFollow = () => {
     this.props.onFollow(this.props.account);
-  }
+  };
 
   handleBlock = () => {
     this.props.onBlock(this.props.account);
-  }
+  };
 
   handleMute = () => {
     this.props.onMute(this.props.account);
-  }
+  };
 
   setRef = (c) => {
     this.node = c;
-  }
+  };
 
   render () {
     const { account, intl } = this.props;
@@ -165,7 +165,10 @@ class AccountCard extends ImmutablePureComponent {
 
         <div className='directory__card__bar'>
           <Permalink className='directory__card__bar__name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
-            <Avatar account={account} size={48} />
+            <Avatar
+              account={account}
+              size={55}
+            />
             <DisplayName account={account} />
           </Permalink>
 

app/javascript/mastodon/features/follow_requests/components/account_authorize.js

@@ -31,7 +31,10 @@ class AccountAuthorize extends ImmutablePureComponent {
       <div className='account-authorize__wrapper'>
         <div className='account-authorize'>
           <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'>
-            <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
+            <div className='account-authorize__avatar'><Avatar
+              account={account}
+              size={55}
+            /></div >
             <DisplayName account={account} />
           </Permalink>
 

app/javascript/mastodon/features/notifications/components/notification.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { HotKeys } from 'react-hotkeys';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -13,10 +13,10 @@ import Permalink from 'mastodon/components/permalink';
 
 const messages = defineMessages({
   favourite: { id: 'notification.favourite', defaultMessage: '{name} favourited your status' },
-  follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
+  follow   : { id: 'notification.follow', defaultMessage: '{name} followed you' },
-  ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
+  ownPoll  : { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
-  poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
+  poll     : { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
-  reblog: { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
+  reblog   : { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
 });
 
 const notificationForScreenReader = (intl, message, timestamp) => {
@@ -35,31 +35,31 @@ class Notification extends ImmutablePureComponent {
   };
 
   static propTypes = {
-    notification: ImmutablePropTypes.map.isRequired,
+    notification      : ImmutablePropTypes.map.isRequired,
-    hidden: PropTypes.bool,
+    hidden            : PropTypes.bool,
-    onMoveUp: PropTypes.func.isRequired,
+    onMoveUp          : PropTypes.func.isRequired,
-    onMoveDown: PropTypes.func.isRequired,
+    onMoveDown        : PropTypes.func.isRequired,
-    onMention: PropTypes.func.isRequired,
+    onMention         : PropTypes.func.isRequired,
-    onFavourite: PropTypes.func.isRequired,
+    onFavourite       : PropTypes.func.isRequired,
-    onReblog: PropTypes.func.isRequired,
+    onReblog          : PropTypes.func.isRequired,
-    onToggleHidden: PropTypes.func.isRequired,
+    onToggleHidden    : PropTypes.func.isRequired,
-    status: ImmutablePropTypes.map,
+    status            : ImmutablePropTypes.map,
-    intl: PropTypes.object.isRequired,
+    intl              : PropTypes.object.isRequired,
-    getScrollPosition: PropTypes.func,
+    getScrollPosition : PropTypes.func,
     updateScrollBottom: PropTypes.func,
-    cacheMediaWidth: PropTypes.func,
+    cacheMediaWidth   : PropTypes.func,
-    cachedMediaWidth: PropTypes.number,
+    cachedMediaWidth  : PropTypes.number,
   };
 
   handleMoveUp = () => {
     const { notification, onMoveUp } = this.props;
     onMoveUp(notification.get('id'));
-  }
+  };
 
   handleMoveDown = () => {
     const { notification, onMoveDown } = this.props;
     onMoveDown(notification.get('id'));
-  }
+  };
 
   handleOpen = () => {
     const { notification } = this.props;
@@ -69,94 +69,131 @@ class Notification extends ImmutablePureComponent {
     } else {
       this.handleOpenProfile();
     }
-  }
+  };
 
   handleOpenProfile = () => {
     const { notification } = this.props;
     this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`);
-  }
+  };
 
   handleMention = e => {
     e.preventDefault();
 
     const { notification, onMention } = this.props;
     onMention(notification.get('account'), this.context.router.history);
-  }
+  };
 
   handleHotkeyFavourite = () => {
     const { status } = this.props;
     if (status) this.props.onFavourite(status);
-  }
+  };
 
   handleHotkeyBoost = e => {
     const { status } = this.props;
     if (status) this.props.onReblog(status, e);
-  }
+  };
 
   handleHotkeyToggleHidden = () => {
     const { status } = this.props;
     if (status) this.props.onToggleHidden(status);
-  }
+  };
 
-  getHandlers () {
+  getHandlers() {
     return {
-      reply: this.handleMention,
+      reply       : this.handleMention,
-      favourite: this.handleHotkeyFavourite,
+      favourite   : this.handleHotkeyFavourite,
-      boost: this.handleHotkeyBoost,
+      boost       : this.handleHotkeyBoost,
-      mention: this.handleMention,
+      mention     : this.handleMention,
-      open: this.handleOpen,
+      open        : this.handleOpen,
-      openProfile: this.handleOpenProfile,
+      openProfile : this.handleOpenProfile,
-      moveUp: this.handleMoveUp,
+      moveUp      : this.handleMoveUp,
-      moveDown: this.handleMoveDown,
+      moveDown    : this.handleMoveDown,
       toggleHidden: this.handleHotkeyToggleHidden,
     };
   }
 
-  renderFollow (notification, account, link) {
+  renderFollow(notification, account, link) {
     const { intl } = this.props;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
+        <div
-          <div className='notification__message'>
+          className='notification notification-follow focusable'
-            <div className='notification__favourite-icon-wrapper'>
+          tabIndex='0'
-              <Icon id='user-plus' fixedWidth />
+          aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}
-            </div>
+        >
 
-            <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
-            </span>
-          </div>
 
-          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <span title={notification.get('created_at')}>
-        </div>
+            <span className='media'>
-      </HotKeys>
+              <span className='media-left'>
+                <AccountContainer
+                  id={account.get('id')}
+                  hidden={this.props.hidden}
+                />
+              </span >
+              <span className='media-center'>
+                <FormattedMessage
+                  id='notification.follow'
+                  defaultMessage='{name} followed you'
+                  values={{ name: link }}
+                />
+              </span >
+              <span className='media-right'>
+                <Icon
+                  id='user-plus'
+                  fixedWidth
+                />
+              </span >
+            </span >
+          </span >
+
+        </div >
+      </HotKeys >
     );
   }
 
-  renderFollowRequest (notification, account, link) {
+  renderFollowRequest(notification, account, link) {
     const { intl } = this.props;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-follow-request focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
+        <div
+          className='notification notification-follow-request focusable'
+          tabIndex='0'
+          aria-label={notificationForScreenReader(intl, intl.formatMessage({
+            id            : 'notification.follow_request',
+            defaultMessage: '{name} has requested to follow you',
+          }, { name: account.get('acct') }), notification.get('created_at'))}
+        >
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user' fixedWidth />
+              <Icon
-            </div>
+                id='user'
+                fixedWidth
+              />
+            </div >
 
             <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
+              <FormattedMessage
-            </span>
+                id='notification.follow_request'
-          </div>
+                defaultMessage='{name} has requested to follow you'
+                values={{ name: link }}
+              />
+            </span >
+          </div >
 
-          <FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
+          <FollowRequestContainer
-        </div>
+            id={account.get('id')}
-      </HotKeys>
+            withNote={false}
+            hidden={this.props.hidden}
+          />
+        </div >
+      </HotKeys >
     );
   }
 
-  renderMention (notification) {
+  renderMention(notification) {
     return (
       <StatusContainer
         id={notification.get('status')}
@@ -173,21 +210,33 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderFavourite (notification, link) {
+  renderFavourite(notification, link) {
     const { intl } = this.props;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+        <div
+          className='notification notification-favourite focusable'
+          tabIndex='0'
+          aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
+        >
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='star' className='star-icon' fixedWidth />
+              <Icon
-            </div>
+                id='star'
+                className='star-icon'
+                fixedWidth
+              />
+            </div >
 
             <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
+              <FormattedMessage
-            </span>
+                id='notification.favourite'
-          </div>
+                defaultMessage='{name} favourited your status'
+                values={{ name: link }}
+              />
+            </span >
+          </div >
 
           <StatusContainer
             id={notification.get('status')}
@@ -200,26 +249,37 @@ class Notification extends ImmutablePureComponent {
             cachedMediaWidth={this.props.cachedMediaWidth}
             cacheMediaWidth={this.props.cacheMediaWidth}
           />
-        </div>
+        </div >
-      </HotKeys>
+      </HotKeys >
     );
   }
 
-  renderReblog (notification, link) {
+  renderReblog(notification, link) {
     const { intl } = this.props;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+        <div
+          className='notification notification-reblog focusable'
+          tabIndex='0'
+          aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
+        >
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='retweet' fixedWidth />
+              <Icon
-            </div>
+                id='retweet'
+                fixedWidth
+              />
+            </div >
 
             <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
+              <FormattedMessage
-            </span>
+                id='notification.reblog'
-          </div>
+                defaultMessage='{name} boosted your status'
+                values={{ name: link }}
+              />
+            </span >
+          </div >
 
           <StatusContainer
             id={notification.get('status')}
@@ -232,32 +292,45 @@ class Notification extends ImmutablePureComponent {
             cachedMediaWidth={this.props.cachedMediaWidth}
             cacheMediaWidth={this.props.cacheMediaWidth}
           />
-        </div>
+        </div >
-      </HotKeys>
+      </HotKeys >
     );
   }
 
-  renderPoll (notification, account) {
+  renderPoll(notification, account) {
     const { intl } = this.props;
-    const ownPoll  = me === account.get('id');
+    const ownPoll = me === account.get('id');
-    const message  = ownPoll ? intl.formatMessage(messages.ownPoll) : intl.formatMessage(messages.poll);
+    const message = ownPoll ? intl.formatMessage(messages.ownPoll) : intl.formatMessage(messages.poll);
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification-poll focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}>
+        <div
+          className='notification notification-poll focusable'
+          tabIndex='0'
+          aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}
+        >
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='tasks' fixedWidth />
+              <Icon
-            </div>
+                id='tasks'
+                fixedWidth
+              />
+            </div >
 
             <span title={notification.get('created_at')}>
               {ownPoll ? (
-                <FormattedMessage id='notification.own_poll' defaultMessage='Your poll has ended' />
+                <FormattedMessage
+                  id='notification.own_poll'
+                  defaultMessage='Your poll has ended'
+                />
               ) : (
-                <FormattedMessage id='notification.poll' defaultMessage='A poll you have voted in has ended' />
+                <FormattedMessage
+                  id='notification.poll'
+                  defaultMessage='A poll you have voted in has ended'
+                />
               )}
-            </span>
+            </span >
-          </div>
+          </div >
 
           <StatusContainer
             id={notification.get('status')}
@@ -270,18 +343,24 @@ class Notification extends ImmutablePureComponent {
             cachedMediaWidth={this.props.cachedMediaWidth}
             cacheMediaWidth={this.props.cacheMediaWidth}
           />
-        </div>
+        </div >
-      </HotKeys>
+      </HotKeys >
     );
   }
 
-  render () {
+  render() {
     const { notification } = this.props;
-    const account          = notification.get('account');
+    const account = notification.get('account');
-    const displayNameHtml  = { __html: account.get('display_name_html') };
+    const displayNameHtml = { __html: account.get('display_name_html') };
-    const link             = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const link = (<bdi ><Permalink
+      className='notification__display-name'
+      href={account.get('url')}
+      title={account.get('acct')}
+      to={`/accounts/${account.get('id')}`}
+      dangerouslySetInnerHTML={displayNameHtml}
+    /></bdi >);
 
-    switch(notification.get('type')) {
+    switch (notification.get('type')) {
     case 'follow':
       return this.renderFollow(notification, account, link);
     case 'follow_request':

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -45,15 +45,15 @@ export default class DetailedStatus extends ImmutablePureComponent {
     }
 
     e.stopPropagation();
-  }
+  };
 
   handleOpenVideo = (media, startTime) => {
     this.props.onOpenVideo(media, startTime);
-  }
+  };
 
   handleExpandedToggle = () => {
     this.props.onToggleHidden(this.props.status);
-  }
+  };
 
   _measureHeight (heightJustChanged) {
     if (this.props.measureHeight && this.node) {
@@ -68,7 +68,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
   setRef = c => {
     this.node = c;
     this._measureHeight();
-  }
+  };
 
   componentDidUpdate (prevProps, prevState) {
     this._measureHeight(prevState.height !== this.state.height);
@@ -86,7 +86,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     }
 
     window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
-  }
+  };
 
   render () {
     const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
@@ -211,8 +211,14 @@ export default class DetailedStatus extends ImmutablePureComponent {
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
           <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
-            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
+            <div className='detailed-status__display-avatar'><Avatar
-            <DisplayName account={status.get('account')} localDomain={this.props.domain} />
+              account={status.get('account')}
+              size={55}
+            /></div >
+            <DisplayName
+              account={status.get('account')}
+              localDomain={this.props.domain}
+            />
           </a>
 
           <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />

app/javascript/mastodon/features/ui/components/actions_modal.js

@@ -26,16 +26,29 @@ export default class ActionsModal extends ImmutablePureComponent {
 
     return (
       <li key={`${text}-${i}`}>
-        <a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
+        <a
-          {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
+          href={href}
-          <div>
+          target='_blank'
-            <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
+          rel='noopener noreferrer'
-            <div>{meta}</div>
+          onClick={this.props.onClick}
-          </div>
+          data-index={i}
-        </a>
+          className={classNames({ active })}
-      </li>
+        >
+          {icon && <IconButton
+            title={text}
+            icon={icon}
+            role='presentation'
+            tabIndex='-1'
+            inverted
+          />}
+          <div >
+            <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div >
+            <div >{meta}</div >
+          </div >
+        </a >
+      </li >
     );
-  }
+  };
 
   render () {
     const status = this.props.status && (
@@ -49,7 +62,10 @@ export default class ActionsModal extends ImmutablePureComponent {
 
           <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
             <div className='status__avatar'>
-              <Avatar account={this.props.status.get('account')} size={48} />
+              <Avatar
+                account={this.props.status.get('account')}
+                size={55}
+              />
             </div>
 
             <DisplayName account={this.props.status.get('account')} />

app/javascript/mastodon/features/ui/components/boost_modal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import Button from '../../../components/button';
 import StatusContent from '../../../components/status_content';
 import Avatar from '../../../components/avatar';
@@ -37,7 +37,7 @@ class BoostModal extends ImmutablePureComponent {
   handleReblog = () => {
     this.props.onReblog(this.props.status);
     this.props.onClose();
-  }
+  };
 
   handleAccountClick = (e) => {
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
@@ -45,11 +45,11 @@ class BoostModal extends ImmutablePureComponent {
       this.props.onClose();
       this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
     }
-  }
+  };
 
   setRef = (c) => {
     this.button = c;
-  }
+  };
 
   render () {
     const { status, intl } = this.props;
@@ -66,7 +66,10 @@ class BoostModal extends ImmutablePureComponent {
 
               <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
                 <div className='status__avatar'>
-                  <Avatar account={status.get('account')} size={48} />
+                  <Avatar
+                    account={status.get('account')}
+                    size={55}
+                  />
                 </div>
 
                 <DisplayName account={status.get('account')} />

app/javascript/mastodon/features/ui/components/link_footer.js

@@ -129,25 +129,25 @@ class LinkFooter extends React.PureComponent {
 
         <div className='extras'>
 
-          <button className='mod-theme btn btn-block btn-small btn-primary pull-left'>
+          {/*<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>*/}
-            {this.themeIsDark ? (
+          {/*  {this.themeIsDark ? (*/}
-              <span
+          {/*    <span*/}
-                onClick={this.setState('theme', 'light')}
+          {/*      onClick={this.setState('theme', 'light')}*/}
-                title='set light'
+          {/*      title='set light'*/}
-              >
+          {/*    >*/}
-                <i className='fa fa-pencil-o' /> to light
+          {/*      <i className='fa fa-pencil-o' /> to light*/}
-              </span >
+          {/*    </span >*/}
-            ) : (
+          {/*  ) : (*/}
-              <span
+          {/*    <span*/}
-                onClick={
+          {/*      onClick={*/}
-                  this.changeTheme
+          {/*        this.changeTheme*/}
-                }
+          {/*      }*/}
-                title='set dark'
+          {/*      title='set dark'*/}
-              >
+          {/*    >*/}
-                <i className='fa fa-pencil' /> to dark
+          {/*      <i className='fa fa-pencil' /> to dark*/}
-              </span >
+          {/*    </span >*/}
-            )}
+          {/*  )}*/}
-          </button >
+          {/*</button >*/}
 
           {this.state.enableChristmasSnow && (
             <div

app/javascript/styles/bliss/about.scss

@@ -711,9 +711,9 @@
       }
 
       .account__avatar {
-        width: 44px;
+        width: $avatar-side;
-        height: 44px;
+        height: $avatar-side;
-        background-size: 44px 44px;
+        background-size: $avatar-side $avatar-side;
       }
     }
 

app/javascript/styles/bliss/components.scss

@@ -2197,27 +2197,16 @@ a.account__display-name {
     }
 
     .notification {
-      &__message {
+      background-color: $classic-base-color !important;
-        margin-left: 48px + 15px * 2;
+      padding: 1em 0;
-        padding-top: 15px;
+      color: $ui-highlight-color;
-      }
+      border-left: $ui-highlight-color 5px solid;
-
-      &__favourite-icon-wrapper {
-        left: -32px;
-      }
-
-      .status {
-        padding-top: 8px;
-      }
 
       .account {
+        padding: 0;
         padding-top: 8px;
       }
 
-      .account__avatar-wrapper {
-        margin-left: 17px;
-        margin-right: 15px;
-      }
     }
   }
 }
@@ -2320,7 +2309,7 @@ a.account__display-name {
   flex-direction: column;
   height: calc(100% - 10px);
   overflow-y: hidden;
-  z-index:1;
+  z-index: 1;
 
   .navigation-bar {
     padding-top: 20px;

app/javascript/styles/bliss/footer.scss

@@ -181,12 +181,12 @@
 
   @media all and(min-width: $maximum-width) {
     & {
-      width: 30vw;
+      width: 25vw;
     }
   }
   @media all and(max-width: $maximum-width) {
     & {
-      width: 27vw;
+      width: 22vw;
       height: 50vh;
       overflow-y: auto;
       padding-right: 1em;

app/javascript/styles/bliss/variables.scss

@@ -55,6 +55,8 @@ $small-breakpoint: 960px;
 $xs-top-breakpoint: 738px;
 $xs-breakpoint: 675px;
 
+// pictures
+$avatar-side: 55px;
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;

app/javascript/styles/bliss/widgets.scss

@@ -95,9 +95,9 @@
     }
 
     .account__avatar {
-      width: 44px;
+      width: $avatar-side;
-      height: 44px;
+      height: $avatar-side;
-      background-size: 44px 44px;
+      background-size: $avatar-side $avatar-side;
     }
   }
 }

app/javascript/styles/contrast/variables.scss

@@ -22,3 +22,4 @@ $action-button-color: #8d9ac2;
 $inverted-text-color: $black !default;
 $lighter-text-color: darken($ui-base-color, 6%) !default;
 $light-text-color: darken($ui-primary-color, 40%) !default;
+$avatar-side: 55px;

app/javascript/styles/custom.scss

@@ -1,26 +1,26 @@
-@import 'large_center';
+//@import 'large_center';
-// custom sheet made on https://www.cipherbliss.com
+//// custom sheet made on https://www.cipherbliss.com
-// Commonly used web colors
+//// Commonly used web colors
-$black: #fff; // Black
+//$black: #fff; // Black
-$white: #000; // White
+//$white: #000; // White
-$success-green: #6bbd77 !default; // Padua
+//$success-green: #6bbd77 !default; // Padua
-$error-red: #d4839b !default; // Cerise
+//$error-red: #d4839b !default; // Cerise
-$warning-red: #528dc8 !default; // Sunset Orange
+//$warning-red: #528dc8 !default; // Sunset Orange
-$gold-star: #00ec84 !default; // Dark Goldenrod
+//$gold-star: #00ec84 !default; // Dark Goldenrod
-
+//
-// User Interface Colors
+//// User Interface Colors
-$ui-base-color: #313644; // Midnight Express
+//$ui-base-color: #313644; // Midnight Express
-$ui-base-lighter-color: #bdd2d6;
+//$ui-base-lighter-color: #bdd2d6;
-$ui-primary-color: #a1ccff; // Echo Blue
+//$ui-primary-color: #a1ccff; // Echo Blue
-$ui-secondary-color: #7fc0ff; // Pattens Blue
+//$ui-secondary-color: #7fc0ff; // Pattens Blue
-$ui-highlight-color: #00a7d1; // Summer Sky
+//$ui-highlight-color: #00a7d1; // Summer Sky
-
+//$avatar-side: 55px;
-// Variables for components
+//// Variables for components
-$media-modal-media-max-width: 100%;
+//$media-modal-media-max-width: 100%;
-// put margins on top and bottom of image to avoid the screen covered by image.
+//// put margins on top and bottom of image to avoid the screen covered by image.
-$media-modal-media-max-height: 80%;
+//$media-modal-media-max-height: 80%;
-// fix
+//// fix
-
+//
-// then we import the rest of the world
+//// then we import the rest of the world
-@import 'application';
+//@import 'application';
-@import 'bliss/messaging';
+//@import 'bliss/messaging';

app/javascript/styles/mastodon/about.scss

@@ -751,9 +751,9 @@ $small-breakpoint: 960px;
       }
 
       .account__avatar {
-        width: 44px;
+        width: $avatar-side;
-        height: 44px;
+        height: $avatar-side;
-        background-size: 44px 44px;
+        background-size: $avatar-side $avatar-side;
       }
     }
 

app/javascript/styles/mastodon/components.scss

@@ -949,8 +949,12 @@
   }
 
   @keyframes fade {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   opacity: 1;
@@ -2175,7 +2179,7 @@ a.account__display-name {
   .scrollable {
     overflow: visible;
 
-    @supports(display: grid) {
+    @supports (display: grid) {
       contain: content;
     }
   }
@@ -2333,7 +2337,7 @@ a.account__display-name {
   .columns-area__panels__pane--navigational {
     display: none;
   }
-  .getting-started__footer{
+  .getting-started__footer {
     width: 250px;
   }
 }
@@ -2520,7 +2524,7 @@ a.account__display-name {
     overflow-y: auto;
   }
 
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -2537,7 +2541,7 @@ a.account__display-name {
 }
 
 .scrollable.fullscreen {
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: none;
   }
 }
@@ -3467,9 +3471,15 @@ a.status-card.compact:hover {
 }
 
 @keyframes loader-label {
-  0% { opacity: 0.25; }
+  0% {
-  30% { opacity: 1; }
+    opacity: 0.25;
-  100% { opacity: 0.25; }
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }
 
 .video-error-cover {
@@ -3758,7 +3768,7 @@ a.status-card.compact:hover {
   align-items: center;
   justify-content: center;
 
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -5163,6 +5173,7 @@ a.status-card.compact:hover {
   overflow: hidden;
   position: absolute;
 }
+
 /* End Media Gallery */
 
 .detailed,
@@ -5834,9 +5845,15 @@ noscript {
 }
 
 @keyframes flicker {
-  0% { opacity: 1; }
+  0% {
-  30% { opacity: 0.75; }
+    opacity: 1;
-  100% { opacity: 1; }
+  }
+  30% {
+    opacity: 0.75;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @media screen and (max-width: 630px) and (max-height: 400px) {
@@ -5869,13 +5886,13 @@ noscript {
       & > .icon-button.close {
         will-change: opacity transform;
         transition: opacity $duration * 0.5 $delay,
-                    transform $duration $delay;
+        transform $duration $delay;
       }
 
       & > .compose__action-bar .icon-button {
         will-change: opacity transform;
         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
-                    transform $duration $delay;
+        transform $duration $delay;
       }
     }
   }

app/javascript/styles/mastodon/variables.scss

@@ -1,18 +1,18 @@
 // Commonly used web colors
-$black: #000000;            // Black
+$black: #000000; // Black
-$white: #ffffff;            // White
+$white: #ffffff; // White
-$success-green: #79bd9a !default;    // Padua
+$success-green: #79bd9a !default; // Padua
-$error-red: #df405a !default;        // Cerise
+$error-red: #df405a !default; // Cerise
-$warning-red: #ff5050 !default;      // Sunset Orange
+$warning-red: #ff5050 !default; // Sunset Orange
-$gold-star: #ca8f04 !default;        // Dark Goldenrod
+$gold-star: #ca8f04 !default; // Dark Goldenrod
 
 $red-bookmark: $warning-red;
 
 // Values from the classic Mastodon UI
-$classic-base-color: #282c37;         // Midnight Express
+$classic-base-color: #282c37; // Midnight Express
-$classic-primary-color: #9baec8;      // Echo Blue
+$classic-primary-color: #9baec8; // Echo Blue
-$classic-secondary-color: #d9e1e8;    // Pattens Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
-$classic-highlight-color: #2b90d9;    // Summer Sky
+$classic-highlight-color: #2b90d9; // Summer Sky
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
@@ -23,10 +23,10 @@ $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-color: $classic-base-color !default; // Darkest
 $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-primary-color: $classic-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
 $ui-highlight-color: $classic-highlight-color !default;
 
 // Variables for texts
@@ -76,3 +76,5 @@ $no-gap-breakpoint: 415px;
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;
+
+$avatar-side: 55px;

app/javascript/styles/mastodon/widgets.scss

@@ -372,8 +372,8 @@
 
   .account__avatar {
     flex: 0 0 auto;
-    width: 36px;
+    width: $avatar-side;
-    height: 36px;
+    height: $avatar-side;
     border-radius: 50%;
     position: relative;
     margin-left: -10px;