updated content tabs' style

public/index.html

@@ -88,14 +88,14 @@ <h2>Start searching!</h2>
 									Deezer link
 								</p>
 							</div>
-							<div :class="{'hide': results.query == ''}">
+							<div v-show="results.query !== ''">
-								<div class="tab">
+								<ul class="section-tabs">
-									<button class="search_tablinks" id="search_all_tab">All</button>
+									<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
-									<button class="search_tablinks" id="search_track_tab">Tracks</button>
+									<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
-									<button class="search_tablinks" id="search_album_tab">Album</button>
+									<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
-									<button class="search_tablinks" id="search_artist_tab">Artist</button>
+									<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
-									<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
+									<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
-								</div>
+								</ul>
 								<div id="search_tab_content">
 									<!-- ### Main Search Tab ### -->
 									<div id="main_search" class="search_tabcontent">
@@ -466,13 +466,14 @@ <h2 class="page_heading">Charts</h2>
 						</div>
 
 						<div id="favorites_tab" class="main_tabcontent">
-							<h1>Favorites</h1>
+							<h2 class="page_heading">Favorites</h2>
-							<div class="tab">
+							<div class="section-tabs">
-								<button class="favorites_tablinks" id="favorites_playlist_tab">Playlists</button>
+								<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div>
-								<button class="favorites_tablinks" id="favorites_album_tab">Albums</button>
+								<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">Albums</div>
-								<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button>
+								<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">Artists</div>
-								<button class="favorites_tablinks" id="favorites_track_tab">Tracks</button>
+								<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</div>
-								<div @click="reloadTabs" role="button" aria-label="reload" ref="reloadButton" class="right clickable reload-button">
+								<div @click="reloadTabs" class="right clickable reload-button" style="margin-left: auto;"
+									ref="reloadButton" role="button" aria-label="reload">
 									<i class="material-icons">sync</i>
 								</div>
 							</div>
@@ -1193,13 +1194,16 @@ <h1>About</h1>
 							<h1>Bug Reports</h1>
 							<p>
 								If you have questions or problems with the app, search for a solution in the
-								<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't find anything
+								<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't
+								find anything
 								you can make a post with your issue on the subreddit.
 							</p>
 							<p>
-								Before reporting a bug make sure you're running the latest version of the app and that the thing you want
+								Before reporting a bug make sure you're running the latest version of the app and that the thing you
+								want
 								to report is acatually a bug and not something that's wrong only on your end.<br />
-								Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been already reported.
+								Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
+								already reported.
 							</p>
 							<p>
 								<b>DO NOT</b> open issues for asking questions, there is a subreddit for that.

src/js/modules/tabs.js

@@ -209,6 +209,7 @@ function changeTab(sidebarEl, section, tabName) {
 		tabcontent[i].style.display = 'none'
 	}
 	tablinks = document.getElementsByClassName(section + '_tablinks')
+	// tablinks = document.getElementsByClassName('section-tabs__tab')
 	for (i = 0; i < tablinks.length; i++) {
 		tablinks[i].classList.remove('active')
 	}
@@ -234,7 +235,7 @@ function changeTab(sidebarEl, section, tabName) {
 		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
 		MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0
 	) {
-		console.log(search_selected.split('_')[0] + 'Tab')
+		// console.log(search_selected.split('_')[0] + 'Tab')
 
 		MainSearch.search(search_selected.split('_')[0])
 	}

src/styles/scss/_middle-section.scss

@@ -28,7 +28,7 @@ $icon-dimension: 2rem;
 		i {
 			font-size: $icon-dimension;
 			transition: color 250ms ease-in-out;
-			color: var(--main-text);
+			color: var(--foreground);
 
 			@include removeSelectionBackground;
 		}
@@ -41,7 +41,7 @@ $icon-dimension: 2rem;
 	}
 
 	&:focus-within {
-		border: 1px solid var(--main-text);
+		border: 1px solid var(--foreground);
 	}
 
 	$searchbar-height: calc(2rem + 1em);

src/styles/scss/base/_base.scss

@@ -1,38 +1,38 @@
 html {
 	height: 100vh;
 
-	--main-scroll: #555;
+	--main-scroll: hsl(0, 0%, 33%);
-	--panels-scroll: #2a2c2c;
+	--panels-scroll: hsl(180, 2%, 17%);
-	--accent-color: #0a84ff;
+	--accent-color: hsl(210, 100%, 52%);
-	--tag-background: #0062c4;
+	--tag-background: hsl(210, 100%, 38%);
-	--tag-text: #ffffff;
+	--tag-text: hsl(0, 0%, 100%);
-	--toast-background: #000000dd;
+	--toast-background: hsla(0, 0%, 0%, 0.867);
-	--toast-secondary: #ffffff22;
+	--toast-secondary: hsla(0, 0%, 100%, 0.133);
-	--toast-text: #ffffffde;
+	--toast-text: hsla(0, 0%, 100%, 0.871);
-	--separator: #8f8f8f;
+	--separator: hsl(0, 0%, 50%);
 
 	--explicit-separator: 0.3125em;
 }
 
 html[data-theme='light'] {
-	--main-background: #ffffff;
+	--main-background: hsl(0, 0%, 100%);
-	--secondary-background: #eeeeee;
+	--secondary-background: hsl(0, 0%, 93%);
-	--main-text: #333333;
+	--foreground: hsl(0, 0%, 20%);
-	--main-text-inverted: #eeeeee;
+	--foreground-inverted: hsl(0, 0%, 93%);
-	--panels-background: #222324;
+	--panels-background: hsl(210, 3%, 14%);
-	--panels-text: #ffffff;
+	--panels-text: hsl(0, 0%, 100%);
-	--accent-text: black;
+	--accent-text: hsl(0, 0%, 0%);
 
-	--table-bg: #ffffff;
+	--table-bg: hsl(0, 0%, 100%);
-	--table-zebra: #c9c9c9;
+	--table-zebra: hsl(0, 0%, 79%);
-	--table-highlight: #8f8f8f;
+	--table-highlight: hsl(0, 0%, 56%);
 }
 
 html[data-theme='dark'] {
 	--main-background: hsl(0, 0%, 8%);
 	--secondary-background: hsl(0, 0%, 14%);
-	--main-text: hsl(0, 0%, 93%);
+	--foreground: hsl(0, 0%, 93%);
-	--main-text-inverted: hsl(0, 0%, 20%);
+	--foreground-inverted: hsl(0, 0%, 20%);
 	--panels-background: hsl(0, 0%, 10%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
@@ -45,9 +45,9 @@ html[data-theme='dark'] {
 html[data-theme='purple'] {
 	--main-background: hsl(261, 74%, 6%);
 	--secondary-background: hsl(257, 61%, 10%);
-	--main-text: hsl(0, 0%, 93%);
+	--foreground: hsl(0, 0%, 93%);
+	--foreground-inverted: hsl(258, 62%, 8%);
 	--accent-color: hsl(261, 85%, 37%);
-	--main-text-inverted: hsl(258, 62%, 8%);
 	--panels-background: hsl(257, 70%, 9%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
@@ -64,5 +64,5 @@ body {
 	font-family: 'Open Sans';
 	overflow: hidden;
 	background: var(--main-background);
-	color: var(--main-text);
+	color: var(--foreground);
 }

src/styles/scss/globals/_globals.scss

@@ -214,13 +214,13 @@ a:visited {
 
 button[disabled] {
 	background-color: var(--secondary-background);
-	color: var(--main-text);
+	color: var(--foreground);
 	opacity: 0.75;
 }
 
 button.selective {
 	background-color: var(--main-background);
-	color: var(--main-text);
+	color: var(--foreground);
 }
 
 button.selective.active {

src/styles/scss/tabs/_search-tab.scss

@@ -26,7 +26,7 @@
 /* Tab links */
 
 .search_tablinks.active {
-	color: var(--main-text-inverted);
+	color: var(--foreground-inverted);
 }
 
 /* Top Result */

src/styles/scss/tabs/_tabs.scss

@@ -10,7 +10,7 @@
 
 .tab button {
 	background-color: var(--primary-background);
-	color: var(--main-text);
+	color: var(--foreground);
 }
 
 .tab button.active {
@@ -32,3 +32,24 @@
 	overflow: hidden;
 	white-space: nowrap;
 }
+
+.section-tabs {
+	list-style-type: none;
+	display: flex;
+	margin: 16px 0 24px 0;
+	cursor: pointer;
+
+	&__tab {
+		flex: 1;
+		font-size: 1.2rem;
+		// width: 10rem;
+		padding: 1em;
+		border-top: 3px solid var(--foreground);
+		text-align: center;
+
+		&.active {
+			color: var(--accent-color);
+			border-top: 3px solid var(--accent-color);
+		}
+	}
+}