fix: favorite button

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

@@ -0,0 +1,41 @@
+/*!
+ * 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.
+ *
+ * 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/>.
+ */
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: block;
+  src: url('../../assets/icons.min.woff2') format('woff2');
+}
+
+.material-symbols-rounded {
+  direction: ltr;
+  display: inline-block;
+  // stylelint-disable-next-line
+  font-family: 'Material Symbols Rounded';
+  font-size: 24px;
+  font-feature-settings: 'liga'; // Support for IE
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  text-transform: none;
+  text-rendering: optimizelegibility; // Support for Safari and Chrome
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+
+  -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
+  -moz-osx-font-smoothing: grayscale; // Support for Firefox
+}

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);
   }
 }