styled home tab

public/css/modules/base/base.css

@@ -1,3 +1,6 @@
+@import './normalize.css';
+@import './typography.css';
+
 * {
 	transition: background-color 500ms ease-in-out;
 }
@@ -19,6 +22,7 @@ html {
 	--toast-background: #000000dd;
 	--toast-secondary: #ffffff22;
 	--toast-text: #ffffffde;
+	--separator: #8f8f8f;
 }
 
 html[data-theme='dark'] {

public/css/modules/base/typography.css

@@ -0,0 +1,9 @@
+.page_heading {
+	font-size: 2.5rem;
+	margin-bottom: 35px;
+}
+
+.section_heading {
+	font-size: 1.75rem;
+	margin-bottom: 25px;
+}

public/css/modules/home-tab.css

@@ -1,5 +1,15 @@
+#home_not_logged_text {
+	margin-bottom: 15px;
+}
+
 .top-tracks-position {
 	padding: 12px;
 	text-align: center;
 	cursor: default;
 }
+
+.home_section {
+	border-top: 1px solid var(--separator);
+	padding-top: 25px;
+	padding-bottom: 25px;
+}

public/css/modules/main-search.css

@@ -1,4 +1,3 @@
-/* Main Search Tab */
 #main_search > .search_section {
 	float: none;
 	cursor: pointer;
@@ -20,7 +19,8 @@
 }
 
 .top_result > .info_box > p,
-.release > p {
+.release .primary-text,
+.release .secondary-text {
 	margin: 0px;
 	margin-bottom: 4px;
 }
@@ -48,9 +48,10 @@
 	width: 156px;
 }
 
-.release > .cover_container {
+.release .cover_container {
 	width: 156px;
 	height: 156px;
+	margin-bottom: 10px;
 }
 
 .track_row > td > img {

public/css/modules/settings.css

@@ -1,8 +1,3 @@
-#settings_heading {
-	font-size: 2.5rem;
-	margin-bottom: 35px;
-}
-
 #settings_picture {
 	width: 125px;
 	height: 125px;
@@ -45,7 +40,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	border-top: 1px solid #8f8f8f; /* Need less opacity */
+	border-top: 1px solid var(--separator); /* Need less opacity */
 	padding-top: 20px;
 	padding-bottom: 20px;
 }

public/css/modules/tabs.css

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

public/css/style.css

@@ -3,8 +3,7 @@
 @import './vendor/OpenSans.css';
 @import './vendor/toastify.css';
 
-@import './modules/normalize.css';
-@import './modules/base.css';
+@import './modules/base/base.css';
 @import './modules/globals.css';
 @import './modules/animations.css';
 @import './modules/progressbar.css';

public/index.html

@@ -268,13 +268,14 @@
 						</div>
 
 						<div id="home_tab" class="main_tabcontent">
-							<h1>Welcome to deemix</h1>
-							<div id="home_not_logged_in">
-								<p>You need to log into your deezer account before starting downloading.</p>
+							<h2 class="page_heading">Welcome to deemix</h2>
+							<section id="home_not_logged_in" class="home_section">
+								<p id="home_not_logged_text">You need to log into your deezer account before you can start downloading.
+								</p>
 								<button type="button" name="button" @click="openSettings">Open Settings</button>
-							</div>
-							<div v-if="playlists.length">
-								<h2>Popular playlists</h2>
+							</section>
+							<section v-if="playlists.length" class="home_section">
+								<h3 class="section_heading">Popular playlists</h3>
 								<div class="release_grid">
 									<div v-for="release in playlists" class="release clickable" @click="playlistView"
 										:data-id="release.id">
@@ -288,7 +289,7 @@
 										<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
 									</div>
 								</div>
-							</div>
+							</section>
 						</div>
 
 						<div id="charts_tab" class="main_tabcontent">
@@ -434,15 +435,20 @@
 						<div id="analyzer_tab" class="main_tabcontent image_header">
 							<h1>Link Analyzer</h1>
 							<div v-if="link == ''">
-								<p>You can use this section to find out more information about the link you are trying to download<br/>This is usefull if you're trying to download some tracks that are not available in your country and want to know where they are available</p>
+								<p>You can use this section to find out more information about the link you are trying to
+									download<br />This is usefull if you're trying to download some tracks that are not available in your
+									country and want to know where they are available</p>
 							</div>
 							<div v-else>
 								<header class="inline-flex"
 									:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
 									<div>
 										<h1>{{ title }}</h1>
-										<h2 v-if="type == 'track'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • in <span class="clickable" @click="albumView" :data-id="data.album.id">{{data.album.title}}</span></h2>
-										<h2 v-else-if="type == 'album'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • {{data.nb_tracks}} tracks</h2>
+										<h2 v-if="type == 'track'">by <span class="clickable" @click="artistView"
+												:data-id="data.artist.id">{{data.artist.name}}</span> • in <span class="clickable"
+												@click="albumView" :data-id="data.album.id">{{data.album.title}}</span></h2>
+										<h2 v-else-if="type == 'album'">by <span class="clickable" @click="artistView"
+												:data-id="data.artist.id">{{data.artist.name}}</span> • {{data.nb_tracks}} tracks</h2>
 									</div>
 									<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
 										@click.stop="addToQueue" :data-link="link" class="fab right"><i class="material-icons">get_app</i>
@@ -497,7 +503,7 @@
 						</div>
 
 						<div id="settings_tab" class="main_tabcontent fixed_footer">
-							<h2 id="settings_heading">Settings</h2>
+							<h2 class="page_heading">Settings</h2>
 
 							<div id="logged_in_info">
 								<img id="settings_picture" src="" alt="Profile Picture" class="circle" />
@@ -1072,4 +1078,4 @@
 
 	<script src="/public/js/bundle.js"></script>
 
-</html>
+</html>