chore: update all inputs to ionic v7, update select components to ion-item

packages/frontend/src/app/app.scss

@@ -198,107 +198,3 @@ ion-button.button-outline {
   padding: 0;
   cursor: pointer;
 }
-
-/* Font size overrides */
-html,
-:host {
-  font-size: 1rem;
-}
-
-ion-item {
-  font-size: 1rem;
-
-  > h3 {
-    font-size: 1.375rem;
-  }
-}
-
-ion-list-header.md {
-  font-size: 0.875rem;
-}
-ion-list-header.ios {
-  font-size: 1.375rem;
-}
-
-ion-label.md,
-ion-label.ios {
-  p {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  > h2 {
-    font-size: 1rem;
-  }
-}
-ion-label.sc-ion-label-ios-h.ios {
-  font-size: 0.875rem;
-}
-
-ion-button {
-  white-space: normal;
-  font-size: 0.875rem;
-
-  &.button-small {
-    font-size: 0.8125rem;
-  }
-}
-
-ion-alert.md {
-  .alert-title {
-    font-size: 1.25rem;
-  }
-
-  .alert-sub-title {
-    font-size: 1rem;
-  }
-
-  .alert-message {
-    font-size: 1rem;
-  }
-
-  input {
-    font-size: 0.875rem;
-  }
-
-  .alert-button {
-    font-size: 0.875rem;
-  }
-}
-
-ion-alert.ios {
-  .alert-title {
-    font-size: 1.063rem;
-  }
-
-  .alert-sub-title {
-    font-size: 0.875rem;
-  }
-
-  .alert-message {
-    font-size: 0.813rem;
-  }
-
-  input {
-    font-size: 0.813rem;
-  }
-
-  .alert-button {
-    font-size: 1.063rem;
-  }
-}
-
-.alert-radio-label.sc-ion-alert-md {
-  font-size: 1rem;
-}
-.alert-radio-label.sc-ion-alert-ios {
-  font-size: 0.875rem;
-}
-
-.popover-viewport > ion-header > ion-toolbar > ion-title.md {
-  font-size: 1.25rem;
-}
-.popover-viewport > ion-header > ion-toolbar > ion-title.ios {
-  font-size: 1.0625rem;
-  padding-inline: unset;
-}

packages/frontend/src/app/components/rating-filter-popover/rating-filter-popover.component.html

@@ -10,25 +10,26 @@
   <ion-list *ngIf="ratingFilter">
     <ion-item lines="none">
       <ion-checkbox
-        slot="start"
+        labelPlacement="end"
+        justify="start"
         [checked]="ratingFilter.includes(null)"
         (ionChange)="toggle(null)"
-      ></ion-checkbox>
-      <ion-label>
+      >
         {{ "components.ratingFilter.unrated" | translate }}
-      </ion-label>
+      </ion-checkbox>
     </ion-item>
 
     <ion-item lines="none" *ngFor="let possibleRating of possibleRatings">
       <ion-checkbox
-        slot="start"
+        labelPlacement="end"
+        justify="start"
         [checked]="ratingFilter.includes(possibleRating)"
         (ionChange)="toggle(possibleRating)"
-      ></ion-checkbox>
-
-      <ion-label>
-        <rating [rating]="possibleRating"></rating>
-      </ion-label>
+      >
+        <div style="display: flex">
+          <rating [rating]="possibleRating"></rating>&nbsp;
+        </div>
+      </ion-checkbox>
     </ion-item>
   </ion-list>
 </ion-content>

packages/frontend/src/app/components/select-ingredients/select-ingredients.component.html

@@ -5,22 +5,26 @@
     </p>
 
     <ion-item>
-      <ion-label>
-        {{ "components.selectIngredients.toggleAll" | translate }}
-      </ion-label>
       <ion-checkbox
+        labelPlacement="end"
+        justify="start"
         [(ngModel)]="allSelected"
         (ngModelChange)="resetAll()"
         checked="true"
-      ></ion-checkbox>
+      >
+        {{ "components.selectIngredients.toggleAll" | translate }}
+      </ion-checkbox>
     </ion-item>
     <ion-item *ngFor="let ingredient of scaledIngredients; let i = index">
-      <ion-label>{{ ingredient.content }}</ion-label>
       <ion-checkbox
+        labelPlacement="end"
+        justify="start"
         [(ngModel)]="ingredientBinders[i]"
         (ngModelChange)="toggleIngredient(i)"
         checked="true"
-      ></ion-checkbox>
+      >
+        {{ ingredient.content }}
+      </ion-checkbox>
     </ion-item>
     <br />
     <a class="scale" (click)="changeScale()">

packages/frontend/src/app/components/select-knownuser/select-knownuser.component.html

@@ -19,11 +19,12 @@
             [src]="friendship.otherUser.profileImages[0].location"
           />
         </ion-avatar>
-        <ion-label>
-          <h2>{{ friendship.otherUser.name }}</h2>
-          <p>&commat;{{ friendship.otherUser.handle }}</p>
-        </ion-label>
-        <ion-radio [value]="friendship"></ion-radio>
+        <ion-radio labelPlacement="end" justify="start" [value]="friendship">
+          <ion-label>
+            {{ friendship.otherUser.name }}
+            <p>&commat;{{ friendship.otherUser.handle }}</p>
+          </ion-label>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
   </ion-list>
@@ -38,11 +39,12 @@ <h2>{{ friendship.otherUser.name }}</h2>
       </ion-list-header>
 
       <ion-item *ngFor="let thread of threads">
-        <ion-label>
-          <h2>{{ thread.otherUser.name }}</h2>
-          <p>{{ thread.otherUser.email }}</p>
-        </ion-label>
-        <ion-radio [value]="thread"></ion-radio>
+        <ion-radio labelPlacement="end" justify="start" [value]="thread">
+          <ion-label>
+            {{ thread.otherUser.name }}
+            <p>{{ thread.otherUser.email }}</p>
+          </ion-label>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
   </ion-list>

packages/frontend/src/app/components/select-label/select-label.component.html

@@ -0,0 +1,49 @@
+<div>
+  <ion-item (click)="selectedLabel = undefined" *ngIf="selectedLabel" button>
+    <ion-icon name="pricetag" slot="start"></ion-icon>
+    <ion-label>
+      <h2>
+        {{ selectedLabel.title }}
+      </h2>
+      <p>
+        {{ "components.selectLabel.change" | translate }}
+      </p>
+    </ion-label>
+  </ion-item>
+
+  <div *ngIf="!selectedLabel">
+    <ion-searchbar
+      (ionInput)="onSearchInputChange($event)"
+      placeholder="{{ 'components.selectLabel.search' | translate }}"
+      autocomplete="off"
+    ></ion-searchbar>
+    <div class="ion-padding-start ion-padding-end">
+      <div class="results-list-container" *ngIf="searchText.length">
+        <div class="results-list">
+          <ion-item
+            *ngFor="let label of results; trackBy: labelTrackBy"
+            (click)="selectLabel(label)"
+            button
+          >
+            <ion-icon name="pricetag" slot="start"></ion-icon>
+            <ion-label>
+              <h2>
+                {{ label.title }}
+              </h2>
+              <p>{{ "components.selectLabel.select" | translate }}</p>
+            </ion-label>
+          </ion-item>
+          <!-- Searching for label which does not exist -->
+          <ion-item *ngIf="results.length === 0 && searchText.length > 0">
+            <ion-icon name="folder-open" slot="start"></ion-icon>
+            <ion-label>
+              {{
+                "components.selectLabel.null" | translate: { name: searchText }
+              }}
+            </ion-label>
+          </ion-item>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

packages/frontend/src/app/components/select-label/select-label.component.scss

@@ -0,0 +1,22 @@
+.results-list ion-item {
+  --background: var(--ion-background-tint-color);
+}
+
+.results-list {
+  position: absolute;
+  width: 100%;
+  overflow-y: auto;
+  margin-top: -6px;
+  z-index: 2;
+  background-color: var(--ion-background-tint-color);
+  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.4);
+}
+
+.results-list-container {
+  position: relative;
+}
+
+ion-spinner {
+  width: 24px;
+  height: 24px;
+}

packages/frontend/src/app/components/select-label/index.ts → packages/frontend/src/app/components/select-label/select-label.component.ts

@@ -6,8 +6,8 @@ import { ToastController, NavController } from "@ionic/angular";
 
 @Component({
   selector: "select-label",
-  templateUrl: "index.html",
-  styleUrls: ["./index.scss"],
+  templateUrl: "select-label.component.html",
+  styleUrls: ["./select-label.component.scss"],
 })
 export class SelectLabelComponent {
   searchText = "";
@@ -50,6 +50,10 @@ export class SelectLabelComponent {
 
   onSearchInputChange(event: any) {
     this.searchText = event.detail.value || "";
+    if (!this.searchText) {
+      this.results = this.labels;
+      return;
+    }
 
     this.results = this.labels.filter((label) =>
       label.title.includes(this.searchText),
@@ -61,4 +65,8 @@ export class SelectLabelComponent {
     this.searchText = "";
     this.results = this.labels;
   }
+
+  labelTrackBy(index: number, label: Label) {
+    return label.id;
+  }
 }

packages/frontend/src/app/components/select-label/module.ts → packages/frontend/src/app/components/select-label/select-label.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { IonicModule } from "@ionic/angular";
 
-import { SelectLabelComponent } from "./index";
+import { SelectLabelComponent } from "./select-label.component";
 import { GlobalModule } from "~/global.module";
 
 @NgModule({

packages/frontend/src/app/components/select-meal/select-meal.component.html

@@ -1,9 +1,10 @@
 <div>
   <ion-item>
-    <ion-label>
-      {{ "components.selectMeal.title" | translate }}
-    </ion-label>
-    <ion-select [(ngModel)]="meal" (ngModelChange)="mealChanged()">
+    <ion-select
+      label="{{ 'components.selectMeal.title' | translate }}"
+      [(ngModel)]="meal"
+      (ngModelChange)="mealChanged()"
+    >
       <ion-select-option
         *ngFor="let mealOption of mealOptions"
         [value]="mealOption.key"