fix: settings module layout

frontend/app/icons.config.mjs

@@ -20,7 +20,7 @@ const config = {
   htmlGlob: 'src/**/*.html',
   scriptGlob: 'src/**/*.ts',
   additionalIcons: {
-    about: ['copyright', 'campaign', 'policy', 'description', 'text_snippet', 'expand_more'],
+    about: ['copyright', 'campaign', 'policy', 'description', 'text_snippet', 'expand_more', 'expand_all'],
     navigation: [
       'home',
       'newspaper',

frontend/app/package.json

@@ -76,8 +76,8 @@
     "@capacitor/share": "7.0.2",
     "@capacitor/splash-screen": "7.0.2",
     "@ionic-native/core": "5.36.0",
-    "@ionic/angular": "8.6.1",
-    "@ionic/angular-server": "8.6.1",
+    "@ionic/angular": "8.7.2",
+    "@ionic/angular-server": "8.7.2",
     "@ionic/storage-angular": "4.0.0",
     "@maplibre/ngx-maplibre-gl": "17.4.1",
     "@ngx-translate/core": "15.0.0",
@@ -95,7 +95,7 @@
     "form-data": "4.0.4",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
-    "ionicons": "7.4.0",
+    "ionicons": "8.0.13",
     "jsonpath-plus": "10.3.0",
     "maplibre-gl": "4.0.2",
     "material-symbols": "0.17.1",

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -383,6 +383,7 @@ export class SearchPageComponent implements OnInit {
       cssClass: 'context-menu-modal',
       showBackdrop: true,
       backdropDismiss: true,
+      mode: 'md', // TODO has to be fixed to md for now. ios mode is unresponsive
       enterAnimation: (baseElement: HTMLElement) => enterAnimation(baseElement, this.animationController),
       leaveAnimation: (baseElement: HTMLElement) => leaveAnimation(baseElement, this.animationController),
       componentProps: {

frontend/app/src/app/modules/data/list/search-page.html

@@ -37,7 +37,8 @@
     >
     </ion-searchbar>
     @if (showContextMenu) {
-      <ion-menu-button menu="context" auto-hide="false" slot="end" (click)="openContextMenu()">
+      <!-- TODO has to be fixed to md for now. ios mode displays broken/missing icon -->
+      <ion-menu-button mode="md" menu="context" auto-hide="false" slot="end" (click)="openContextMenu()">
         <ion-icon name="tune"></ion-icon>
       </ion-menu-button>
     }

frontend/app/src/app/modules/settings/item/settings-item.html

@@ -33,7 +33,7 @@
     }
     <ion-card-content>
       @if (!compactView) {
-        <ion-note>{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>
+        <ion-note>{{ 'description' | thingTranslate: setting }}</ion-note>
       }
       @if (isVisible) {
         <div>

frontend/app/src/app/modules/settings/settings.provider.spec.ts

@@ -304,8 +304,8 @@ describe('SettingsProvider', () => {
         },
         en: {
           description:
-            'The user group the app is going to be used.' +
-            'This settings for example is getting used for the predefined price category of mensa meals.',
+            'The user group the app is going to use primarily.' +
+            ' This settings for example is getting used for the predefined price category of mensa meals.',
           name: 'Group',
         },
       },

frontend/app/src/app/util/ion-icon/ion-icon-custom-component.ts

@@ -150,7 +150,7 @@ const iconMap = new Map<string, MaterialSymbol>([
   [menuSharp, SCIcon.menu],
   [searchOutline, SCIcon.search],
   [searchSharp, SCIcon.search],
-  [chevronExpand, SCIcon.expand_more],
+  [chevronExpand, SCIcon.expand_all],
   [caretDownSharp, SCIcon.expand_more],
   [close, SCIcon.close],
   [closeSharp, SCIcon.close],

frontend/app/src/config/profile-page-sections.ts

@@ -62,7 +62,7 @@ export const profilePageSections: SCSection[] = [
     links: [
       {
         name: 'Favorites',
-        icon: SCIcon.grade,
+        icon: SCIcon.star,
         link: ['/favorites'],
         translations: {
           de: {

frontend/app/src/theme/common/_ion-searchbar.scss

@@ -17,14 +17,13 @@ $icon-size: 22px;
 app-root ion-searchbar[class*='sc-ion-searchbar-'] {
   --border-radius: var(--border-radius-default);
   --background: var(--ion-item-background) !important;
+  --box-shadow: none;
 
   height: 38px;
   padding-top: 0;
   padding-bottom: 0;
 
   &.filterable {
-    --box-shadow: none;
-
     position: relative;
     padding-right: 0;
     padding-left: 0;