updated content tabs' style

src/js/modules/tabs.js

@@ -46,7 +46,7 @@ export function showView(viewType, event) {
 	showTab(viewType, id)
 }
 
-export function showErrors(event){
+export function showErrors(event) {
 	ErrorsTab.showErrors(event.data.item)
 	changeTab(event.target, 'main', 'errors_tab')
 }
@@ -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;
-	--panels-scroll: #2a2c2c;
-	--accent-color: #0a84ff;
-	--tag-background: #0062c4;
-	--tag-text: #ffffff;
-	--toast-background: #000000dd;
-	--toast-secondary: #ffffff22;
-	--toast-text: #ffffffde;
-	--separator: #8f8f8f;
+	--main-scroll: hsl(0, 0%, 33%);
+	--panels-scroll: hsl(180, 2%, 17%);
+	--accent-color: hsl(210, 100%, 52%);
+	--tag-background: hsl(210, 100%, 38%);
+	--tag-text: hsl(0, 0%, 100%);
+	--toast-background: hsla(0, 0%, 0%, 0.867);
+	--toast-secondary: hsla(0, 0%, 100%, 0.133);
+	--toast-text: hsla(0, 0%, 100%, 0.871);
+	--separator: hsl(0, 0%, 50%);
 
 	--explicit-separator: 0.3125em;
 }
 
 html[data-theme='light'] {
-	--main-background: #ffffff;
-	--secondary-background: #eeeeee;
-	--main-text: #333333;
-	--main-text-inverted: #eeeeee;
-	--panels-background: #222324;
-	--panels-text: #ffffff;
-	--accent-text: black;
+	--main-background: hsl(0, 0%, 100%);
+	--secondary-background: hsl(0, 0%, 93%);
+	--foreground: hsl(0, 0%, 20%);
+	--foreground-inverted: hsl(0, 0%, 93%);
+	--panels-background: hsl(210, 3%, 14%);
+	--panels-text: hsl(0, 0%, 100%);
+	--accent-text: hsl(0, 0%, 0%);
 
-	--table-bg: #ffffff;
-	--table-zebra: #c9c9c9;
-	--table-highlight: #8f8f8f;
+	--table-bg: hsl(0, 0%, 100%);
+	--table-zebra: hsl(0, 0%, 79%);
+	--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%);
-	--main-text-inverted: hsl(0, 0%, 20%);
+	--foreground: hsl(0, 0%, 93%);
+	--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);
+		}
+	}
+}