[feature] add animations to status bar icons

When activated the status bar (under a toot) icons now do a cute lil animation, courtesy of Tangerine UI.

.editorconfig

@@ -3,5 +3,5 @@ root = true
 [*.scss]
 indent_size = 2
 
-[login.scss]
+[{login.scss,**/tangerine/**/*.scss}]
 indent_size = 4

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -312,9 +312,9 @@ class StatusActionBar extends ImmutablePureComponent {
           counter={showReplyCount ? status.get("replies_count") : undefined}
           obfuscateCount
         />
-        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={status.get('reblogged') ? 'rocket-launch-filled' : 'rocket-launch'} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon={status.get('favourited') ? 'star-filled' : 'star'} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
-        <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon={status.get('bookmarked') ? 'bookmark-filled' : 'bookmark'} onClick={this.handleBookmarkClick} />
+        <IconButton className={classNames('status__action-bar-button status-boost', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={status.get('reblogged') ? 'rocket-launch-filled' : 'rocket-launch'} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className='status__action-bar-button star-icon status-favourite' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon={status.get('favourited') ? 'star-filled' : 'star'} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar-button bookmark-icon status-bookmark' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon={status.get('bookmarked') ? 'bookmark-filled' : 'bookmark'} onClick={this.handleBookmarkClick} />
 
         {filterButton}
 

app/javascript/flavours/glitch/styles/index.scss

@@ -24,3 +24,4 @@
 @import 'rich_text';
 
 @import 'gts';
+@import 'tangerine/_config';

app/javascript/flavours/glitch/styles/tangerine/_config.scss

@@ -0,0 +1,10 @@
+/*  Tangerine UI 🍊
+
+    Large parts of this work are from Tangerine UI by @nileane@nileane.fr: https://github.com/nileane/TangerineUI-for-Mastodon/
+*/
+
+/* 🛠️ Config */
+@import 'keyframes';
+
+/* 🧩 Components */
+@import 'status-bar';

app/javascript/flavours/glitch/styles/tangerine/keyframes.scss

@@ -0,0 +1,130 @@
+/* 🔑 Keyframes */
+@keyframes bounce {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.6);
+    }
+    75% {
+        transform: scale(0.8);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce-sml {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.25);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce-vertical {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-30%);
+    }
+    75% {
+        transform: translateY(20%);
+    }
+    100% {
+        transform: translate(0);
+    }
+}
+
+@keyframes launch {
+    0% {
+        transform: translate(0);
+        opacity: 0;
+    }
+    5% {
+        transform: translate(0);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(200%, -200%);
+        opacity: 0;
+    }
+    80% {
+        transform: translate(200%, -200%);
+        opacity: 0;
+    }
+    85% {
+        transform: translate(-20%, 20%);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadein-short {
+    from {
+        transform: translate(0, -10px);
+        opacity: 0;
+    }
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes slowin {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rotate-bounce {
+    0% {
+        transform: rotate(0) scale(1);
+    }
+    60% {
+        transform: rotate(80deg) scale(1.2);
+    }
+    100% {
+        transform: rotate(60deg) scale(1.1);
+    }
+}
+
+@keyframes bell-ring {
+    0% {
+        transform: rotate(0);
+    }
+    40% {
+        transform: rotate(15deg);
+    }
+    70% {
+        transform: rotate(-15deg);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}

app/javascript/flavours/glitch/styles/tangerine/status-bar.scss

@@ -0,0 +1,12 @@
+/* 🚥 Status Bar */
+.status-favourite.active svg {
+    animation: bounce 0.4s ease-out;
+}
+
+.status-boost.active svg {
+    animation: launch 1.2s ease-in 1;
+}
+
+.status-bookmark.active svg {
+    animation: bounce-vertical 0.4s ease-out;
+}