added icons to settings tab, started compressing settings list, made sidebar a bit faster

public/css/modules/sidebar.css

@@ -8,7 +8,7 @@
 	left: 0;
 	background-color: var(--panels-background);
 	color: var(--panels-text);
-	transition: width 125ms ease-in-out 150ms;
+	transition: width 125ms ease-in-out 75ms;
 	z-index: 999;
 }
 

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

@@ -36,7 +36,15 @@
 	padding: 6px 0px;
 }
 
-.settings_group {
+#spotify-icon {
+	width: 24px;
+	height: 24px;
+	fill: #1db954;
+	margin-right: 15px;
+}
+
+/* Settings group */
+.settings-group {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -45,10 +53,51 @@
 	padding-bottom: 20px;
 }
 
-.settings_group > * {
+.settings-group > * {
 	margin-bottom: 15px;
 }
 
+/* Settings group header */
+.settings-group__header {
+	font-size: 1.5rem;
+	margin-bottom: 25px;
+}
+
+.settings-group__header--with-icon {
+	display: inline-flex;
+	align-items: center;
+}
+
+.settings-group__header--with-icon i.material-icons {
+	margin-right: 15px;
+}
+
+/* Settings container */
+.settings-container {
+	display: flex;
+}
+
+.settings-container__half > *,
+.settings-container__third > * {
+	margin-bottom: 15px;
+}
+
+.settings-container__half {
+	width: 50%;
+}
+
+.settings-container__third {
+	width: 33%;
+}
+
+.settings-container__third--only-checkbox {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: start;
+}
+
+/* Input group */
 .input_group {
 	margin-bottom: 25px;
 }

public/css/vendor/material-icons.css

@@ -1,28 +1,28 @@
 /* fallback */
 @font-face {
-   font-family: 'Material Icons';
-   font-style: normal;
-   font-weight: 400;
-   src: url(../../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
-   src: local('Material Icons'),
-        local('MaterialIcons-Regular'),
-        url(../../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
-        url(../../fonts/icons/MaterialIcons-Regular.woff) format('woff'),
-        url(../../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	src: url(../../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
+	src: local('Material Icons'), local('MaterialIcons-Regular'),
+		url(../../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
+		url(../../fonts/icons/MaterialIcons-Regular.woff) format('woff'),
+		url(../../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
 }