From 2854aa9235af49f95fbba4f8c6642574bc10af7e Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Thu, 23 May 2019 13:02:52 +0200
Subject: [PATCH] Extracts tabs into reusable CSS

---
 client/modules/IDE/components/Preferences.jsx |  6 +-
 client/modules/User/pages/AccountView.jsx     |  6 +-
 client/styles/components/_account.scss        |  1 -
 client/styles/components/_preferences.scss    | 51 --------------
 client/styles/components/_tabs.scss           | 69 +++++++++++++++++++
 client/styles/main.scss                       |  1 +
 6 files changed, 76 insertions(+), 58 deletions(-)
 create mode 100644 client/styles/components/_tabs.scss

diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 6723c038..c98067c4 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -59,9 +59,9 @@ class Preferences extends React.Component {
         </Helmet>
         <Tabs>
           <TabList>
-            <div className="preference__subheadings">
-              <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
-              <Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
+            <div className="tabs__titles">
+              <Tab><h4 className="tabs__title">General Settings</h4></Tab>
+              <Tab><h4 className="tabs__title">Accessibility</h4></Tab>
             </div>
           </TabList>
           <TabPanel>
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index c767064a..dbd6073c 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -53,9 +53,9 @@ class AccountView extends React.Component {
           <h2 className="form-container__title">My Account</h2>
           <Tabs className="account__tabs">
             <TabList>
-              <div className="preference__subheadings">
-                <Tab><h4 className="preference__subheading">Account</h4></Tab>
-                <Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
+              <div className="tabs__titles">
+                <Tab><h4 className="tabs__title">Account</h4></Tab>
+                <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
               </div>
             </TabList>
             <TabPanel>
diff --git a/client/styles/components/_account.scss b/client/styles/components/_account.scss
index a03b140f..44d8939d 100644
--- a/client/styles/components/_account.scss
+++ b/client/styles/components/_account.scss
@@ -1,5 +1,4 @@
 .account__tabs {
-  width: 500px;
   padding-top: #{20 / $base-font-size}rem;
 }
 
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 3f77e40a..26d213fd 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -60,15 +60,6 @@
     text-align: left;
 }
 
-.preference__subheadings {
-  display: flex;
-  flex-wrap: wrap;
-  padding-bottom: #{0.1 / $base-font-size}rem;
-  @include themify() {
-    border-bottom: 1px solid getThemifyVariable('button-border-color');
-  }
-}
-
 .preference {
   display: flex;
   flex-wrap: wrap;
@@ -129,48 +120,6 @@
   width: #{44 / $base-font-size}rem;
 }
 
-.react-tabs__tab--selected {
-  @include themify() {
-    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
-  }
-}
-
-.react-tabs__tab--selected .preference__subheading {
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-  }
-}
-
-.react-tabs__tab {
-  text-align: center;
-  color: black;
-  display: flex;
-  align-items: center;
-  border-bottom: #{4 / $base-font-size}rem solid transparent;
-  & + & {
-    margin-left: #{45 / $base-font-size}rem;
-  }
-}
-
-.preference__subheading {
-  @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-    &:hover, &:focus{
-      color: getThemifyVariable('primary-text-color');
-      cursor: pointer; 
-    }
-    &:focus  {
-      color: getThemifyVariable('primary-text-color');
-      cursor: pointer; 
-    }
-  }
-  font-size: #{12 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
-  width: 100%;
-  margin: 0;
-  padding: 0 #{5 /$base-font-size}rem;
-}
-
 .preference__vertical-list {
   display: flex;
   flex-direction: column;
diff --git a/client/styles/components/_tabs.scss b/client/styles/components/_tabs.scss
new file mode 100644
index 00000000..444b7186
--- /dev/null
+++ b/client/styles/components/_tabs.scss
@@ -0,0 +1,69 @@
+.tabs__titles {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: #{0.1 / $base-font-size}rem;
+  @include themify() {
+    border-bottom: 1px solid getThemifyVariable('button-border-color');
+  }
+}
+
+.tabs__title {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover, &:focus{
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+    &:focus  {
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+  }
+  font-size: #{12 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 #{5 /$base-font-size}rem;
+}
+
+.react-tabs__tab--selected {
+  @include themify() {
+    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+  }
+}
+
+.react-tabs__tab--selected .tabs__title {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.react-tabs__tab {
+  text-align: center;
+  color: black;
+  display: flex;
+  align-items: center;
+  border-bottom: #{4 / $base-font-size}rem solid transparent;
+  & + & {
+    margin-left: #{45 / $base-font-size}rem;
+  }
+}
+
+.tabs__title {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover, &:focus{
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+    &:focus  {
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+  }
+  font-size: #{12 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 #{5 /$base-font-size}rem;
+}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 10e4a38e..62b8d4cc 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -45,6 +45,7 @@
 @import 'components/feedback';
 @import 'components/loader';
 @import 'components/uploader';
+@import 'components/tabs';
 
 @import 'layout/ide';
 @import 'layout/fullscreen';