From fa76be2f9a478a1b599ba0b66184577cd89209c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 18:37:16 +0200
Subject: [PATCH] check for betterShadow support in the userAvatar instead of
 its parents

---
 src/components/chat_message/chat_message.js  |  1 -
 src/components/chat_message/chat_message.vue |  1 -
 src/components/input.style.js                |  2 +-
 src/components/notification/notification.js  |  1 -
 src/components/notification/notification.vue |  1 -
 src/components/status/status.js              |  3 ---
 src/components/status/status.vue             |  2 --
 src/components/user_avatar/user_avatar.js    |  4 ++--
 src/components/user_card/user_card.js        |  1 -
 src/components/user_card/user_card.vue       | 11 ++---------
 10 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index ebe09814c..530a1ec70 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -66,7 +66,6 @@ const ChatMessage = {
       return this.message.attachments.length > 0
     },
     ...mapState({
-      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 166889d71..7e3498197 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -20,7 +20,6 @@
         >
           <UserAvatar
             :compact="true"
-            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>
diff --git a/src/components/input.style.js b/src/components/input.style.js
index c60ac1e4e..30715ec1d 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -18,7 +18,7 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
         '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 0e938c422..043be1b1a 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -43,7 +43,6 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 044d43dbc..0930e0990 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -48,7 +48,6 @@
           <UserAvatar
             class="post-avatar"
             :compact="true"
-            :better-shadow="betterShadow"
             :user="notification.from_profile"
           />
         </UserPopover>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ccecaac7e..e248b1ba2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -416,9 +416,6 @@ const Status = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    betterShadow () {
-      return this.$store.state.interface.browserSupport.cssFilter
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b5b984833..cecc9d69e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -65,7 +65,6 @@
           v-if="retweet"
           class="left-side repeater-avatar"
           :show-actor-type-indicator="showActorTypeIndicator"
-          :better-shadow="betterShadow"
           :user="statusoid.user"
         />
         <div class="right-side faint">
@@ -120,7 +119,6 @@
                 class="post-avatar"
                 :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :better-shadow="betterShadow"
                 :user="status.user"
               />
             </UserPopover>
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index ffd81f87c..8cd1eeb43 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -15,14 +15,14 @@ library.add(
 const UserAvatar = {
   props: [
     'user',
-    'betterShadow',
     'compact',
     'showActorTypeIndicator'
   ],
   data () {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   components: {
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index b1fe2e8f3..1d2e19467 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -48,7 +48,6 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c2d9899e3..ed5401589 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -16,10 +16,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -30,7 +27,6 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
-            :better-shadow="betterShadow"
             :user="user"
             @click="avatarAction"
           />
@@ -38,10 +34,7 @@
             v-else
             :to="userProfileLink(user)"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
           </router-link>
           <div class="user-summary">
             <div class="top-line">