style: removed some classes and ids; style: added typography.css; style: added vendor folder; wip: BaseAccordion component

src/styles/css/typography.css

@@ -0,0 +1,11 @@
+.primary-text {
+	@apply mb-1 transition-colors duration-200 ease-in-out;
+}
+
+.primary-text:hover {
+	@apply text-primary;
+}
+
+.secondary-text {
+	@apply mb-1 text-sm opacity-75;
+}

src/styles/scss/base/_base.scss

@@ -42,3 +42,17 @@
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);
 }
+
+html {
+	height: 100vh;
+}
+
+body {
+	margin: 0px;
+	width: 100%;
+	height: 100%;
+	font-family: 'Open Sans', 'sans-serif';
+	overflow: hidden;
+	background: var(--main-background);
+	color: var(--foreground);
+}

src/styles/scss/base/_normalize.scss

@@ -57,6 +57,10 @@ button,
 	cursor: pointer;
 }
 
+p {
+	word-break: break-word;
+}
+
 *,
 ::before,
 ::after {

src/styles/scss/globals/_globals.scss

@@ -53,33 +53,9 @@ select {
 	color: var(--foreground);
 }
 
-p {
-	word-break: break-word;
-}
-
-img {
-	&.rounded {
-		border-radius: 5px;
-	}
-
-	&.circle {
-		border-radius: 50%;
-	}
-}
-
-.single-cover {
-	display: inline-block;
-	position: relative;
-	color: white;
-}
-
 @layer base {
 	a {
 		color: dodgerblue;
-
-		// &:visited {
-		// 	color: dodgerblue;
-		// }
 	}
 }
 

src/styles/scss/style.scss

@@ -3,21 +3,6 @@
 @import '~tailwindcss/utilities';
 
 @import './base/base';
-
-html {
-	height: 100vh;
-}
-
-body {
-	margin: 0px;
-	width: 100%;
-	height: 100%;
-	font-family: 'Open Sans', 'sans-serif';
-	overflow: hidden;
-	background: var(--main-background);
-	color: var(--foreground);
-}
-
 @import './base/normalize';
 @import './base/animations';
 

src/styles/scss/tabs/_release-grid.scss

@@ -1,17 +1,5 @@
-.release_grid {
+.release-grid {
 	@apply gap-4 grid;
 
 	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 }
-
-.primary-text {
-	@apply mb-1 transition-colors duration-200 ease-in-out;
-
-	&:hover {
-		@apply text-primary;
-	}
-}
-
-.secondary-text {
-	@apply mb-1 text-sm opacity-75;
-}

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

@@ -1,59 +1,23 @@
-#settings_picture {
-	width: 125px;
-	height: 125px;
-}
-
-#log_info {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-#open_login_prompt {
-	margin: 8px 0px;
-}
-
-.inline-flex input {
-	margin-bottom: 0px;
-}
-
-#spotify_icon {
-	width: 24px;
-	height: 24px;
-	fill: #1db954;
-	margin-right: 15px;
-}
-
-/* Settings group */
 .settings-group {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+	@apply flex flex-col justify-center pt-5 pb-5;
 	border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
-	padding-top: 20px;
-	padding-bottom: 20px;
 
 	> * {
-		margin-bottom: 15px;
+		margin-bottom: 1rem;
 	}
 }
 
-/* Settings group header */
 .settings-group__header {
+	display: inline-flex;
+	align-items: center;
+	margin-bottom: 1.5625rem;
 	font-size: 1.5rem;
-	margin-bottom: 25px;
 
-	&.settings-group__header--with-icon {
-		display: inline-flex;
-		align-items: center;
-
-		i.material-icons {
-			margin-right: 15px;
-		}
+	i.material-icons {
+		margin-right: 15px;
 	}
 }
 
-/* Settings container */
 .settings-container {
 	display: flex;
 
@@ -67,8 +31,8 @@
 		&--only-checkbox {
 			display: flex;
 			flex-direction: column;
-			justify-content: center;
 			align-items: start;
+			justify-content: center;
 		}
 	}
 

src/styles/scss/tabs/_tabs.scss

@@ -1,10 +1,4 @@
 .release {
 	display: inline-block;
 	width: 156px;
-
-	.cover_container {
-		width: 156px;
-		height: 156px;
-		margin-bottom: 10px;
-	}
 }