修改了喜欢的图标颜色和动画

app/javascript/mastodon/components/status_action_bar.js

@@ -251,7 +251,7 @@ class StatusActionBar extends ImmutablePureComponent {
       <div className='status__action-bar'>
         <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'comments-o' : replyIcon} onClick={this.handleReplyClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('replies_count'))}</span></div>
         <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />{publicStatus && <span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('reblogs_count'))}</span>}</div>
-        <div className='status__action-bar__counter'><IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('favourites_count'))}</span></div>
+        <div className='status__action-bar__counter'><IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='heart' onClick={this.handleFavouriteClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('favourites_count'))}</span></div>
         {shareButton}
 
         <div className='status__action-bar-dropdown'>

app/javascript/mastodon/features/favourited_statuses/index.js

@@ -76,7 +76,7 @@ class Favourites extends ImmutablePureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.heading)}>
         <ColumnHeader
-          icon='thumbs-up'
+          icon='heart'
           title={intl.formatMessage(messages.heading)}
           onPin={this.handlePin}
           onMove={this.handleMove}

app/javascript/mastodon/features/getting_started/index.js

@@ -126,7 +126,7 @@ class GettingStarted extends ImmutablePureComponent {
 
     navItems.push(
       <ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
-      <ColumnLink key={i++} icon='thumbs-up' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
+      <ColumnLink key={i++} icon='heart' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
       <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
     );
 

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

@@ -71,7 +71,7 @@ class FilterBar extends React.PureComponent {
           onClick={this.onClick('favourite')}
           title={intl.formatMessage(tooltips.favourites)}
         >
-          <Icon id='thumbs-up' fixedWidth />
+          <Icon id='heart' fixedWidth />
         </button>
         <button
           className={selectedFilter === 'reblog' ? 'active' : ''}

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

@@ -149,7 +149,7 @@ class Notification extends ImmutablePureComponent {
         <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='thumbs-up' className='star-icon' fixedWidth />
+              <Icon id='heart' className='star-icon' fixedWidth />
             </div>
 
             <span title={notification.get('created_at')}>

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

@@ -196,7 +196,7 @@ class ActionBar extends React.PureComponent {
       <div className='detailed-status__action-bar'>
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
-        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} /></div>
+        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='heart' onClick={this.handleFavouriteClick} /></div>
         {shareButton}
 
         <div className='detailed-status__action-bar-dropdown'>

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

@@ -190,7 +190,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     if (this.context.router) {
       favouriteLink = (
         <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
-          <Icon id='thumbs-up' />
+          <Icon id='heart' />
           <span className='detailed-status__favorites'>
             <FormattedNumber value={status.get('favourites_count')} />
           </span>
@@ -199,7 +199,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     } else {
       favouriteLink = (
         <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
-          <Icon id='thumbs-up' />
+          <Icon id='heart' />
           <span className='detailed-status__favorites'>
             <FormattedNumber value={status.get('favourites_count')} />
           </span>

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

@@ -17,7 +17,7 @@ const NavigationPanel = () => (
     <NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
     <NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='thumbs-up' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='heart' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
     {profile_directory && <NavLink className='column-link column-link--transparent' to='/directory'><Icon className='column-link__icon' id='address-book-o' fixedWidth /><FormattedMessage id='getting_started.directory' defaultMessage='Profile directory' /></NavLink>}
 

app/javascript/styles/closed-social/global.scss

@@ -65,3 +65,19 @@ div {
   }
 }
 
+@keyframes like {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.75);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.no-reduce-motion .icon-button.active {
+	i.fa-heart {
+			animation: like 1s;
+	}
+}

app/javascript/styles/mastodon/variables.scss

@@ -4,7 +4,7 @@ $white: #ffffff;            // White
 $success-green: #79bd9a !default;    // Padua
 $error-red: #df405a !default;        // Cerise
 $warning-red: #ff5050 !default;      // Sunset Orange
-$gold-star: #ca8f04 !default;        // Dark Goldenrod
+$gold-star: #e04040 !default;        // ::Change star to heart
 
 // Values from the classic Mastodon UI
 $classic-base-color: #282c37;         // Midnight Express

app/javascript/styles/thu/diff.scss

@@ -1,13 +1,5 @@
 /* Fil */
 /* Status */
-@keyframes "spin" {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
 /* Drawer */
 body {
 	background: rgba(73, 58, 99, 1) url(https://www.tsinghua.edu.cn/publish/thu2018/images/footer.jpg) no-repeat fixed;
@@ -213,13 +205,6 @@ body.theme-thu {
 	border-bottom: 1px solid #ccc;
 	box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.05);
 }
-button.icon-button.active {
-	i.fa-retweet {
-		&:after {
-			animation: spin 0.5s linear;
-		}
-	}
-}
 .drawer__inner {
 	background: rgb(52, 40, 62, 0.7);
 	border-radius: 0.25rem;

app/views/statuses/_detailed_status.html.haml

@@ -75,7 +75,7 @@
         = " "
     ·
     = link_to remote_interaction_path(status, type: :favourite), class: 'modal-button detailed-status__link' do
-      = fa_icon('thumbs-up')
+      = fa_icon('heart')
       %span.detailed-status__favorites>= number_to_human status.favourites_count, strip_insignificant_zeros: true
       = " "
 

app/views/statuses/_simple_status.html.haml

@@ -61,4 +61,4 @@
       - else
         = fa_icon 'envelope fw'
     = link_to remote_interaction_path(status, type: :favourite), class: 'status__action-bar-button icon-button modal-button', style: 'font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px;' do
-      = fa_icon 'thumbs-up fw'
+      = fa_icon 'heart fw'