diff --git a/src/components/Search.jsx b/src/components/Search.jsx index ae15cbb..3b1e754 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -113,10 +113,10 @@ class SearchTabs extends React.Component { render() { return ( - - Artistas - Discos - Canciones + + Artistas + Discos + Canciones

Discos

diff --git a/src/index.jsx b/src/index.jsx index d8a2b56..29ae8c4 100644 --- a/src/index.jsx +++ b/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'; diff --git a/src/styles/main.css b/src/styles/main.css index 6510a15..4268105 100644 --- a/src/styles/main.css +++ b/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%;