Refactor donation component styling by renaming classes and applying revalidation state to the main container

Author: robertpiosik

packages/ui/src/components/editor/Donations/Donations.module.scss

@@ -12,6 +12,16 @@
     align-items: center;
     gap: var(--padding-8px);
   }
+}
+
+.donations {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &--revalidating {
+    opacity: var(--dimmed-opacity);
+  }
 
   &__donation {
     display: flex;
@@ -42,10 +52,6 @@
   animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-.revalidating {
-  opacity: var(--dimmed-opacity);
-}
-
 @keyframes pulse {
   50% {
     opacity: 0.5;

packages/ui/src/components/editor/Donations/Donations.tsx

@@ -132,21 +132,21 @@ export const Donations: React.FC<DonationsProps> = (props) => {
         <>
           {props.is_fetching ? (
             <>
-              <div className={styles.container__donation}>
+              <div className={styles.donations__donation}>
                 <div
                   className={styles.skeleton}
                   style={{ width: '50%', height: '14px' }}
                 />
                 <div className={styles.skeleton} style={{ height: '30px' }} />
               </div>
-              <div className={styles.container__donation}>
+              <div className={styles.donations__donation}>
                 <div
                   className={styles.skeleton}
                   style={{ width: '70%', height: '14px' }}
                 />
                 <div className={styles.skeleton} style={{ height: '30px' }} />
               </div>
-              <div className={styles.container__donation}>
+              <div className={styles.donations__donation}>
                 <div
                   className={styles.skeleton}
                   style={{ width: '40%', height: '14px' }}
@@ -157,19 +157,19 @@ export const Donations: React.FC<DonationsProps> = (props) => {
           ) : (
             <>
               <div
-                className={cn({
-                  [styles['revalidating']]: props.is_revalidating
+                className={cn(styles.donations, {
+                  [styles['donations--revalidating']]: props.is_revalidating
                 })}
               >
                 {props.donations?.map((donation, index) => (
-                  <div className={styles.container__donation} key={index}>
+                  <div className={styles.donations__donation} key={index}>
                     {(() => {
                       const { username, href, after_text } =
                         parse_support_message(donation.support_message)
                       const title = `${username} ${after_text}`
                       return (
                         <div
-                          className={styles.container__donation__header}
+                          className={styles.donations__donation__header}
                           title={title}
                         >
                           <strong>
@@ -186,7 +186,7 @@ export const Donations: React.FC<DonationsProps> = (props) => {
                       )
                     })()}
                     {donation.support_note && (
-                      <div className={styles.container__donation__note}>
+                      <div className={styles.donations__donation__note}>
                         {donation.support_note}
                       </div>
                     )}