diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx
index 159b109d7..56231832d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@@ -19,7 +19,7 @@ const Account = connect(state => ({
account: state.getIn(["accounts", me]),
}))(({ account }) => (
-
+
));
@@ -108,8 +108,7 @@ class Header extends PureComponent {
return (
-
-
+
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index e3b2feb54..94c7581c2 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -56,57 +56,6 @@
$ui-header-height: 55px;
-.ui__header {
- display: none;
- box-sizing: border-box;
- height: $ui-header-height;
- position: sticky;
- top: 0;
- z-index: 3;
- justify-content: space-between;
- align-items: center;
-
- &__logo {
- display: inline-flex;
- padding: 15px;
-
- .logo {
- height: $ui-header-height - 30px;
- width: auto;
- }
-
- .logo--wordmark {
- display: none;
- }
-
- @media screen and (width >= 320px) {
- .logo--wordmark {
- display: block;
- }
-
- .logo--icon {
- display: none;
- }
- }
- }
-
- &__links {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 0 10px;
- overflow: hidden;
-
- .button {
- flex: 0 0 auto;
- }
-
- .button-tertiary {
- flex-shrink: 1;
- }
- }
-}
-
.tabs-bar__wrapper {
background: darken($ui-base-color, 8%);
position: sticky;
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index a5012f56c..8e00f2eab 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -277,8 +277,8 @@
.layout-single-column .ui__header {
display: flex;
- background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: $ui-base-color;
}
.layout-single-column {
diff --git a/app/javascript/flavours/glitch/styles/gts/_config.scss b/app/javascript/flavours/glitch/styles/gts/_config.scss
index 32e914887..891676067 100644
--- a/app/javascript/flavours/glitch/styles/gts/_config.scss
+++ b/app/javascript/flavours/glitch/styles/gts/_config.scss
@@ -12,3 +12,4 @@
/* 🧩 Components */
@import "media-gallery";
@import "status";
+@import "ui-header";
diff --git a/app/javascript/flavours/glitch/styles/gts/sizes.scss b/app/javascript/flavours/glitch/styles/gts/sizes.scss
index 4dc4d3195..04a0a2628 100644
--- a/app/javascript/flavours/glitch/styles/gts/sizes.scss
+++ b/app/javascript/flavours/glitch/styles/gts/sizes.scss
@@ -11,4 +11,5 @@
/* Components */
--size-avatar: 46px;
--size-icon: 20px;
+ --size-header-block: #{$ui-header-height};
}
diff --git a/app/javascript/flavours/glitch/styles/gts/ui-header.scss b/app/javascript/flavours/glitch/styles/gts/ui-header.scss
new file mode 100644
index 000000000..2ab88b50e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/ui-header.scss
@@ -0,0 +1,43 @@
+/* 🧑💻 UI: Header */
+.ui__header {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ display: none;
+ align-items: center;
+ justify-content: space-between;
+ padding-inline-start: 7px;
+ height: var(--size-header-block);
+ box-sizing: border-box;
+
+ svg.gts-icon {
+ display: block;
+ }
+}
+
+.ui__header__logo {
+ --size-icon: 32px;
+ padding: 8px;
+}
+
+.ui__header__links {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding-inline: 10px;
+ overflow: hidden;
+
+ a {
+ display: flex;
+ align-items: center;
+ line-height: 20px;
+ }
+
+ .button {
+ flex: 0 0 auto;
+ }
+
+ .button-tertiary {
+ flex-shrink: 1;
+ }
+}