feat: rework settings page design

src/app/modules/settings/item/settings-item.component.ts

@@ -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.
@@ -24,6 +24,7 @@ import {SettingsProvider} from '../settings.provider';
 @Component({
   selector: 'stapps-settings-item',
   templateUrl: 'settings-item.html',
+  styleUrls: ['settings-item.scss'],
 })
 export class SettingsItemComponent {
   /**

src/app/modules/settings/item/settings-item.scss

@@ -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.
@@ -12,6 +12,3 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-page-settings {
-}

src/app/modules/settings/page/settings-page.component.ts

@@ -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.
@@ -24,6 +24,7 @@ import {SettingsCache, SettingsProvider} from '../settings.provider';
 @Component({
   selector: 'stapps-settings-page',
   templateUrl: 'settings-page.html',
+  styleUrls: ['settings-page.scss'],
 })
 export class SettingsPageComponent implements OnInit {
   /**

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>

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

@@ -0,0 +1,73 @@
+/*!
+ * 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.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@import 'src/theme/util/_mixins.scss';
+
+:host ::ng-deep {
+  ion-card {
+    margin: 0;
+    box-shadow: none;
+    ion-card-content {
+      h1 {
+        margin: 0;
+      }
+      padding-bottom: 8px;
+    }
+    ion-card-header {
+      color: var(--ion-color-dark);
+      padding-top: 8px;
+      padding-bottom: 4px;
+      font-weight: bold;
+    }
+    ion-grid,
+    ion-col {
+      padding-inline-start: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  ion-grid,
+  ion-col {
+    padding-inline-start: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .settings-content {
+    margin: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    background: var(--ion-color-light);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
+    & > * {
+      ion-card-subtitle {
+        font-size: var(--font-size-lg);
+        color: var(--ion-color-light-contrast);
+      }
+
+      display: block;
+      @include border-radius-in-parallax(var(--border-radius-default));
+      overflow: hidden;
+      position: relative;
+      background-color: var(--ion-color-primary-contrast);
+      margin: 0;
+
+      & > ion-thumbnail {
+        background: var(--ion-color-primary);
+      }
+    }
+  }
+}

src/app/modules/settings/settings.module.ts

@@ -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.