Organize settings with horizontal tabs (#569)

* Align settings section titles on same row

* Add className to Settings Titles to copy tab layout from 'Available Services'

* Add all Settings Titles to the horizontal tab layout at the top of the form

* Add state for active settings taband onClick

* Add condition for each Settings div to show when activeSetttingsTab plus fix typo 'appearance'

* Add condition for each Settings div to show when activeSetttingsTab plus fix typo 'appearance'

* Add margins in between setting tabs

* Remove 50px of top margin to minimize blank space above tabs

* Remove temporary    in between tabs now that CSS is in place

* Apply code changes

* Delete unused code const { activeSettingsTab } = this.state;

Co-authored-by: Amine Mouafik <amine@mouafik.fr>

3 files changed, 6 insertions, 1 deletions

diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 69879de31..728200d03 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -4,6 +4,7 @@
   background: $dark-theme-gray;
   border-radius: $theme-border-radius-small;
   color: $dark-theme-gray-lightest;
+  margin-right: 10px;
 
   &.badge--primary,
   &.badge--premium {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 14cc91f87..580917fe2 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -187,6 +187,10 @@
     .mdi { color: $theme-gray-light; }
   }
 
+  .settings_titles {
+    display:inline-block;
+  }
+
   .settings__body {
     flex: 1;
     margin: 15px;
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 636b8fd36..5b1160d0b 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -19,7 +19,7 @@ h2 {
   font-weight: 500;
   letter-spacing: -1px;
   margin-bottom: 25px;
-  margin-top: 55px;
+  margin-top: 5px;
 
   &:first-of-type { margin-top: 0; }
 }