Extracts tabs into reusable CSS

client/modules/IDE/components/Preferences.jsx

@@ -59,9 +59,9 @@ class Preferences extends React.Component {
         </Helmet>
         <Tabs>
           <TabList>
-            <div className="preference__subheadings">
+            <div className="tabs__titles">
-              <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
+              <Tab><h4 className="tabs__title">General Settings</h4></Tab>
-              <Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
+              <Tab><h4 className="tabs__title">Accessibility</h4></Tab>
             </div>
           </TabList>
           <TabPanel>

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">
+              <div className="tabs__titles">
-                <Tab><h4 className="preference__subheading">Account</h4></Tab>
+                <Tab><h4 className="tabs__title">Account</h4></Tab>
-                <Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
+                <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
               </div>
             </TabList>
             <TabPanel>

client/styles/components/_account.scss

@@ -1,5 +1,4 @@
 .account__tabs {
-  width: 500px;
   padding-top: #{20 / $base-font-size}rem;
 }
 

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;

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;
+}

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';