diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index de1864a7d..d26f294fe 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -98,7 +98,7 @@ class TabsBar extends React.PureComponent {
{ account &&
-
+ <>
@@ -108,7 +108,7 @@ class TabsBar extends React.PureComponent {
-
+ >
}
{
!account &&
diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
index 54fe27404..50e6fbb7f 100644
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -52,7 +52,7 @@ class ThemeToggle extends React.PureComponent {
}
return (
-
+
{toggle}
);
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index e8f59d047..e6b4d15a5 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -161,10 +161,6 @@
margin-right: 10px;
}
- &.theme-toggle {
- padding-top: 0;
- }
-
&:hover {
&__title {
color: var(--primary-text-color);
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index d5083f81d..02dac4e2b 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -39,7 +39,7 @@
&--right {
margin-left: auto;
- padding-top: 8px;
+ align-items: center;
}
}
@@ -137,21 +137,17 @@
height: 34px;
}
- .flex {
- display: flex;
- }
-
.theme-toggle {
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
.setting-toggle {
- margin-top: 3px;
margin-left: 10px;
.react-toggle--checked {
.react-toggle-track {
background-color: var(--accent-color);
}
+
&:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: var(--accent-color--bright);
}