feat: rework settings page design

src/app/modules/settings/page/settings-page.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -22,32 +22,38 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-list *ngFor="let categoryKey of categoriesOrder">
-    <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
-      <ion-item-divider>
-        <h5>
-          {{
-            'categories[0]'
-              | thingTranslate
-                : $any(
-                    settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]
-                  )
-              | titlecase
-          }}
-        </h5>
-      </ion-item-divider>
-      <stapps-settings-item
-        *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
-        [setting]="settingsCache[categoryKey].settings[settingKeys]"
-      ></stapps-settings-item>
+<ion-content class="ion-no-padding ion-content-parallax">
+  <div>
+    <div class="settings-content">
+      <ng-container *ngFor="let categoryKey of categoriesOrder">
+        <ion-list *ngIf="objectKeys(settingsCache).includes(categoryKey)">
+          <!-- <ion-item-divider>
+            <h2>
+              {{
+                'categories[0]'
+                  | thingTranslate
+                    : $any(
+                        settingsCache[categoryKey]?.settings[
+                          objectKeys(settingsCache[categoryKey]?.settings)[0]
+                        ]
+                      )
+                  | titlecase
+              }}
+            </h2>
+          </ion-item-divider> -->
+          <stapps-settings-item
+            *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
+            [setting]="settingsCache[categoryKey].settings[settingKeys]"
+          ></stapps-settings-item>
+        </ion-list>
+      </ng-container>
+
+      <calendar-sync-settings></calendar-sync-settings>
+
+      <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
+        {{ 'settings.resetSettings' | translate }}
+        <ion-icon slot="start" name="device_reset"></ion-icon>
+      </ion-button>
     </div>
-  </ion-list>
-
-  <calendar-sync-settings></calendar-sync-settings>
-
-  <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
-    {{ 'settings.resetSettings' | translate }}
-    <ion-icon slot="start" name="device_reset"></ion-icon>
-  </ion-button>
+  </div>
 </ion-content>