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 | Bin 6431 -> 6451 bytes
 app/soapbox/components/thumb_navigation.js   | Bin 4600 -> 4614 bytes
 app/styles/components/icon.scss              |   8 ++++++++
 3 files changed, 8 insertions(+)

diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index eb7efbe3c67e9c26391fd457da10305eccec6b6a..3b358cb719426a084364a14af3c22cd2c2b999e6 100644
GIT binary patch
delta 107
zcmbPlwAp9_AJ^msJhGF^x%?*w@(E8~Euh1nmtT^ZmYJMbl9``ZtgZtRw^A=IOV`az
n&d<};EzK)RO-xa@Qb1PcoL`z(qF|?Bpu?qr3N|xx%kcpKl7=8Y

delta 65
zcmdmNG~Z|gAJ^pfT%ybh_6n01h|2OMrRL=57G>t81Cg%L<ZdCg$=Y20llKYePTtAI
U$Er}PS<5v!fmeL9AvY5r0Kfwi^#A|>

diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 64ba0206a4c7389e00de17cd93be534b9b27cd2e..eea799e3457bf50c27419ae41b83a44fd534747a 100644
GIT binary patch
delta 120
zcmeyN+@`W&JI7=hZrRBSoQ48i3aDUmAg8sL4!Wp<dU090Zf0_Ro~~|bUQuddin^6T
lUVcetT4r)$NoIbYbAD-FiGrPi0h-py6M2O<&*zNf007s?9o7H<

delta 85
zcmZou`JudFJBLJGeo1CpW^!UlW`3S?eraBbf}Mhag1y4zi+r+tNvSzGx<#3J=|H4w
eG&zS|ZSoZk!^!gex;)7GCa>of-Mp4Fk^=xTIvzOy

diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
index ebfed91c4d..2ffa232417 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 {