Merge pull request algorithm-visualizer#206 from nadr0/tab-css-fix

Tab button css fix

Author: nem035

css/stylesheet.css

@@ -67,12 +67,12 @@ button:hover {
 
 .btn.active,
 button.active {
-    background: rgb(38, 38, 38);
+    background: rgb(36, 36, 36);
 }
 
 .btn.active:hover,
 button.active:hover {
-    background: rgba(38, 38, 38);
+    background: rgba(36, 36, 36);
     color: rgba(187, 187, 187, .8);
 }
 
@@ -90,6 +90,10 @@ button input {
     border: none;
 }
 
+.tab_button{
+  border-bottom: 1px solid #505050;
+}
+
 .divider {
     position: absolute !important;
     z-index: 3;
@@ -396,7 +400,7 @@ section {
     border: none;
     top: 30px;
     height: 30px;
-    background: rgb(38, 38, 38);
+    background: rgb(36, 36, 36);
     padding: 8px;
     font-size: 12px;
 }

index.html

@@ -117,9 +117,9 @@ <h3>
 <div class="workspace">
     <div class="viewer_container">
         <section class="tab_bar">
-            <button id="btn_doc" data-target="#tab_doc">Tracer API</button>
-            <button class="active" id="btn_desc" data-target="#tab_desc">Description</button>
-            <button id="btn_trace" data-target="#tab_module">Trace</button>
+            <button class="tab_button" id="btn_doc" data-target="#tab_doc">Tracer API</button>
+            <button class="tab_button active" id="btn_desc" data-target="#tab_desc">Description</button>
+            <button class="tab_button" id="btn_trace" data-target="#tab_module">Trace</button>
         </section>
         <section class="tab_container">
             <div class="tab" id="tab_doc">
@@ -136,8 +136,8 @@ <h3>
     </div>
     <div class="editor_container">
         <section class="files_bar">
-            <button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
-            <button class="btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
+            <button class="tab_button btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
+            <button class="tab_button btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
             <div class="wrapper"></div>
         </section>
         <section class="explanation_container">

js/dom/add_files.js

@@ -24,9 +24,10 @@ module.exports = (category, algorithm, files, requestedFile) => {
 
   each(files, (file, explanation) => {
     var $file = addFileToDOM(category, algorithm, file, explanation);
+    $file.addClass('tab_button');
     if (requestedFile && requestedFile == file) $file.click();
   });
 
   if (!requestedFile) $('.files_bar > .wrapper > button').first().click();
   $('.files_bar > .wrapper').scroll();
-};
+};