From 737d4be3872fad35bbd86ddd19e2002fe423c24c Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 20 Nov 2024 22:44:51 +0100
Subject: [PATCH] style: visual improvements on settings page

---
 src/app/settings/settings.component.html | 139 ++++++++++++-----------
 src/app/settings/settings.component.scss |   2 +-
 2 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index d66241621..79c3a0ab5 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -66,7 +66,7 @@
                     </button>
                 </div>
             </div>
-            <mat-divider></mat-divider>
+            <mat-divider />
         </ng-container>
         <div class="row">
             <div class="column">
@@ -92,47 +92,53 @@
                 </mat-form-field>
             </div>
         </div>
-        <mat-divider></mat-divider>
-        <div class="row" *ngIf="settingsForm.value.player === 'mpv'">
-            <div class="column">
-                {{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}
-                <p>{{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}</p>
+        @if (settingsForm.value.player === 'mpv') {
+            <div class="row">
+                <div class="column">
+                    {{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}
+                    <p>
+                        {{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}
+                    </p>
+                </div>
+                <div class="column">
+                    <mat-form-field appearance="outline">
+                        <mat-label for="mpvPlayerPath">{{
+                            'SETTINGS.MPV_PLAYER_PATH' | translate
+                        }}</mat-label>
+                        <input
+                            matInput
+                            type="text"
+                            id="mpvPlayerPath"
+                            formControlName="mpvPlayerPath"
+                        />
+                    </mat-form-field>
+                </div>
             </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label for="mpvPlayerPath">{{
-                        'SETTINGS.MPV_PLAYER_PATH' | translate
-                    }}</mat-label>
-                    <input
-                        matInput
-                        type="text"
-                        id="mpvPlayerPath"
-                        formControlName="mpvPlayerPath"
-                    />
-                </mat-form-field>
+        }
+        @if (settingsForm.value.player === 'vlc') {
+            <div class="row">
+                <div class="column">
+                    {{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
+                    <p>
+                        {{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}
+                    </p>
+                </div>
+                <div class="column">
+                    <mat-form-field appearance="outline">
+                        <mat-label for="vlcPlayerPath">{{
+                            'SETTINGS.VLC_PLAYER_PATH' | translate
+                        }}</mat-label>
+                        <input
+                            matInput
+                            type="text"
+                            id="vlcPlayerPath"
+                            formControlName="vlcPlayerPath"
+                        />
+                    </mat-form-field>
+                </div>
             </div>
-            <mat-divider></mat-divider>
-        </div>
-        <div class="row" *ngIf="settingsForm.value.player === 'vlc'">
-            <div class="column">
-                {{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
-                <p>{{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label for="vlcPlayerPath">{{
-                        'SETTINGS.VLC_PLAYER_PATH' | translate
-                    }}</mat-label>
-                    <input
-                        matInput
-                        type="text"
-                        id="vlcPlayerPath"
-                        formControlName="vlcPlayerPath"
-                    />
-                </mat-form-field>
-            </div>
-            <mat-divider></mat-divider>
-        </div>
+        }
+        <mat-divider />
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.LANGUAGE' | translate }}
@@ -159,7 +165,7 @@
                 </mat-form-field>
             </div>
         </div>
-        <mat-divider></mat-divider>
+        <mat-divider />
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.THEME' | translate }}
@@ -186,7 +192,7 @@
                 </mat-form-field>
             </div>
         </div>
-        <mat-divider></mat-divider>
+        <mat-divider />
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.SHOW_CAPTIONS' | translate }}
@@ -200,7 +206,7 @@
             </div>
         </div>
         @if (isPwa || isElectron) {
-            <mat-divider></mat-divider>
+            <mat-divider />
             <div class="row">
                 <div class="column">
                     {{ 'SETTINGS.REMOTE_CONTROL' | translate }}
@@ -216,26 +222,31 @@
                 </div>
             </div>
         }
-        <mat-divider></mat-divider>
-        <div class="row" *ngIf="settingsForm.value.remoteControl === true">
-            <div class="column">
-                {{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
-                <p>
-                    {{ 'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION' | translate }}
-                </p>
+        @if (settingsForm.value.remoteControl === true) {
+            <mat-divider />
+            <div class="row">
+                <div class="column">
+                    {{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
+                    <p>
+                        {{
+                            'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
+                                | translate
+                        }}
+                    </p>
+                </div>
+                <div class="column" style="margin-right: 10px">
+                    <mat-form-field appearance="outline" class="full-width">
+                        <input
+                            matInput
+                            type="text"
+                            id="remoteControlPort"
+                            formControlName="remoteControlPort"
+                        />
+                    </mat-form-field>
+                </div>
             </div>
-            <div class="column" style="margin-right: 10px">
-                <mat-form-field appearance="outline" class="full-width">
-                    <input
-                        matInput
-                        type="text"
-                        id="remoteControlPort"
-                        formControlName="remoteControlPort"
-                    />
-                </mat-form-field>
-            </div>
-        </div>
-        <mat-divider></mat-divider>
+        }
+        <mat-divider />
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.VERSION' | translate }}
@@ -246,7 +257,7 @@
                 {{ updateMessage }}
             </div>
         </div>
-        <mat-divider></mat-divider>
+        <mat-divider />
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}
@@ -307,7 +318,7 @@
             }}</a>
         </div>
 
-        <mat-divider></mat-divider>
+        <mat-divider />
         <div class="action-buttons" align="end">
             <button
                 mat-button
diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss
index b7534b9d9..0fbed37d0 100644
--- a/src/app/settings/settings.component.scss
+++ b/src/app/settings/settings.component.scss
@@ -5,7 +5,7 @@ button {
 
 .settings-container {
     overflow: auto;
-    height: calc(100vh - 140px);
+    height: calc(100vh - 100px);
 }
 
 .row {