fix: transition checkmark color too

src/routes/_components/IconButton.html

@@ -13,7 +13,7 @@
 >
   <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
   {#if checked}
-  <SvgIcon className="icon-button-svg icon-button-check" href="#fa-check" />
+    <SvgIcon className="icon-button-svg icon-button-check" ref:check href="#fa-check" />
   {/if}
 </button>
 <style>
@@ -157,8 +157,11 @@
       ariaLabel: ({ pressable, pressed, label, pressedLabel }) => ((pressable && pressed) ? pressedLabel : label)
     },
     methods: {
-      animate (animation) {
+      animate (animation, checkmarkAnimation) {
         this.refs.svg.animate(animation)
+        if (checkmarkAnimation && this.get().checked) {
+          this.refs.check.animate(checkmarkAnimation)
+        }
       },
       onClick (e) {
         this.fire('click', e)

src/routes/_components/status/StatusToolbar.html

@@ -77,7 +77,7 @@
   import { setReblogged } from '../../_actions/reblog.js'
   import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs/importShowStatusOptionsDialog.js'
   import { updateProfileAndRelationship } from '../../_actions/accounts.js'
-  import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
+  import { CHECKMARK_ANIMATION, FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
   import { on } from '../../_utils/eventBus.js'
   import { announceAriaLivePolite } from '../../_utils/announceAriaLivePolite.js'
 
@@ -120,7 +120,7 @@
         const newFavoritedValue = !favorited
         /* no await */ setFavorited(originalStatusId, newFavoritedValue)
         if (newFavoritedValue) {
-          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
+          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION, CHECKMARK_ANIMATION)
         }
         if (announce) {
           announceAriaLivePolite(newFavoritedValue ? 'intl.favorited' : 'intl.unfavorited')
@@ -131,7 +131,7 @@
         const newRebloggedValue = !reblogged
         /* no await */ setReblogged(originalStatusId, newRebloggedValue)
         if (newRebloggedValue) {
-          this.refs.reblogIcon.animate(REBLOG_ANIMATION)
+          this.refs.reblogIcon.animate(REBLOG_ANIMATION, CHECKMARK_ANIMATION)
         }
         if (announce) {
           announceAriaLivePolite(newRebloggedValue ? 'intl.reblogged' : 'intl.unreblogged')

src/routes/_static/animations.js

@@ -1,39 +1,37 @@
-export const FAVORITE_ANIMATION = [
-  {
-    properties: [
-      { transform: 'scale(1)' },
-      { transform: 'scale(2)' },
-      { transform: 'scale(1)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'ease-in-out'
-    }
-  },
-  {
-    properties: [
-      { fill: 'var(--action-button-fill-color)' },
-      { fill: 'var(--action-button-fill-color-pressed)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'linear'
-    }
+const growBigThenSmall = {
+  properties: [
+    { transform: 'scale(1)' },
+    { transform: 'scale(2)' },
+    { transform: 'scale(1)' }
+  ],
+  options: {
+    duration: 333,
+    easing: 'ease-in-out'
   }
+}
+
+const fadeColorToPressedState = {
+  properties: [
+    { fill: 'var(--action-button-fill-color)' },
+    { fill: 'var(--action-button-fill-color-pressed)' }
+  ],
+  options: {
+    duration: 333,
+    easing: 'linear'
+  }
+}
+
+export const FAVORITE_ANIMATION = [
+  growBigThenSmall,
+  fadeColorToPressedState
 ]
 
 export const REBLOG_ANIMATION = FAVORITE_ANIMATION
 
 export const FOLLOW_BUTTON_ANIMATION = [
-  {
-    properties: [
-      { transform: 'scale(1)' },
-      { transform: 'scale(2)' },
-      { transform: 'scale(1)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'ease-in-out'
-    }
-  }
+  growBigThenSmall
+]
+
+export const CHECKMARK_ANIMATION = [
+  fadeColorToPressedState
 ]