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);
 }