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>

1 files changed, 4 insertions, 0 deletions

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;