make the styling consistent across all pages of the mobile version

src/components/common/MapView.vue

@@ -14,6 +14,7 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { Coordinate } from '@/core/coordinate.ts';
+import { isNumber } from '@/lib/common.ts';
 import type { MapInstance } from '@/lib/map/base.ts';
 import { createMapInstance } from '@/lib/map/index.ts';
 
@@ -21,6 +22,7 @@ const props = defineProps<{
     height?: string;
     mapClass?: string;
     mapStyle?: Record<string, string>;
+    enableZoomControl?: boolean;
     geoLocation?: Coordinate;
 }>();
 
@@ -31,7 +33,9 @@ const emit = defineEmits<{
 const { tt, getCurrentLanguageInfo } = useI18n();
 
 const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
-const mapInstance = ref<MapInstance | null>(createMapInstance());
+const mapInstance = ref<MapInstance | null>(createMapInstance({
+    enableZoomControl: props.enableZoomControl
+}));
 const initCenter = ref<Coordinate>({
     latitude: 0,
     longitude: 0
@@ -67,7 +71,7 @@ function initMapView(): void {
         if (initCenter.value.latitude !== props.geoLocation.latitude || initCenter.value.longitude !== props.geoLocation.longitude) {
             initCenter.value.latitude = props.geoLocation.latitude;
             initCenter.value.longitude = props.geoLocation.longitude;
-            zoomLevel.value = mapInstance.value.defaultZoomLevel;
+            zoomLevel.value = mapInstance.value.getDefaultZoomLevel();
 
             centerChanged = true;
         }
@@ -75,7 +79,7 @@ function initMapView(): void {
         if (initCenter.value.latitude || initCenter.value.longitude) {
             initCenter.value.latitude = 0;
             initCenter.value.longitude = 0;
-            zoomLevel.value = mapInstance.value.minZoomLevel;
+            zoomLevel.value = mapInstance.value.getMinZoomLevel();
 
             centerChanged = true;
         }
@@ -94,7 +98,14 @@ function initMapView(): void {
             },
             onClick: (geoLocation: Coordinate) => {
                 emit('click', geoLocation);
-            }
+            },
+            onZoomChange(level: number) {
+                if (isNumber(level)) {
+                    zoomLevel.value = level;
+                } else if (mapInstance.value) {
+                    zoomLevel.value = Math.round(mapInstance.value.getZoomLevel());
+                }
+            },
         });
 
         if (mapInstance.value.inited) {
@@ -106,9 +117,9 @@ function initMapView(): void {
         mapInstance.value.setMapCenterTo(initCenter.value, zoomLevel.value);
     }
 
-    if (centerChanged && zoomLevel.value > mapInstance.value.minZoomLevel) {
+    if (centerChanged && zoomLevel.value > mapInstance.value.getMinZoomLevel()) {
         mapInstance.value.setMapCenterMarker(initCenter.value);
-    } else if (centerChanged && zoomLevel.value <= mapInstance.value.minZoomLevel) {
+    } else if (centerChanged && zoomLevel.value <= mapInstance.value.getMinZoomLevel()) {
         mapInstance.value.removeMapCenterMarker();
     }
 }
@@ -123,8 +134,44 @@ function setMarkerPosition(geoLocation?: Coordinate): void {
     }
 }
 
+function allowZoomIn(): boolean {
+    if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
+        return false;
+    }
+
+    return zoomLevel.value < mapInstance.value.getMaxZoomLevel();
+}
+
+function allowZoomOut(): boolean {
+    if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
+        return false;
+    }
+
+    return zoomLevel.value > mapInstance.value.getMinZoomLevel();
+}
+
+function zoomIn(): void {
+    if (!mapInstance.value) {
+        return;
+    }
+
+    mapInstance.value.zoomIn();
+}
+
+function zoomOut(): void {
+    if (!mapInstance.value) {
+        return;
+    }
+
+    mapInstance.value.zoomOut();
+}
+
 defineExpose({
     initMapView,
-    setMarkerPosition
+    setMarkerPosition,
+    allowZoomIn,
+    allowZoomOut,
+    zoomIn,
+    zoomOut
 });
 </script>

src/components/mobile/AIImageRecognitionSheet.vue

@@ -4,10 +4,13 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Cancel')" @click="cancel"></f7-link>
+                <f7-link icon-f7="xmark" :class="{ 'disabled': loading || recognizing }"
+                         @click="cancel"></f7-link>
             </div>
             <div class="right">
-                <f7-link :class="{ 'disabled': loading || recognizing || !imageFile }" :text="tt('Recognize')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt"
+                           :class="{ 'disabled': loading || recognizing || !imageFile }"
+                           @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content class="no-margin-vertical no-padding-vertical">

src/components/mobile/ColorSelectionSheet.vue

@@ -4,10 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import { useI18n } from '@/locales/helpers.ts';
-
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
@@ -50,8 +48,6 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt } = useI18n();
-
 const currentValue = ref<ColorValue>(props.modelValue);
 const itemPerRow = ref<number>(props.columnCount || 7);
 

src/components/mobile/DateRangeSelectionSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/DateSelectionSheet.vue

@@ -7,11 +7,11 @@
                 <f7-link :text="tt('Clear')" @click="clear"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
                                   :enable-time-picker="false"

src/components/mobile/DateTimeSelectionSheet.vue

@@ -7,11 +7,12 @@
                 <f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-link :icon-f7="mode === 'time' ? 'calendar' : 'clock'" @click="switchMode"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content class="padding-bottom">
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker ref="datetimepicker"
                                   datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
@@ -21,7 +22,7 @@
                                   v-show="mode === 'date'">
                 </date-time-picker>
             </div>
-            <div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
+            <div class="block no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
                 <div class="time-picker-container" ref="timePickerContainer">
                     <div class="picker picker-inline picker-3d">
                         <div class="picker-columns">
@@ -91,12 +92,6 @@
                 </div>
             </div>
             <input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
-            <div class="margin-top text-align-center">
-                <div class="display-flex padding-horizontal justify-content-space-between">
-                    <div class="align-self-center">{{ displayTime }}</div>
-                    <f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
-                </div>
-            </div>
         </f7-page-content>
     </f7-sheet>
 </template>
@@ -116,10 +111,7 @@ import { NumeralSystem } from '@/core/numeral.ts';
 import { isDefined } from '@/lib/common.ts';
 import {
     getHourIn12HourFormat,
-    getTimezoneOffsetMinutes,
-    getBrowserTimezoneOffsetMinutes,
     getLocalDatetimeFromUnixTime,
-    getActualUnixTimeForStore,
     getCurrentUnixTime,
     getUnixTimeFromLocalDatetime,
     getAMOrPM,
@@ -141,8 +133,7 @@ const emit = defineEmits<{
 
 const {
     tt,
-    getCurrentNumeralSystemType,
-    formatUnixTimeToLongDateTime
+    getCurrentNumeralSystemType
 } = useI18n();
 const { showToast } = useI18nUIComponents();
 
@@ -176,9 +167,6 @@ const timePickerItemHeight = ref<number | undefined>(undefined);
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 
-const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
-const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
-
 const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
 const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
 const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -7,11 +7,11 @@
                 <f7-link :text="tt('Reset')" @click="reset"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
                                   :numeral-system="numeralSystem"

src/components/mobile/IconSelectionSheet.vue

@@ -4,10 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import { useI18n } from '@/locales/helpers.ts';
-
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
@@ -51,8 +49,6 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt } = useI18n();
-
 const currentValue = ref<string>(props.modelValue);
 const itemPerRow = ref<number>(props.columnCount || 7);
 

src/components/mobile/InformationSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/ListItemSelectionPopup.vue

@@ -2,20 +2,14 @@
     <f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
         <f7-page>
             <f7-navbar :outline="false">
+                <f7-nav-left>
+                    <f7-link popup-close icon-f7="xmark"></f7-link>
+                </f7-nav-left>
                 <f7-nav-title :title="title" v-if="title"></f7-nav-title>
-                <f7-nav-right>
-                    <f7-link popup-close :text="tt('Done')"></f7-link>
-                </f7-nav-right>
             </f7-navbar>
-            <f7-searchbar ref="searchbar" custom-searchs
-                          :value="filterContent"
-                          :placeholder="filterPlaceholder"
-                          :disable-button="false"
-                          v-if="enableFilter"
-                          @input="filterContent = $event.target.value">
-            </f7-searchbar>
-            <f7-block class="no-padding">
-                <f7-list strong outline dividers>
+
+            <f7-block class="no-margin no-padding">
+                <f7-list class="no-margin" strong outline dividers>
                     <f7-list-item link="#" no-chevron
                                   :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
                                   :value="getItemValue(item, index, valueField, valueType)"
@@ -38,6 +32,16 @@
                                   :title="filterNoItemsText"></f7-list-item>
                 </f7-list>
             </f7-block>
+
+            <f7-toolbar bottom>
+                <f7-searchbar ref="searchbar" custom-searchs
+                              :value="filterContent"
+                              :placeholder="filterPlaceholder"
+                              :disable-button="false"
+                              v-if="enableFilter"
+                              @input="filterContent = $event.target.value">
+                </f7-searchbar>
+            </f7-toolbar>
         </f7-page>
     </f7-popup>
 </template>
@@ -76,7 +80,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
@@ -177,7 +181,7 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onPopupOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
 }
 
 function onPopupClosed(): void {

src/components/mobile/ListItemSelectionSheet.vue

@@ -4,9 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-list dividers class="no-margin-vertical">
@@ -60,7 +61,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const currentValue = ref<unknown>(props.modelValue);
 

src/components/mobile/MapSheet.vue

@@ -1,20 +1,23 @@
 <template>
-    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="map-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
-                <f7-link :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
+                <f7-link icon-f7="minus" :class="{ 'disabled': !map?.allowZoomOut() }" @click="map?.zoomOut()"></f7-link>
+                <f7-link icon-f7="plus" :class="{ 'disabled': !map?.allowZoomIn() }" @click="map?.zoomIn()"></f7-link>
             </div>
-            <div class="right">
-                <f7-link :text="tt('Done')" @click="save"></f7-link>
+            <div class="right map-sheet-toolbar-right">
+                <f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
+                <f7-link class="map-sheet-toolbar-auto-hidden" :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content>
-            <map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
+        <f7-page-content class="no-margin no-padding">
+            <map-view ref="map" height="400px"
+                      :enable-zoom-control="false" :geo-location="geoLocation"
+                      @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
-                    <div class="display-flex padding justify-content-space-between align-items-center">
+                    <div class="display-flex map-sheet-error-title padding justify-content-space-between align-items-center">
                         <div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></div>
                         <div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></div>
                         <div class="ebk-sheet-title" v-else></div>
@@ -82,10 +85,6 @@ function switchSetGeoLocationByClickMap(value: boolean): void {
     emit('update:setGeoLocationByClickMap', value);
 }
 
-function save(): void {
-    emit('update:show', false);
-}
-
 function close(): void {
     emit('update:show', false);
 }
@@ -100,3 +99,23 @@ function onSheetClosed(): void {
     close();
 }
 </script>
+
+<style>
+.map-sheet .map-sheet-error-title {
+    margin-top: var(--f7-toolbar-height);
+}
+
+.map-sheet .map-sheet-toolbar-right {
+    overflow: hidden;
+
+    .map-sheet-toolbar-auto-hidden {
+        overflow: hidden;
+
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-range-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/MonthSelectionSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/NumberPadSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="numpad-sheet" style="height: auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="margin-top padding-horizontal" v-if="hint">
                 <span>{{ hint }}</span>
@@ -111,6 +111,7 @@ const isSupportClipboard = !!navigator.clipboard;
 const previousValue = ref<string>('');
 const currentSymbol = ref<string>('');
 const currentValue = ref<string>(getInitedStringValue(props.modelValue, props.flipNegative));
+const pasteingAmount = ref<boolean>(false);
 
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 
@@ -316,11 +317,16 @@ function clear(): void {
 }
 
 function paste(): void {
-    if (!isiOS() || !isSupportClipboard) {
+    if (!isiOS() || !isSupportClipboard || pasteingAmount.value) {
+        pasteingAmount.value = false;
         return;
     }
 
+    pasteingAmount.value = true;
+
     navigator.clipboard.readText().then(text => {
+        pasteingAmount.value = false;
+
         if (!text) {
             return;
         }

src/components/mobile/PasscodeInputSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/PasswordInputSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

src/components/mobile/PinCodeInputSheet.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title"><b>{{ title }}</b></div>

src/components/mobile/ScheduleFrequencySheet.vue

@@ -4,10 +4,10 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link sheet-close :text="tt('Cancel')"></f7-link>
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="save"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="save"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -5,12 +5,13 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link sheet-close :text="tt('Cancel')"></f7-link>
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" v-if="allTags && allTags.length && !noAvailableTag" @click="save"></f7-link>
-                <f7-link :class="{'disabled': newTag}"
-                         :text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="save"
+                           v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
+                <f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
+                         v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
             </div>
         </f7-toolbar>
         <f7-page-content :class="heightClass">

src/components/mobile/TreeViewSelectionSheet.vue

@@ -3,12 +3,7 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
-            </div>
-        </f7-toolbar>
-        <f7-page-content :class="heightClass">
-            <f7-searchbar ref="searchbar" custom-searchs
+            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
@@ -16,6 +11,8 @@
                           @input="filterContent = $event.target.value"
                           @focus="onSearchBarFocus">
             </f7-searchbar>
+        </f7-toolbar>
+        <f7-page-content :class="'margin-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
                 <f7-list-item :title="filterNoItemsText"></f7-list-item>
             </f7-list>
@@ -67,7 +64,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const {
     filterContent,

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -3,13 +3,7 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
-            </div>
-        </f7-toolbar>
-        <f7-page-content>
-            <f7-searchbar ref="searchbar" custom-searchs
+            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
@@ -17,6 +11,8 @@
                           @input="filterContent = $event.target.value"
                           @focus="onSearchBarFocus">
             </f7-searchbar>
+        </f7-toolbar>
+        <f7-page-content class="margin-top">
             <div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
                 <div>
                     <div class="primary-list-container">
@@ -89,7 +85,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const {
     filterContent,