Commit 9f06a4b4 authored by Michael Henretty's avatar Michael Henretty
Browse files

add colors to the nav tabs

parent db1ac078
......@@ -454,6 +454,19 @@ header.active {
padding-right: 6rem;
}
.tab.active .tab-name.record {
background-color: var(--color-speak);
}
.tab.active .tab-name.listen {
background-color: var(--color-listen);
}
.tab.active .tab-name.profile {
background-color: var(--color-profile);
}
#main-nav .tab {
line-height: 1.4;
margin: 0.35rem 0;
......@@ -745,8 +758,9 @@ header.active {
#donate button {
margin: 0 auto;
padding: 0 5rem;
height: 3rem;
animation: throb 3s ease-in-out infinite;
animation: throb 3.5s ease-in-out infinite;
}
@keyframes throb {
......
......@@ -182,13 +182,13 @@ export default class Pages extends Component<PagesProps, PagesState> {
let c = 'tab ' + this.isPageActive(url, this.props.currentPage);
return <a className={c}
onClick={this.props.navigate.bind(null, url)}>
<span className="tab-name">{name}</span>
<span className={'tab-name ' + name}>{name}</span>
</a>;
}
private renderNav(id?: string) {
return <nav id={id} className="nav-list">
{this.renderTab('/', 'about')}
{this.renderTab('/', 'home')}
{this.renderTab('/record', 'record')}
{this.renderTab('/listen', 'listen')}
{this.renderTab('/profile', 'profile')}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment