changelog.d/visual.change

@@ -2,4 +2,3 @@ Combined subject and content fields in post form (visually)
 Fixes for some elements not scaling with user UI scale
 Moved post form's emoji button into input field
 Minor visual changes and fixes
-Clicking on fav/rt/emoji notifications' contents expands/collapses it

src/components/notification/notification.scss

@@ -1,4 +1,9 @@
 // TODO Copypaste from Status, should unify it somehow
+.NotificationParent {
+  &.-expandable {
+    cursor: pointer;
+  }
+}
 
 .Notification {
   border-bottom: 1px solid;
@@ -6,9 +11,6 @@
   overflow-wrap: break-word;
   text-wrap: pretty;
 
-  .status-content {
-    cursor: pointer;
-  }
 
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */

src/components/notification/notification.vue

@@ -13,6 +13,7 @@
     class="NotificationParent"
     :class="{ '-expandable': expandable }"
     :aria-controls="'notif-' +notification.id"
+    @click="toggleStatusExpanded()"
     v-else
   >
     <div
@@ -253,11 +254,9 @@
         />
         <template v-else>
           <StatusContent
-            class="status-content"
             :compact="!statusExpanded"
             :status="notification.status"
             :collapse="statusExpanded"
-            @click="toggleStatusExpanded()"
           />
         </template>
       </div>

src/components/status_action_buttons/action_button.scss

@@ -26,8 +26,8 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
-    margin-left: 0.75em;
-    margin-right: 0.125em;
+    margin-left: 1em;
+    margin-right: 0.5em;
   }
 
   &.-pin {

src/components/user_card/user_card.scss

@@ -205,6 +205,9 @@
       line-height: 2em;
       padding: 0.6em;
       margin: -0.6em;
+      filter: drop-shadow(0 0 5em var(--profileTint))
+              drop-shadow(0 0 0.5em var(--profileTint))
+              drop-shadow(0 0 0.2em var(--profileTint));
 
       &.edit-banner-button {
         width: auto;
@@ -270,9 +273,10 @@
     // big one
     z-index: 1;
     line-height: 2em;
-    filter: drop-shadow(0 0 5em var(--profileTint))
-            drop-shadow(0 0 0.5em var(--profileTint))
-            drop-shadow(0 0 0.2em var(--profileTint));
+    text-shadow:
+      0 0 1em var(--profileTint),
+      0 0 0.5em var(--profileTint),
+      0 0 0.2em var(--profileTint);
 
     .alert {
       text-shadow: none;
@@ -339,7 +343,6 @@
       font-size: 0.9em;
       font-size: calc(max(90%, 2.5cqw));
       line-height: 1.5;
-      margin-top: 0.5em;
     }
 
     .lock-icon {