Merge remote-tracking branch 'origin/main' into 33-create-component-for-displaying-music-on-dashboard

style/playbar.scss

@@ -39,15 +39,12 @@
 		}
 	}
 
-	.media-info {
-		font-size: 16;
-		margin-left: 10px;
-
+	.playbar-left-group {
+		display: flex;
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
-		display: grid;
-		grid-template-columns: 50px 1fr;
+		margin-left: 10px;
 
 		.media-info-img {
 			width: 50px;
@@ -57,6 +54,10 @@
 			text-align: left;
 			margin-left: 10px;
 		}
+
+		.like-dislike {
+			margin-left: 20px;
+		}
 	}
 
 	.playcontrols {
@@ -64,23 +65,6 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-
-		button {
-			.controlbtn {
-				color: $text-controls-color;
-			}
-
-			.controlbtn:hover {
-				color: $controls-hover-color;
-			}
-
-			.controlbtn:active {
-				color: $controls-click-color;
-			}
-	
-			background-color: transparent;
-			border: transparent;
-		}
 	}
 
 	.playduration {
@@ -94,22 +78,30 @@
 		bottom: 13px;
 		top: 13px;
 		right: 90px;
+	}
 
-		button {
-			.controlbtn {
-				color: $text-controls-color;
-			}
-
-			.controlbtn:hover {
-				color: $controls-hover-color;
-			}
-
-			.controlbtn:active {
-				color: $controls-click-color;
-			}
-	
-			background-color: transparent;
-			border: transparent;
+	button {
+		.hmirror {
+			-moz-transform: scale(-1, 1);
+			-webkit-transform: scale(-1, 1);
+			-o-transform: scale(-1, 1);
+			-ms-transform: scale(-1, 1);
+			transform: scale(-1, 1);
 		}
+
+		.controlbtn {
+			color: $text-controls-color;
+		}
+
+		.controlbtn:hover {
+			color: $controls-hover-color;
+		}
+
+		.controlbtn:active {
+			color: $controls-click-color;
+		}
+
+		background-color: transparent;
+		border: transparent;
 	}
 }