Estilos decentes en Tabs

src/components/Search.jsx

@@ -113,10 +113,10 @@ class SearchTabs extends React.Component {
     render() {
         return (
             <Tabs selectedIndex={this.nameToIndex(this.props.selected)} onSelect={this.handleSelect}>
-                <TabList>
-                    <Tab>Artistas</Tab>
-                    <Tab>Discos</Tab>
-                    <Tab>Canciones</Tab>
+                <TabList className='tabs'>
+                    <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
+                    <Tab className='tab' selectedClassName='selected'>Discos</Tab>
+                    <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
                 </TabList>
                 <TabPanel><SearchArtists query={this.props.query} onPageChange={this.handlePageChange('artist')}/></TabPanel>
                 <TabPanel><p>Discos</p></TabPanel>

src/index.jsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import {Search} from './components/Search';
 import SearchBar from "./components/SearchBar";
 
-import 'react-tabs/style/react-tabs.css'
 import './styles/reset.css';
 import './styles/main.css';
 

src/styles/main.css

@@ -6,7 +6,7 @@
     --gray-3: hsl(0, 0%, 30%);
     --black: hsl(0, 0%, 20%);
 
-    --red: hsl(354, 81%, 56%);
+    --accent: hsl(354, 81%, 56%);
 }
 
 
@@ -17,6 +17,7 @@ body {
     padding: 0 1rem;
     font-family: sans-serif;
     color: var(--black);
+    overflow-y: scroll;
 }
 
 input {
@@ -37,7 +38,7 @@ button.link {
 }
 
 a, button.link {
-    color: var(--red);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -46,8 +47,8 @@ a:hover, button.link:hover {
 }
 
 h1, h2, h3, h4 {
-    margin-top: .5rem;
-    margin-bottom: .2rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 /*Navbar*/
@@ -89,7 +90,7 @@ ul.pagination {
 }
 
 .page-item.active {
-    background-color: var(--red);
+    background-color: var(--accent);
 }
 
 .page-item.active a {
@@ -148,6 +149,28 @@ li.entity a .small {
     color: var(--gray-3);
 }
 
+/* Tabs */
+ul.tabs {
+    display: flex;
+    align-items: stretch;
+    border-bottom: 2px var(--gray-1) solid;
+    margin: 1rem 0;
+}
+
+ul.tabs li.tab {
+    padding: .5rem 1rem;
+    margin-bottom: -2px;
+    cursor: pointer;
+}
+
+ul.tabs li.tab:hover {
+    border-bottom: 2px var(--gray-2) solid;
+}
+
+ul.tabs li.tab.selected {
+    border-bottom: 2px var(--accent) solid;
+}
+
 /*Utils*/
 .full-width {
     width: 100%;