feat: dark theme

src/app/app.component.html

@@ -1,3 +1,18 @@
+<!--
+  ~ 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/>.
+  -->
+
 <ion-app style="margin-top: env(safe-area-inset-top)">
   <stapps-navigation></stapps-navigation>
 </ion-app>

src/app/modules/about/about-licenses.scss

@@ -22,7 +22,7 @@ cdk-virtual-scroll-viewport {
   width: 100%;
 }
 
-::ng-deep {
+:host ::ng-deep {
   .cdk-virtual-scroll-content-wrapper {
     width: 100%;
   }

src/app/modules/about/about-page/about-page-content.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.
@@ -36,7 +36,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link">
+  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link" fill="clear">
     <ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
     <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
   </ion-item>

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

@@ -26,7 +26,7 @@
 </ion-header>
 <ion-content *ngIf="content" class="ion-content-parallax">
   <div>
-    <ion-text color="light">{{ appName }} v{{ version }}</ion-text>
+    <ion-text>{{ appName }} v{{ version }}</ion-text>
     <div class="page-content">
       <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
     </div>

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

@@ -62,10 +62,7 @@ ion-text {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-primary-contrast);
-    &.licenses-content {
-      background: var(--ion-color-light);
-    }
+    background: var(--ion-item-background);
 
     padding-block-end: var(--spacing-md);
     @include border-radius-in-parallax(var(--border-radius-default));
@@ -80,7 +77,6 @@ ion-text {
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {
@@ -89,3 +85,7 @@ ion-text {
     }
   }
 }
+
+ion-text {
+  color: var(--ion-color-primary-contrast);
+}

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

@@ -1,19 +1,20 @@
 /*!
- * Copyright (C) 2022 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.
+ * 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.
+ * 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/>.
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 .content {
   height: 100%;
   padding-inline: 8px;
+  --ion-item-background: var(--ion-background-color);
 }

src/app/modules/catalog/catalog.component.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.
@@ -27,3 +27,7 @@ ion-toolbar.in-toolbar {
     padding: 0 !important;
   }
 }
+
+:host {
+  --ion-item-background: var(--ion-backgrund-color);
+}

src/app/modules/dashboard/dashboard.component.scss

@@ -48,7 +48,7 @@
 }
 
 ion-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-background-color);
   --padding-bottom: var(--spacing-xl);
   &::part(inner-scroll) {
     scrollbar-gutter: stable;
@@ -59,6 +59,7 @@ ion-content {
   width: 100%;
   z-index: 3;
   background: var(--ion-color-primary);
+  color: var(--ion-color-primary-contrast);
   display: flex;
   justify-content: space-between;
   gap: var(--spacing-md);

src/app/modules/data/data.module.ts

@@ -99,6 +99,7 @@ import {SCThingListItemVirtualScrollStrategyDirective} from './list/sc-thing-lis
 import {DataListItemHostDirective} from './list/data-list-item-host.directive';
 import {DataListItemHostDefaultComponent} from './list/data-list-item-host-default.component';
 import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
+import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
 
 /**
  * Module for handling data
@@ -111,6 +112,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
     AddressDetailComponent,
     CatalogDetailContentComponent,
     CatalogListItemComponent,
+    DishCharacteristicsComponent,
     DataDetailComponent,
     DataDetailContentComponent,
     DataIconPipe,

src/app/modules/data/detail/data-detail-content.scss

@@ -38,7 +38,7 @@ stapps-origin-detail {
     position: relative;
     margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
     margin-block-end: var(--spacing-xl);
-    background-color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-card-background);
     @include content-padding();
 
     & > ion-thumbnail {
@@ -73,7 +73,6 @@ stapps-origin-detail {
       padding-bottom: 8px;
     }
     ion-card-header {
-      color: var(--ion-color-dark);
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;

src/app/modules/data/detail/data-detail.scss

@@ -19,3 +19,15 @@ ion-content > div {
   flex-direction: column;
   flex: 1;
 }
+
+stapps-data-path ::ng-deep ion-breadcrumb {
+  color: var(--ion-color-primary-contrast);
+
+  &::part(separator) {
+    color: var(--ion-color-primary-contrast);
+  }
+
+  &::part(collapsed-indicator) {
+    background: var(--ion-color-primary-contrast);
+  }
+}

src/app/modules/data/elements/favorite-button.component.html

@@ -1,16 +1,16 @@
 <!--
-  ~ Copyright (C) 2022 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.
+  ~ 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.
+  ~ 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/>.
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">

src/app/modules/data/elements/favorite-button.component.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.
@@ -27,6 +27,7 @@
   }
 
   .selected {
+    // TODO
     color: #fbc02d;
   }
 }

src/app/modules/data/elements/title-card.component.html

@@ -38,7 +38,6 @@
     <ion-button
       expand="full"
       fill="clear"
-      color="light"
       *ngIf="item.description && buttonShown"
       (click)="toggleDescriptionAccordion()"
     >

src/app/modules/data/elements/title-card.component.scss

@@ -39,10 +39,14 @@ ion-card {
     padding: 0 0 var(--header-spacing-bottom);
 
     .description * {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
     }
     .openingHours {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
     }
   }
+
+  ion-button {
+    --color: var(--ion-color-primary-contrast);
+  }
 }

src/app/modules/data/list/data-list-item.scss

@@ -13,7 +13,6 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import 'src/theme/util/_mixins.scss';
-@import 'src/theme/common/_helper.scss';
 
 :host {
   display: block;
@@ -50,11 +49,6 @@ ion-item {
       flex-direction: column;
     }
   }
-  ::ng-deep {
-    ion-note {
-      @extend %horizontal-list;
-    }
-  }
 }
 
 :host.square ::ng-deep {

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

@@ -56,7 +56,10 @@
 </ion-header>
 
 <ion-content class="content">
-  <div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
+  <div
+    [class.no-results]="!showDefaultData && !items && !loading"
+    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
+  >
     <ion-label class="centeredMessageContainer">
       {{ 'search.instruction' | translate }}
     </ion-label>

src/app/modules/data/list/search-page.scss

@@ -37,7 +37,7 @@ ion-toolbar:first-of-type {
 }
 
 ion-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-background-color);
 }
 
 .content > div {

src/app/modules/data/types/dish/dish-characteristics.component.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 {Component, Input} from '@angular/core';
+import {SCDish} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-dish-characteristics',
+  templateUrl: 'dish-characteristics.html',
+  styleUrls: ['dish-characteristics.scss'],
+})
+export class DishCharacteristicsComponent {
+  @Input() item: SCDish;
+}

src/app/modules/data/types/dish/dish-characteristics.html

@@ -0,0 +1,28 @@
+<!--
+  ~ 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/>.
+  -->
+<ion-note>
+  <ng-container *ngIf="item.characteristics">
+    <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
+      <!-- Abbr tag shows the actual name on hover -->
+      <abbr
+        [style.--background-url]="'url(' + characteristic.image + ')'"
+        [title]="characteristic.name | titlecase"
+      ></abbr>
+    </ng-container>
+  </ng-container>
+  <ion-label>
+    {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+  </ion-label>
+</ion-note>

src/app/modules/data/types/dish/dish-characteristics.scss

@@ -0,0 +1,38 @@
+/*!
+ * 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/>.
+ */
+ion-note {
+  list-style: none;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+}
+
+abbr {
+  width: 16px;
+  aspect-ratio: 1;
+
+  background: var(--ion-color-medium);
+
+  mask-image: var(--background-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  mask-mode: alpha;
+
+  + ion-label::after {
+    content: '•';
+    margin-inline: var(--spacing-xs);
+  }
+}

src/app/modules/data/types/dish/dish-detail-content.html

@@ -13,31 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <ion-card *ngIf="item.categories">
-        <ion-card-header>
-          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-    <ion-col>
-      <ion-card *ngIf="item.characteristics">
-        <ion-card-header class="no-padding-inline-start vertical-list">
-          <ul>
-            <li>
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-
+<stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
@@ -92,7 +68,7 @@
 -->
 <stapps-simple-card
   *ngIf="item.additives"
-  [title]="'additives' | propertyNameTranslate: item"
+  [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
   [content]="'additives' | thingTranslate: item | join: ', '"
 >
 </stapps-simple-card>

src/app/modules/data/types/dish/dish-detail-content.scss

@@ -12,10 +12,7 @@
  * 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/common/_helper.scss';
-.vertical-list {
-  ul li img {
-    filter: unset;
-  }
+stapps-dish-characteristics {
+  margin: var(--spacing-lg);
+  margin-block-end: var(--spacing-sm);
 }

src/app/modules/data/types/dish/dish-list-item.html

@@ -21,18 +21,7 @@
         <p class="title-sub ion-hide-sm-down">
           {{ 'description' | thingTranslate: item }}
         </p>
-        <ion-note>
-          <ul>
-            <li>
-              {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-            </li>
-            <li *ngIf="item.characteristics">
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-note>
+        <stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
       </div>
     </ion-col>
     <ion-col width-10 text-right>

src/app/modules/data/types/event/event-list-item.html

@@ -24,9 +24,9 @@
         <p *ngIf="item.academicTerms" class="title-sub">
           {{ 'name' | thingTranslate: item.academicTerms[0] }}
         </p>
-        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item }}</ion-note>
+        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
         <ion-note *ngIf="item.categories">
-          {{ 'categories' | thingTranslate: item | join: ', ' }}
+          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
         </ion-note>
       </div>
     </ion-col>

src/app/modules/data/types/message/message-detail-content.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.
@@ -40,9 +40,8 @@
 </div>
 
 <ng-template #news>
-  <ion-thumbnail>
+  <ion-thumbnail *ngIf="item.image" style="background-image: url('{{ item.image }}')">
     <ion-img
-      *ngIf="item.image"
       src="{{ item.image }}"
       (ionError)="$event.target.nextSibling.style.display = 'none'"
       alt="{{ item.name }}"

src/app/modules/data/types/message/message-detail-content.scss

@@ -1,5 +1,5 @@
-/*
- * Copyright (C) 2021 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.
@@ -15,17 +15,24 @@
 
 :host {
   ion-thumbnail {
+    position: relative;
     width: 100%;
     height: auto;
-    img {
-      display: block;
-    }
-  }
-  // Show smaller image on a desktop
-  @media (min-width: 992px) {
-    ion-thumbnail {
-      width: 60%;
-      margin: 0 auto;
+    margin-inline: auto;
+    overflow: hidden;
+    background-size: contain;
+    background-position: center;
+    transform: scaleX(-1);
+
+    ion-img {
+      backdrop-filter: blur(32px);
+
+      &::part(image) {
+        transform: scaleX(-1);
+        max-width: 16cm;
+        object-fit: contain;
+        margin-inline: auto;
+      }
     }
   }
 

src/app/modules/data/types/place/place-detail-content.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.
@@ -12,10 +12,13 @@
  * 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 {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {SCBuilding, SCFloor, SCPointOfInterest, SCRoom, SCThings} from '@openstapps/core';
 import {DataProvider} from '../../data.provider';
 import {hasValidLocation, isSCFloor} from './place-types';
+import {DataRoutingService} from '../../data-routing.service';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
 
 /**
  * TODO
@@ -26,7 +29,7 @@ import {hasValidLocation, isSCFloor} from './place-types';
   selector: 'stapps-place-detail-content',
   templateUrl: 'place-detail-content.html',
 })
-export class PlaceDetailContentComponent implements OnInit {
+export class PlaceDetailContentComponent implements OnInit, OnDestroy {
   /**
    * TODO
    */
@@ -39,6 +42,8 @@ export class PlaceDetailContentComponent implements OnInit {
    */
   hasValidLocation = false;
 
+  itemRouting: Subscription;
+
   /**
    * TODO
    *
@@ -63,7 +68,17 @@ export class PlaceDetailContentComponent implements OnInit {
     );
   }
 
+  constructor(dataRoutingService: DataRoutingService, router: Router) {
+    this.itemRouting = dataRoutingService.itemSelectListener().subscribe(item => {
+      void router.navigate(['/data-detail', item.uid]);
+    });
+  }
+
   ngOnInit() {
     this.hasValidLocation = !isSCFloor(this.item) && hasValidLocation(this.item);
   }
+
+  ngOnDestroy() {
+    this.itemRouting.unsubscribe();
+  }
 }

src/app/modules/data/types/place/place-detail-content.html

@@ -35,8 +35,7 @@
       {{ 'inPlace' | propertyNameTranslate: item | titlecase }}
     </ion-card-header>
     <ion-card-content>
-      <ion-icon name="pin_drop"></ion-icon>
-      <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate: item.inPlace }}</a>
+      <stapps-data-list-item [item]="item.inPlace"></stapps-data-list-item>
     </ion-card-content>
   </ion-card>
 </ng-container>

src/app/modules/data/types/place/place-list-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.
@@ -14,7 +14,7 @@
  */
 import {Component, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {Subscription, interval} from 'rxjs';
+import {interval, Subscription} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
 
 /**
@@ -23,6 +23,7 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
 @Component({
   selector: 'stapps-place-list-item',
   templateUrl: 'place-list-item.html',
+  styleUrls: ['place-list-item.scss'],
 })
 export class PlaceListItemComponent {
   /**

src/app/modules/data/types/place/place-list-item.html

@@ -26,28 +26,24 @@
           </p>
           <p>
             <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
-              <ul>
-                <li>
-                  {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-                </li>
-                <li *ngIf="distance">
-                  <ion-icon name="directions_walk"></ion-icon>
-                  {{ distance | metersLocalized }}
-                </li>
-              </ul>
+              <ion-label>
+                {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+              </ion-label>
+              <ion-label *ngIf="distance" class="distance">
+                <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
+              </ion-label>
             </ion-note>
           </p>
           <ng-template #onlyType>
             <ion-note>
-              <ul>
-                <li>
-                  {{ 'type' | thingTranslate: item }}
-                </li>
-                <li *ngIf="distance">
-                  <ion-icon name="directions_walk"></ion-icon>
-                  {{ distance | metersLocalized }}
-                </li>
-              </ul>
+              <ion-label>
+                {{ 'type' | thingTranslate: item | titlecase }}
+              </ion-label>
+              <ion-label *ngIf="distance" class="distance">
+                <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
+              </ion-label>
             </ion-note>
           </ng-template>
         </ng-container>
@@ -56,10 +52,11 @@
         </p>
       </div>
     </ion-col>
-    <div *ngIf="item.type !== 'building'">
-      <ion-col width-20 text-right *ngIf="item.inPlace">
-        <ion-icon name="pin_drop"></ion-icon>{{ 'name' | thingTranslate: item.inPlace }}
+    <ng-container *ngIf="item.type !== 'building'">
+      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
+        <ion-icon name="pin_drop"></ion-icon
+        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
       </ion-col>
-    </div>
+    </ng-container>
   </ion-row>
 </ion-grid>

src/app/modules/data/types/place/place-list-item.scss

@@ -0,0 +1,36 @@
+/*!
+ * 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/>.
+ */
+
+ion-note {
+  display: flex;
+
+  > ion-label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+ion-label + ion-label.distance::before {
+  content: '•';
+  margin-inline: var(--spacing-xs);
+}
+
+.in-place {
+  display: flex;
+
+  justify-content: end;
+  align-items: center;
+}

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

@@ -57,7 +57,7 @@ ion-button {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-light);
+    background: var(--ion-item-background);
     @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
@@ -70,7 +70,6 @@ ion-button {
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {

src/app/modules/map/page/map-page.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.
@@ -87,18 +87,10 @@ div.map-buttons {
   ion-button {
     margin: 4px;
     // important for iOS
+    // TODO: find an option that is better suited for the iOS theme
     --box-shadow: var(--map-box-shadow);
     align-self: flex-end;
   }
-
-  ion-button::part(native) {
-    background: white;
-  }
-
-  ion-button::part(native):hover,
-  ion-button::part(native):focus {
-    background: whitesmoke;
-  }
 }
 
 div.map-buttons.above {

src/app/modules/map/widget/map-widget.scss

@@ -1,3 +1,18 @@
+/*!
+ * 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/>.
+ */
+
 div.map-container {
   height: 100%;
   width: 100%;

src/app/modules/menu/context/context-menu.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.

src/app/modules/menu/navigation/navigation.scss

@@ -66,7 +66,7 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
 }
 
 ion-router-outlet {
-  background: white;
+  background: var(--ion-background-color);
 }
 
 .menu-category {

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

@@ -23,7 +23,7 @@ ion-card::part(native) {
   display: flex;
   flex-direction: column-reverse;
   height: 100%;
-  background: linear-gradient(to top, var(--ion-color-dark), transparent);
+  background: linear-gradient(to top, #0e0e0e, transparent);
 }
 
 .card {
@@ -38,10 +38,10 @@ ion-card-title {
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: var(--font-size-xl);
-  --color: var(--ion-color-dark-contrast);
+  --color: var(--ion-text-color-dark, white);
   max-lines: 3;
 }
 
 ion-card-subtitle {
-  --color: var(--ion-color-dark-contrast);
+  --color: var(--ion-text-color-dark, white);
 }

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

@@ -95,7 +95,7 @@
       <ion-card class="courses-card">
         <ion-card-header (click)="toggleCourseCardState()">
           <span>{{ 'profile.courses.today' | translate | uppercase }}</span>
-          <ion-icon [name]="courseCardState" fill="red" size="20"></ion-icon>
+          <ion-icon [name]="courseCardState" color="dark" size="20"></ion-icon>
         </ion-card-header>
         <ion-card-content class="course-card" [class.show-card]="courseCardState === courseCardEnum.expanded">
           <ng-container *ngIf="myCoursesToday.length === 0">

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

@@ -159,14 +159,14 @@
       max-width: 800px;
 
       ion-card-header {
-        background-color: var(--ion-color-light-contrast);
+        background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         span {
-          color: var(--ion-color-light);
+          color: var(--ion-item-background-color-contrast);
           font-size: var(--font-size-lg);
           font-weight: var(--font-weight-bold);
         }
@@ -179,7 +179,7 @@
       ion-card-content {
         margin: 0;
         padding: 0;
-        background-color: var(--ion-color-primary-contrast);
+        background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default);
         max-height: 0;
         overflow: hidden;
@@ -196,7 +196,7 @@
         div {
           font-size: var(--font-size-md);
           font-weight: var(--font-weight-black);
-          color: var(--ion-color-light-contrast);
+          color: var(--ion-item-background-color-contrast);
           text-align: center;
 
           &.no-course {

src/app/modules/schedule/page/components/calendar-component.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.
@@ -86,17 +86,17 @@ ion-content {
 
   .hours-wrapper {
     z-index: 100;
-    background-color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-background-color);
 
     .hour-lines {
       width: 40px;
       height: 70px;
-      border-right: 1px solid var(--ion-color-light);
+      border-right: 1px solid var(--ion-item-border-color);
       text-align: center;
       top: 0;
       position: absolute;
       font-weight: var(--font-weight-bold);
-      background-color: var(--calender-background-color);
+      background-color: var(--ion-background-color);
     }
   }
 
@@ -106,7 +106,7 @@ ion-content {
 }
 
 .date-header {
-  border-bottom: 1px solid var(--calender-date-line-gray);
+  border-bottom: 1px solid var(--ion-item-border-color);
   padding: var(--spacing-sm) auto;
   height: fit-content;
   font-weight: var(--font-weight-bold);

src/app/modules/schedule/page/grid/schedule-card.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.
@@ -27,8 +27,8 @@ import {ScheduleEvent} from '../schema/schema';
 })
 export class ScheduleCardComponent implements OnInit {
   cardColor = {
-    isBlack: false,
-    isBlue: false,
+    isExercise: false,
+    isLecture: false,
     isDefault: false,
   };
 
@@ -91,8 +91,8 @@ export class ScheduleCardComponent implements OnInit {
     this.title = this.scheduleEvent.dateSeries.event.name;
 
     this.cardColor = {
-      isBlack: false,
-      isBlue: false,
+      isLecture: false,
+      isExercise: false,
       isDefault: false,
     };
 
@@ -102,10 +102,10 @@ export class ScheduleCardComponent implements OnInit {
         : ''
     ) {
       case 'lecture':
-        this.cardColor.isBlue = true;
+        this.cardColor.isLecture = true;
         break;
       case 'exercise':
-        this.cardColor.isBlack = true;
+        this.cardColor.isExercise = true;
         break;
       default:
         this.cardColor.isDefault = true;

src/app/modules/schedule/page/grid/schedule-card.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.
@@ -19,8 +19,8 @@
   [style.marginTop.px]="noOffset ? 0 : (fromY - fromHour) * scale - 5 + 45"
   [routerLink]="['/data-detail', scheduleEvent.dateSeries.uid]"
   [class.defaultCard]="cardColor.isDefault"
-  [class.blueCard]="cardColor.isBlue"
-  [class.blackCard]="cardColor.isBlack"
+  [class.lectureCard]="cardColor.isLecture"
+  [class.exerciseCard]="cardColor.isExercise"
   class="clickable"
 >
   <ion-card-header mode="md">

src/app/modules/schedule/page/grid/schedule-card.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.
@@ -20,55 +20,23 @@ ion-card {
   margin-right: 0;
   border-radius: 0;
 
-  &.blueCard {
-    --background: var(--calender-blue-card);
+  @each $name in lecture, exercise, default {
+    &.#{$name}Card {
+      --background: var(--calender-#{$name}-card);
 
-    ion-card-title,
-    ion-card-subtitle span,
-    ion-card-content ion-note,
-    ion-card-content ion-text {
-      color: var(--ion-color-primary-contrast);
-    }
+      ion-card-title,
+      ion-card-subtitle span,
+      ion-card-content ion-note,
+      ion-card-content ion-text {
+        color: var(--calender-#{$name}-card-contrast);
+      }
 
-    &:after {
-      background: linear-gradient(
-        rgba(var(--calender-blue-card-rgb), 0%),
-        rgba(var(--calender-blue-card-rgb), 100%)
-      );
-    }
-  }
-  &.blackCard {
-    --background: var(--calender-black-card);
-
-    ion-card-title,
-    ion-card-subtitle span,
-    ion-card-content ion-note,
-    ion-card-content ion-text {
-      color: var(--ion-color-primary-contrast);
-    }
-
-    &:after {
-      background: linear-gradient(
-        rgba(var(--calender-black-card-rgb), 0%),
-        rgba(var(--calender-black-card-rgb), 100%)
-      );
-    }
-  }
-  &.defaultCard {
-    --background: var(--calender-default-card);
-
-    ion-card-title,
-    ion-card-subtitle span,
-    ion-card-content ion-note,
-    ion-card-content ion-text {
-      color: var(--ion-color-light-contrast);
-    }
-
-    &:after {
-      background: linear-gradient(
-        rgba(var(--calender-light-card-rgb), 0%),
-        rgba(var(--calender-light-card-rgb), 100%)
-      );
+      &:after {
+        background: linear-gradient(
+          rgba(var(--calender-#{$name}-card-rgb), 0%),
+          rgba(var(--calender-#{$name}-card-rgb), 100%)
+        );
+      }
     }
   }
 
@@ -78,10 +46,6 @@ ion-card {
     bottom: 0;
     height: 33%;
     width: 100%;
-    background: linear-gradient(
-      rgba(var(--calender-blue-card-rgb), 0%),
-      rgba(var(--calender-blue-card-rgb), 100%)
-    );
   }
 
   ion-card-header {

src/app/modules/schedule/page/grid/schedule-day.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2021 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.
@@ -15,8 +15,8 @@
 
 :host {
   .day-wrapper {
-    border-left: 1px solid var(--calender-date-line-gray);
-    border-right: 1px solid var(--calender-date-line-gray);
+    border-left: 1px solid var(--ion-item-border-color);
+    border-right: 1px solid var(--ion-item-border-color);
 
     &.leftmost {
       border-left: unset;
@@ -28,15 +28,15 @@
       left: 0;
       height: fit-content;
       padding: var(--spacing-md);
-      border-bottom: 2px solid var(--ion-color-light);
+      border-bottom: 2px solid var(--ion-item-border-color);
       font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       text-align: center;
-      background-color: var(--ion-color-primary-contrast);
+      background-color: var(--ion-background-color);
       z-index: 3;
 
       &.leftmost {
-        border-left: 1px solid var(--ion-color-light);
+        border-left: 1px solid var(--ion-item-border-color);
       }
     }
   }

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

@@ -50,7 +50,7 @@
 
       <calendar-sync-settings></calendar-sync-settings>
 
-      <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
+      <ion-button expand="block" (click)="presentResetAlert()" fill="outline">
         {{ 'settings.resetSettings' | translate }}
         <ion-icon slot="start" name="device_reset"></ion-icon>
       </ion-button>

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

@@ -49,7 +49,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-light);
+    background: var(--ion-item-background);
     @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
@@ -62,7 +62,6 @@
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {