diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
index 6f73808b5..ffeffe487 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
onClick={this.onClick("mention")}
title={intl.formatMessage(tooltips.mentions)}
>
-
+
);
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index e68c6cac0..c64f0758c 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -358,63 +358,61 @@
.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;
- flex-shrink: 0;
+ gap: 8px;
+ padding: 6px;
+ cursor: default;
+ background: darken($ui-base-color, 4%);
+ a,
button {
- background: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+ padding: 8px 6px;
+ min-width: 32px;
border: 0;
- margin: 0;
+ border-radius: var(--button-border-radius);
+ color: $ui-primary-color;
+ line-height: 20px;
+ text-decoration: none;
+ background: transparent;
+
+ &:focus-visible,
+ &:hover {
+ background: darken($ui-base-color, 10%);
+ }
}
- button,
- a {
- display: block;
- flex: 1 1 auto;
- color: $darker-text-color;
- padding: 15px 0;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- text-decoration: none;
+ a.active,
+ button.active {
+ background: lighten($ui-base-color, 4%);
+
+ &:focus-visible,
+ &:hover {
+ background: lighten($ui-base-color, 10%);
+ }
+ }
+
+ a:not(:first-child),
+ button:not(:first-child) {
position: relative;
- &.active {
- color: $primary-text-color;
-
- &::before {
- display: block;
- content: '';
- position: absolute;
- bottom: -1px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 4px;
- background: $highlight-text-color;
- }
+ &::before {
+ position: absolute;
+ top: 6px;
+ right: calc(100% + 3px);
+ width: 2px;
+ height: 24px;
+ background: lighten($ui-base-color, 10%);
+ content: '';
}
}
- &.directory__section-headline {
- background: darken($ui-base-color, 2%);
- border-bottom-color: transparent;
-
- a,
- button {
- &.active {
- &::before {
- display: none;
- }
-
- &::after {
- border-color: transparent transparent darken($ui-base-color, 7%);
- }
- }
- }
+ svg.gts-icon {
+ display: block;
+ --size: 20px;
}
}
diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss
index 34dcbab56..423d66228 100644
--- a/app/javascript/flavours/glitch/styles/gts.scss
+++ b/app/javascript/flavours/glitch/styles/gts.scss
@@ -1,4 +1,12 @@
/* 🦥 GoToSocial */
+
+/* Variables */
+:root {
+ --drawer-border-radius: 8px;
+ --button-border-radius: 6px;
+}
+
+/* Diff */
.gts-icon {
--size: 1em;
display: inline-block;
diff --git a/public/icons.svg b/public/icons.svg
index 4a755e04b..797202cbb 100644
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -21,6 +21,9 @@
+
+
+
@@ -64,10 +67,10 @@
-
+
@@ -95,6 +98,9 @@
+
+
+
@@ -123,6 +129,9 @@
+
+
+
@@ -139,6 +148,9 @@
+
+
+
@@ -197,6 +209,17 @@
+
+
+
+
+
+
+
+
+
+
+