fix collapsed notifications incorrect styles

6 files changed, 18 insertions, 26 deletions

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 5c425200..632ae6e9 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -247,7 +247,6 @@
         />
         <template v-else>
           <StatusContent
-            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
             :status="notification.status"
           />
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1acccb8d..d749890d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -60,20 +60,6 @@
     padding: 0.6em;
     min-width: 0;
 
-    .RichContent {
-      a {
-        --link: var(--linkFaint);
-      }
-
-      .greentext {
-        --funtextGreentext: var(--funtextGreentextFaint);
-      }
-
-      .cyantext {
-        --funtextCyantext: var(--funtextCyantextFaint);
-      }
-    }
-
     .avatar-container {
       width: 32px;
       height: 32px;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ff14a58a..99d7daca 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -79,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -277,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 73eb07e9..962fd5bb 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,6 +1,15 @@
 .RichContent {
   font-family: var(--font);
 
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fb356360..f21bcc80 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -11,6 +11,7 @@
       >
         <RichContent
           class="media-body summary"
+          :faint="compact"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
         />
@@ -48,6 +49,7 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
+          :faint="compact"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index a9db6b12..e977d489 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -62,15 +62,5 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
-
-  &.faint {
-    .greentext {
-      color: var(--funtextGreentextFaint);
-    }
-
-    .cyantext {
-      color: var(--funtextCyantextFaint);
-    }
-  }
 }
 </style>