From 30973bd05f98045a60722876562077f2dcf8038e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Oct 2021 17:49:44 -0500
Subject: [PATCH] Rotate unread notification bell icon with CSS instead of
 relying on a separate icon

---
 app/soapbox/components/primary_navigation.js | 7 +++++--
 app/soapbox/components/thumb_navigation.js   | 7 +++++--
 app/styles/components/icon.scss              | 8 ++++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index eb7efbe3c..3b358cb71 100644
--- a/app/soapbox/components/primary_navigation.js
+++ b/app/soapbox/components/primary_navigation.js
@@ -63,8 +63,11 @@ class PrimaryNavigation extends React.PureComponent {
           {account && (
             <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
               <IconWithCounter
-                src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
-                className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
+                src={require('@tabler/icons/icons/bell.svg')}
+                className={classNames('primary-navigation__icon', {
+                  'svg-icon--active': location.pathname === '/notifications',
+                  'svg-icon--unread': notificationCount > 0,
+                })}
                 count={notificationCount}
               />
               <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 64ba0206a..eea799e34 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -56,8 +56,11 @@ class ThumbNavigation extends React.PureComponent {
         {account && (
           <NavLink to='/notifications' className='thumb-navigation__link'>
             <IconWithCounter
-              src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
-              className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
+              src={require('@tabler/icons/icons/bell.svg')}
+              className={classNames({
+                'svg-icon--active': location.pathname === '/notifications',
+                'svg-icon--unread': notificationCount > 0,
+              })}
               count={notificationCount}
             />
             <span>
diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
index ebfed91c4..2ffa23241 100644
--- a/app/styles/components/icon.scss
+++ b/app/styles/components/icon.scss
@@ -4,11 +4,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: 0.2s;
 
   svg {
     // Apparently this won't skew the image as long as it has a viewbox
     width: 100%;
     height: 100%;
+    transition: 0.2s;
   }
 
   &--active {
@@ -39,6 +41,12 @@
       }
     }
   }
+
+  &--unread {
+    svg.icon-tabler-bell {
+      transform: rotate(45deg);
+    }
+  }
 }
 
 .icon-button > div {