From 6517b7b9f02f8590a8f9c5aa04e3ef9efeb4e757 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 25 Nov 2022 13:54:43 +0100
Subject: [PATCH] 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
---
 .../glitch/styles/components/columns.scss     | 35 ++++---------------
 .../glitch/styles/mastodon-light/diff.scss    | 20 +++++++++++
 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 {
+    &:hover,
+    &:focus {
       background-color: darken($ui-base-color, 10%);
     }
 
-    &:focus {
-      background-color: darken($ui-base-color, 15%);
-    }
-
-    &:active {
-      background-color: darken($ui-base-color, 20%);
-    }
-
     &.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%);