Make notifications quick-filter use consistent style with profile tabs (#9554)

1 files changed, 7 insertions, 46 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 595472263..40a1e3fae 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1484,52 +1484,6 @@ a.account__display-name {
   }
 }
 
-.notification__filter-bar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  background: $ui-base-color;
-
-  & > button {
-    position: relative;
-    flex-grow: 1;
-    color: $primary-text-color;
-    padding: 10px 5px 12px;
-    text-decoration: none;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 18px;
-    background: darken($ui-base-color, 4%);
-    border: 0;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
-    cursor: default;
-
-    &.active {
-      color: $secondary-text-color;
-
-      &::before,
-      &::after {
-        display: block;
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        width: 0;
-        height: 0;
-        transform: translateX(-50%);
-        border-style: solid;
-        border-width: 0 10px 10px;
-        border-color: transparent transparent lighten($ui-base-color, 8%);
-      }
-
-      &::after {
-        bottom: -1px;
-        border-color: transparent transparent $ui-base-color;
-      }
-    }
-  }
-}
-
 .notification__message {
   margin: 0 10px 0 68px;
   padding: 8px 0 0;
@@ -4846,12 +4800,19 @@ a.status-card.compact:hover {
   }
 }
 
+.notification__filter-bar,
 .account__section-headline {
   background: darken($ui-base-color, 4%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
   display: flex;
 
+  button {
+    background: darken($ui-base-color, 4%);
+    border: 0;
+  }
+
+  button,
   a {
     display: block;
     flex: 1 1 auto;