styled search tab and created tabs folder in css directory

public/css/modules/base/base.css

@@ -1,9 +1,9 @@
 @import './normalize.css';
 @import './typography.css';
 
-* {
+/* * {
 	transition: background-color 500ms ease-in-out;
-}
+} */
 
 html {
 	height: 100%;

public/css/modules/globals.css

@@ -138,11 +138,6 @@ p,
 	margin-left: auto;
 }
 
-.secondary-text .material-icons {
-	font-size: 17px !important;
-	margin-left: 4px;
-}
-
 button {
 	font-family: inherit;
 	font-weight: 600;

public/css/modules/tabs.css

@@ -1,18 +0,0 @@
-.search_tabcontent,
-.main_tabcontent,
-.favorites_tabcontent {
-	display: none;
-}
-
-.main_tabcontent h1 {
-	margin-bottom: 12px;
-}
-
-.tab button {
-	background-color: var(--primary-background);
-	color: var(--main-text);
-}
-
-.tab button.active {
-	background-color: var(--accent-color);
-}

public/css/modules/tabs/search-tab.css

@@ -1,6 +1,19 @@
-#main_search > .search_section {
+#main_search .search_section {
 	float: none;
 	cursor: pointer;
+	border-top: 1px solid var(--separator);
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+/* Top Result */
+.top_result_header {
+	font-size: 2rem;
+}
+
+.search_header {
+	font-size: 1.75rem;
+	margin-bottom: 25px;
 }
 
 .top_result {
@@ -25,11 +38,17 @@
 	margin-bottom: 4px;
 }
 
-.secondary-text {
+/* Releases */
+.release .secondary-text {
 	opacity: 0.75;
 	font-size: 14px;
 }
 
+.release .secondary-text .material-icons {
+	font-size: 17px !important;
+	margin-left: 4px;
+}
+
 .release_grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
@@ -43,17 +62,6 @@
 	overflow-y: hidden;
 }
 
-.release {
-	display: inline-block;
-	width: 156px;
-}
-
-.release .cover_container {
-	width: 156px;
-	height: 156px;
-	margin-bottom: 10px;
-}
-
 .track_row > td > img {
 	width: 32px;
 	height: 32px;

public/css/modules/tabs/tabs.css

@@ -0,0 +1,35 @@
+@import './download-tab.css';
+@import './home-tab.css';
+@import './search-tab.css';
+@import './settings-tab.css';
+@import './tracklist-tab.css';
+
+.search_tabcontent,
+.main_tabcontent,
+.favorites_tabcontent {
+	display: none;
+}
+
+.main_tabcontent h1 {
+	margin-bottom: 12px;
+}
+
+.tab button {
+	background-color: var(--primary-background);
+	color: var(--main-text);
+}
+
+.tab button.active {
+	background-color: var(--accent-color);
+}
+
+.release {
+	display: inline-block;
+	width: 156px;
+}
+
+.release .cover_container {
+	width: 156px;
+	height: 156px;
+	margin-bottom: 10px;
+}

public/css/style.css

@@ -10,11 +10,6 @@
 
 @import './modules/sidebar.css';
 @import './modules/middle-section.css';
-@import './modules/tabs.css';
+@import './modules/tabs/tabs.css';
 @import './modules/stackedTabs.css';
-@import './modules/settings.css';
-@import './modules/main-search.css';
-@import './modules/download-tab.css';
 @import './modules/track-preview.css';
-@import './modules/tracklist-tab.css';
-@import './modules/home-tab.css';

public/index.html

@@ -65,19 +65,24 @@ <h2>Start searching!</h2>
 									<!-- ### Main Search Tab ### -->
 									<div id="main_search" class="search_tabcontent">
 										<template v-for="section in results.allTab.ORDER">
-											<div
+											<section
 												v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
 												class="search_section">
-												<h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
+												<h2 @click="changeSearchTab(section)" class="search_header"
+													:class="{ top_result_header : section === 'TOP_RESULT'}">
+													{{ names[section] }}
+												</h2>
 												<!-- Top result -->
 												<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
 													:data-id="results.allTab.TOP_RESULT[0].id">
 													<div class="cover_container">
 														<img :src="results.allTab.TOP_RESULT[0].picture"
-															:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+															:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'" />
 														<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
 															@click.stop="addToQueue" :data-link="results.allTab.TOP_RESULT[0].link"
-															class="download_overlay"><i class="material-icons">get_app</i></div>
+															class="download_overlay">
+															<i class="material-icons">get_app</i>
+														</div>
 													</div>
 													<div class="info_box">
 														<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
@@ -150,7 +155,7 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
 														<p class="secondary-text">{{release.NB_SONG+' tracks'}}</p>
 													</div>
 												</div>
-											</div>
+											</section>
 										</template>
 										<div
 											v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">