From 6d77bc2bd5e96ca213496b726afb3c821e4d4fd7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Mar 2024 00:28:16 +0200
Subject: [PATCH] more transparent panels fixes

---
 src/components/button.style.js               | 4 ++--
 src/components/timeline/timeline.js          | 8 ++++----
 src/components/timeline/timeline.scss        | 7 ++++++-
 src/components/user_profile/user_profile.vue | 2 ++
 src/panel.scss                               | 2 +-
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 4910a5ac18..6fec67a0b2 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -68,14 +68,14 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1050b87a64..47e4a45e50 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -77,13 +77,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index cf621bbbde..f8529a726a 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -29,12 +29,17 @@
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 0ade78cd24..b3f489076d 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -74,6 +74,7 @@
         <div
           v-if="followsTabVisible"
           key="followees"
+          class="panel-body"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -88,6 +89,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          class="panel-body"
           key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
diff --git a/src/panel.scss b/src/panel.scss
index 0833976544..cc208e623d 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -37,7 +37,7 @@
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;
-    margin: 1em;
+    padding: 1em;
     text-align: center;
   }