fix: favorite button

frontend/app/src/theme/THEMING.md

@@ -0,0 +1,9 @@
+# Theming
+
+## Customizing the theme
+
+- `colors.scss` contains the brand colors you can customize
+- `color-processing.scss` contains some values you can use to adjust how the theme is generated.
+  You might need to edit this in if your brand colors result in low contrast.
+- `font.scss` contains the font face definitions
+- `theme.scss` contains general variables you can customize

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

@@ -0,0 +1,11 @@
+ion-alert {
+  button.alert-button.preferred {
+    color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-color-primary);
+  }
+
+  button.alert-button.default {
+    color: var(--ion-color-primary);
+    background-color: transparent;
+  }
+}

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

@@ -13,6 +13,12 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+ion-segment-button,
+ion-back-button,
+ion-button {
+  text-transform: none;
+}
+
 .can-go-back ion-header ion-back-button {
   display: block;
 }

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

@@ -0,0 +1,5 @@
+ion-card.bold-header {
+  ion-card-header {
+    font-weight: bold;
+  }
+}

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

@@ -1,44 +0,0 @@
-$icon-size: 23px;
-
-app-root ion-searchbar[class*='sc-ion-searchbar-'] {
-  --border-radius: var(--border-radius-default);
-
-  height: 38px;
-  padding-top: 0;
-  padding-bottom: 0;
-
-  &.filterable {
-    --box-shadow: none;
-
-    position: relative;
-    padding-right: 0;
-    padding-left: 0;
-
-    ion-menu-button {
-      position: absolute;
-      z-index: 1;
-      right: 5px;
-    }
-
-    .searchbar-clear-button {
-      right: 45px;
-    }
-  }
-
-  ion-icon.searchbar-search-icon {
-    top: 50%;
-    left: var(--spacing-sm);
-    transform: translateY(-50%);
-
-    width: $icon-size;
-    height: $icon-size;
-
-    color: var(--ion-color-medium-shade);
-  }
-
-  input.searchbar-input {
-    padding-top: var(--spacing-xs);
-    padding-bottom: var(--spacing-xs);
-    padding-left: calc(var(--spacing-lg) + #{$icon-size});
-  }
-}

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

@@ -0,0 +1,9 @@
+ion-item,
+ion-card.compact {
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+}

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

@@ -12,7 +12,48 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+$icon-size: 23px;
 
-ion-searchbar {
+app-root ion-searchbar[class*='sc-ion-searchbar-'] {
+  --border-radius: var(--border-radius-default);
   --background: var(--ion-item-background) !important;
+
+  height: 38px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &.filterable {
+    --box-shadow: none;
+
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
+
+    ion-menu-button {
+      position: absolute;
+      z-index: 1;
+      right: 5px;
+    }
+
+    .searchbar-clear-button {
+      right: 45px;
+    }
+  }
+
+  ion-icon.searchbar-search-icon {
+    top: 50%;
+    left: var(--spacing-sm);
+    transform: translateY(-50%);
+
+    width: $icon-size;
+    height: $icon-size;
+
+    color: var(--ion-color-medium-shade);
+  }
+
+  input.searchbar-input {
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+    padding-left: calc(var(--spacing-lg) + #{$icon-size});
+  }
 }

frontend/app/src/theme/common/_maplibre.scss

@@ -0,0 +1,31 @@
+.maplibregl-map {
+  font-family: inherit;
+}
+
+.maplibregl-ctrl-scale {
+  position: relative;
+
+  padding: 0 0 2px;
+
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--ion-text-color);
+
+  background: none;
+  filter: drop-shadow(0 0 2px rgba(0 0 0 / 60%));
+  border: none;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 8px;
+
+    border-right: 2px solid var(--ion-color-dark);
+    border-bottom: 2px solid var(--ion-color-dark);
+  }
+}

frontend/app/src/theme/common/_material-symbols.scss

@@ -17,7 +17,7 @@
   font-weight: 100 700;
   font-style: normal;
   font-display: block;
-  src: url('../assets/icons.min.woff2') format('woff2');
+  src: url('../../assets/icons.min.woff2') format('woff2');
 }
 
 .material-symbols-rounded {

frontend/app/src/theme/common/_title.scss

@@ -18,19 +18,11 @@ body app-root {
   .title[class*='sc-ion-label'] {
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-semi-bold);
-
-    // TODO Condensed Font
   }
 
   .title-sub,
   .title-sub[class*='sc-ion-label'] {
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-regular);
-
-    // TODO Condensed Font
-  }
-
-  .title-sub {
-    // color: var(--ion-color-medium);
   }
 }

frontend/app/src/theme/components/_centered-message-container.scss

@@ -0,0 +1,19 @@
+.centered-message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 50vh;
+  margin: 20px;
+
+  text-align: center;
+
+  ion-icon {
+    font-size: 64px;
+  }
+
+  ion-label {
+    font-size: x-large;
+  }
+}

frontend/app/src/theme/variables.scss

@@ -15,8 +15,6 @@
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
 @import './colors';
-
-// Import all other styles
 @import './fonts';
 @import './common/typo';
 @import './common/helper';
@@ -34,10 +32,6 @@
 @import './common/ion-searchbar';
 @import './components/image-dark';
 
-@import './components/card';
-@import './components/section';
-
-/** Ionic CSS Variables **/
 :root {
   // Fonts
   --ion-font-family: 'Barlow', helvetica, arial, sans-serif;