style: ui improvements (dialogs, responsiveness)

src/app/home/recent-playlists/playlist-info/playlist-info.component.html

@@ -106,6 +106,9 @@
             {{ 'HOME.PLAYLISTS.INFO_DIALOG.EXPORT_PLAYLIST' | translate }}
         </button>
         <div class="spacer"></div>
+        <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+            {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
+        </button>
         <button
             mat-flat-button
             mat-dialog-close
@@ -115,8 +118,5 @@
         >
             {{ 'HOME.PLAYLISTS.INFO_DIALOG.SAVE' | translate }}
         </button>
-        <button mat-button mat-dialog-close cdkFocusInitial color="accent">
-            {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
-        </button>
     </mat-dialog-actions>
 </form>

src/app/home/recent-playlists/playlist-item/playlist-item.component.scss

@@ -49,7 +49,7 @@ mat-list-item {
     align-self: center !important;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 599px) {
     .drag-icon {
         display: none;
     }

src/app/home/recent-playlists/recent-playlists.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 :host {
     display: flex;
     flex-direction: column;
@@ -94,8 +96,12 @@
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 599px) {
     .favorites-icon {
         padding-left: 0 !important;
     }
+
+    .search-field {
+        @include mat.form-field-density(-2);
+    }
 }

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -14,12 +14,12 @@ import { ConfirmDialogData } from './confirm-dialog-data.interface';
             {{ dialogData.message }}
         </mat-dialog-content>
         <mat-dialog-actions align="end">
-            <button mat-flat-button [mat-dialog-close]="true" color="accent">
-                {{ dialogData?.confirmLabel || 'YES' | translate }}
-            </button>
             <button mat-button mat-dialog-close cdkFocusInitial color="accent">
                 {{ dialogData?.cancelLabel || 'NO' | translate }}
             </button>
+            <button mat-flat-button [mat-dialog-close]="true" color="accent">
+                {{ dialogData?.confirmLabel || 'YES' | translate }}
+            </button>
         </mat-dialog-actions>
     `,
 })

src/app/shared/components/header/header.component.scss

@@ -8,6 +8,10 @@
 
 .logo {
     flex: 1 1 100px;
+
+    img {
+        height: 100px;
+    }
 }
 
 .main {
@@ -46,8 +50,12 @@
     color: #fff;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 599px) {
     .subtitle {
         display: none;
     }
+
+    .logo > img {
+        height: 48px;
+    }
 }