Fix pillbar buttons in light theme (#1972)

* Simplify pillbar button design and make it more consistent with toggles

* Fix pillbar buttons in light theme

Fixes #1970

2 files changed, 26 insertions, 29 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index c61815e07..71edf7fb3 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -558,6 +558,7 @@ $ui-header-height: 55px;
   border-radius: 4px;
   margin-bottom: 10px;
   align-items: stretch;
+  gap: 2px;
 }
 
 .pillbar-button {
@@ -565,7 +566,6 @@ $ui-header-height: 55px;
   color: #fafafa;
   padding: 2px;
   margin: 0;
-  margin-left: 2px;
   font-size: inherit;
   flex: auto;
   background-color: $ui-base-color;
@@ -578,43 +578,20 @@ $ui-header-height: 55px;
   }
 
   &:not([disabled]) {
-    &:hover {
-      background-color: darken($ui-base-color, 10%);
-    }
-
+    &:hover,
     &:focus {
-      background-color: darken($ui-base-color, 15%);
-    }
-
-    &:active {
-      background-color: darken($ui-base-color, 20%);
+      background-color: darken($ui-base-color, 10%);
     }
 
     &.active {
-      background-color: $ui-highlight-color;
-      box-shadow: inset 0 5px darken($ui-highlight-color, 20%);
-
-      &:hover {
-        background-color: lighten($ui-highlight-color, 10%);
-        box-shadow: inset 0 5px darken($ui-highlight-color, 10%);
-      }
+      background-color: darken($ui-highlight-color, 2%);
 
+      &:hover,
       &:focus {
-        background-color: lighten($ui-highlight-color, 15%);
-        box-shadow: inset 0 5px darken($ui-highlight-color, 5%);
-      }
-
-      &:active {
-        background-color: lighten($ui-highlight-color, 20%);
-        box-shadow: inset 0 5px $ui-highlight-color;
+        background-color: $ui-highlight-color;
       }
     }
   }
-
-  /* TODO: check RTL? */
-  &:first-child {
-    margin-left: 0;
-  }
 }
 
 .limited-account-hint {
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 6489c2f80..9fc1aed2a 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -712,6 +712,26 @@ html {
 
 // Glitch-soc-specific changes
 
+.pillbar-button {
+  background: $ui-secondary-color;
+
+  &:not([disabled]) {
+    &:hover,
+    &:focus {
+      background: darken($ui-secondary-color, 10%);
+    }
+
+    &.active {
+      background-color: darken($ui-highlight-color, 2%);
+
+      &:hover,
+      &:focus {
+        background: lighten($ui-highlight-color, 10%);
+      }
+    }
+  }
+}
+
 .glitch.local-settings {
   background: $ui-base-color;
   border: 1px solid lighten($ui-base-color, 8%);