Merge branch 'change-toggle-design' into 'develop'

Change design of toggle button

See merge request soapbox-pub/soapbox-fe!105

app/styles/application.scss

@@ -61,6 +61,7 @@
 @import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
+@import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
 @import 'components/profile-info-panel';

app/styles/components/sidebar-menu.scss

@@ -161,6 +161,10 @@
     margin-right: 10px;
   }
 
+  &.theme-toggle {
+    padding-top: 0;
+  }
+
   &:hover {
     &__title {
       color: var(--primary-text-color);

app/styles/components/tabs-bar.scss

@@ -111,14 +111,6 @@
     }
   }
 
-  &__button-theme-toggle {
-    margin-left: 10px;
-    padding: 0 10px;
-    font-size: 20px;
-
-    .fa { margin-right: 0; }
-  }
-
   &__button-compose {
     display: block;
     @media screen and (max-width: $nav-breakpoint-3) {display: none;}
@@ -149,6 +141,23 @@
     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);
+        }
+      }
+    }
+  }
 }
 
 .tabs-bar__link {

app/styles/components/theme-toggle.scss

@@ -0,0 +1,19 @@
+.theme-toggle {
+  .setting-toggle {
+
+    &__label {
+      margin-bottom: 0px;
+      vertical-align: middle;
+    }
+
+    .react-toggle {
+      vertical-align: middle;
+
+      &-track-check,
+      &-track-x {
+        height: 15px;
+        color: #fff;
+      }
+    }
+  }
+}