From ef12916babbc128f339274d51f7f493e27420afb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 9 May 2023 18:03:26 +0800
Subject: [PATCH] New "shazam" CSS effect utility lolol

I might rename this in the future
---
 src/components/account-info.css | 11 -----
 src/components/account-info.jsx |  7 ++-
 src/index.css                   | 23 ++++++++++
 src/pages/notifications.jsx     | 78 +++++++++++++++++----------------
 4 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 1133c8e3..ad10b696 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -199,17 +199,6 @@
   margin: 0;
 }
 
-.account-container .common-followers {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 0.5s ease-in-out;
-}
-.account-container .common-followers[hidden] {
-  grid-template-rows: 0fr;
-}
-.account-container .common-followers > .common-followers-inner {
-  overflow: hidden;
-}
 .account-container .common-followers p {
   font-size: 90%;
   color: var(--text-insignificant-color);
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index a274a8c8..a1e30168 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -487,8 +487,11 @@ function RelatedActions({ info, instance, authenticated }) {
 
   return (
     <>
-      <div class="common-followers" hidden={!familiarFollowers?.length}>
-        <div class="common-followers-inner">
+      <div
+        class="common-followers shazam-container no-animation"
+        hidden={!familiarFollowers?.length}
+      >
+        <div class="shazam-container-inner">
           <p>
             Also followed by{' '}
             <span class="ib">
diff --git a/src/index.css b/src/index.css
index fb6051ad..f3ca4399 100644
--- a/src/index.css
+++ b/src/index.css
@@ -391,3 +391,26 @@ code {
     object-position: 50% 50%;
   }
 }
+
+@keyframes shazam {
+  0% {
+    grid-template-rows: 0fr;
+  }
+  100% {
+    grid-template-rows: 1fr;
+  }
+}
+.shazam-container {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.5s ease-in-out;
+}
+.shazam-container:not(.no-animation) {
+  animation: shazam 0.5s ease-in-out both !important;
+}
+.shazam-container[hidden] {
+  grid-template-rows: 0fr;
+}
+.shazam-container-inner {
+  overflow: hidden;
+}
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index b3779f2c..61675ec7 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -235,44 +235,48 @@ function Notifications() {
           )}
         </header>
         {announcements.length > 0 && (
-          <details class="announcements">
-            <summary>
-              <span>
-                <Icon icon="announce" class="announcement-icon" size="l" />{' '}
-                <b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
-                <small class="insignificant">{instance}</small>
-              </span>
-              {announcements.length > 1 && (
-                <span class="announcements-nav-buttons">
-                  {announcements.map((announcement, index) => (
-                    <button
-                      type="button"
-                      class="plain2 small"
-                      onClick={() => {
-                        announcementsListRef.current?.children[
-                          index
-                        ].scrollIntoView({ behavior: 'smooth' });
-                      }}
-                    >
-                      {index + 1}
-                    </button>
+          <div class="shazam-container">
+            <div class="shazam-container-inner">
+              <details class="announcements">
+                <summary>
+                  <span>
+                    <Icon icon="announce" class="announcement-icon" size="l" />{' '}
+                    <b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
+                    <small class="insignificant">{instance}</small>
+                  </span>
+                  {announcements.length > 1 && (
+                    <span class="announcements-nav-buttons">
+                      {announcements.map((announcement, index) => (
+                        <button
+                          type="button"
+                          class="plain2 small"
+                          onClick={() => {
+                            announcementsListRef.current?.children[
+                              index
+                            ].scrollIntoView({ behavior: 'smooth' });
+                          }}
+                        >
+                          {index + 1}
+                        </button>
+                      ))}
+                    </span>
+                  )}
+                </summary>
+                <ul
+                  class={`announcements-list-${
+                    announcements.length > 1 ? 'multiple' : 'single'
+                  }`}
+                  ref={announcementsListRef}
+                >
+                  {announcements.map((announcement) => (
+                    <li>
+                      <AnnouncementBlock announcement={announcement} />
+                    </li>
                   ))}
-                </span>
-              )}
-            </summary>
-            <ul
-              class={`announcements-list-${
-                announcements.length > 1 ? 'multiple' : 'single'
-              }`}
-              ref={announcementsListRef}
-            >
-              {announcements.map((announcement) => (
-                <li>
-                  <AnnouncementBlock announcement={announcement} />
-                </li>
-              ))}
-            </ul>
-          </details>
+                </ul>
+              </details>
+            </div>
+          </div>
         )}
         {followRequests.length > 0 && (
           <div class="follow-requests">