From 171b8afa8e38fc0b27b138ce24fb2aa641e7daeb Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 14 Jun 2023 00:46:44 +0800
Subject: [PATCH] improve text size settings

---
 src/MobileApp.vue                             |   8 +
 src/components/mobile/InformationSheet.vue    |   2 +-
 src/consts/font.js                            |   4 +-
 src/lib/ui.mobile.js                          |  12 ++
 src/locales/en.js                             |   2 +-
 src/locales/zh_Hans.js                        |   2 +-
 src/router/mobile.js                          |   6 +-
 src/styles/mobile/font-size-default.css       |  49 ++++-
 src/styles/mobile/font-size-large.css         |  17 +-
 src/styles/mobile/font-size-small.css         |  20 +-
 src/styles/mobile/font-size-x-large.css       |  17 +-
 src/styles/mobile/font-size-xx-large.css      |  12 +-
 src/styles/mobile/font-size-xxx-large.css     |  13 +-
 src/styles/mobile/font-size-xxxx-large.css    |  13 +-
 src/views/mobile/AboutPage.vue                |   6 +-
 src/views/mobile/SettingsPage.vue             |   2 +-
 .../mobile/settings/FontSizeSettingsPage.vue  |  90 --------
 .../mobile/settings/TextSizeSettingsPage.vue  | 193 ++++++++++++++++++
 src/views/mobile/transactions/EditPage.vue    |   4 +-
 19 files changed, 354 insertions(+), 118 deletions(-)
 delete mode 100644 src/views/mobile/settings/FontSizeSettingsPage.vue
 create mode 100644 src/views/mobile/settings/TextSizeSettingsPage.vue

diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index e8c002b9..f094d627 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -263,6 +263,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     font-size: var(--ebk-icon-font-size);
 }
 
+.f7-icons, .framework7-icons {
+    font-size: var(--ebk-icon-font-size);
+}
+
 .ios .searchbar-icon:after {
     font-size: var(--ebk-searchbar-icon-font-size);
 }
@@ -495,6 +499,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     margin-left: 6px;
 }
 
+.icon-after-text i.icon {
+    font-size: var(--ebk-icon-after-text-font-size);
+}
+
 .badge.right-bottom-icon {
     margin-left: -12px;
     margin-top: 14px;
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
index 82a65c5f..f347a551 100644
--- a/src/components/mobile/InformationSheet.vue
+++ b/src/components/mobile/InformationSheet.vue
@@ -11,7 +11,7 @@
                     <span>{{ hint }}</span>
                     <f7-link id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
                              class="icon-after-text"
-                             icon-only icon-f7="doc_on_doc" icon-size="16px"
+                             icon-only icon-f7="doc_on_doc"
                              v-if="enableCopy"
                     ></f7-link>
                 </p>
diff --git a/src/consts/font.js b/src/consts/font.js
index 70bcbbef..965910dd 100644
--- a/src/consts/font.js
+++ b/src/consts/font.js
@@ -40,9 +40,11 @@ const allFontSizeArray = [
 ];
 
 const defaultFontSize = allFontSize.Default;
+const fontSizePreviewClassNamePrefix = 'preview-';
 
 export default {
     allFontSize: allFontSize,
     allFontSizeArray: allFontSizeArray,
-    defaultFontSize: defaultFontSize
+    defaultFontSize: defaultFontSize,
+    fontSizePreviewClassNamePrefix: fontSizePreviewClassNamePrefix
 };
diff --git a/src/lib/ui.mobile.js b/src/lib/ui.mobile.js
index b59f2ab6..df6d1f8f 100644
--- a/src/lib/ui.mobile.js
+++ b/src/lib/ui.mobile.js
@@ -146,3 +146,15 @@ export function setAppFontSize(type) {
         }
     }
 }
+
+export function getFontSizePreviewClassName(type) {
+    for (let i = 0; i < fontConstants.allFontSizeArray.length; i++) {
+        const fontSizeType = fontConstants.allFontSizeArray[i];
+
+        if (fontSizeType.type === type) {
+            return fontConstants.fontSizePreviewClassNamePrefix + fontSizeType.className;
+        }
+    }
+
+    return fontConstants.fontSizePreviewClassNamePrefix + fontConstants.defaultFontSize.className;
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index 5dc50d42..ae738fb4 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -938,7 +938,7 @@ export default {
     'Theme': 'Theme',
     'Light': 'Light',
     'Dark': 'Dark',
-    'Font Size': 'Font Size',
+    'Text Size': 'Text Size',
     'Timezone': 'Timezone',
     'System Default': 'System Default',
     'Language Default': 'Language Default',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 1ad13e97..c765f5ee 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -938,7 +938,7 @@ export default {
     'Theme': '主题',
     'Light': '浅色',
     'Dark': '深色',
-    'Font Size': '字体大小',
+    'Text Size': '文字大小',
     'Timezone': '时区',
     'System Default': '系统默认',
     'Language Default': '语言默认',
diff --git a/src/router/mobile.js b/src/router/mobile.js
index b88e897b..fc836cdb 100644
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@@ -16,7 +16,7 @@ import StatisticsSettingsPage from '@/views/mobile/statistics/SettingsPage.vue';
 import StatisticsAccountFilterSettingsPage from '@/views/mobile/statistics/AccountFilterSettingsPage.vue';
 import StatisticsCategoryFilterSettingsPage from '@/views/mobile/statistics/CategoryFilterSettingsPage.vue';
 
-import FontSizeSettingsPage from '@/views/mobile/settings/FontSizeSettingsPage.vue';
+import TextSizeSettingsPage from '@/views/mobile/settings/TextSizeSettingsPage.vue';
 
 import SettingsPage from '@/views/mobile/SettingsPage.vue';
 import ApplicationLockPage from '@/views/mobile/ApplicationLockPage.vue';
@@ -198,8 +198,8 @@ const routes = [
         beforeEnter: [checkLogin]
     },
     {
-        path: '/settings/fontsize',
-        async: asyncResolve(FontSizeSettingsPage),
+        path: '/settings/textsize',
+        async: asyncResolve(TextSizeSettingsPage),
         beforeEnter: [checkLogin]
     },
     {
diff --git a/src/styles/mobile/font-size-default.css b/src/styles/mobile/font-size-default.css
index 46dcb7e8..18afeb85 100644
--- a/src/styles/mobile/font-size-default.css
+++ b/src/styles/mobile/font-size-default.css
@@ -1,8 +1,53 @@
-:root {
+:root,
+:root .preview-font-size-default {
+    font-size: 14px;
+    --f7-font-size: 14px;
+    --f7-navbar-font-size: 17px;
+    --f7-searchbar-input-font-size: 17px;
+    --f7-searchbar-input-height: 32px;
+    --f7-toolbar-font-size: 17px;
+    --f7-tabbar-icon-size: 28px;
+    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-label-font-size: 12px;
+    --f7-label-font-size: 12px;
+    --f7-label-height: 16px;
+    --f7-input-font-size: 16px;
+    --f7-input-height: 40px;
+    --f7-button-font-size: 14px;
+    --f7-button-small-font-size: 13px;
+    --f7-button-small-height: 26px;
+    --f7-button-large-font-size: 17px;
+    --f7-chip-font-size: 14px;
+    --f7-block-title-font-size: 16px;
+    --f7-block-title-line-height: 20px;
+    --f7-block-font-size: 17px;
+    --f7-block-footer-font-size: 14px;
+    --f7-card-header-font-size: 17px;
+    --f7-list-group-title-font-size: 17px;
+    --f7-list-group-title-height: 31px;
+    --f7-list-item-header-font-size: 12px;
+    --f7-list-item-title-font-size: 17px;
+    --f7-list-item-text-font-size: 15px;
+    --f7-list-font-size: 17px;
+    --f7-list-item-after-font-size: 17px;
+    --f7-list-item-footer-font-size: 12px;
+    --f7-list-button-font-size: 16px;
+    --f7-list-item-min-height: 44px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
+    --f7-treeview-label-font-size: 17px;
+    --f7-swipeout-button-font-size: 16px;
+    --f7-dialog-title-font-size: 18px;
+    --f7-dialog-font-size: 14px;
+    --f7-dialog-button-font-size: 17px;
+    --f7-actions-button-font-size: 20px;
+    --dp-font-size: 17px;
+    --dp-time-font-size: 34px;
     --ebk-icon-font-size: 28px;
     --ebk-icon-text-margin: 2px;
     --ebk-hide-icon-font-size: 18px;
     --ebk-big-icon-button-size: 42px;
+    --ebk-icon-after-text-font-size: 16px;
     --ebk-right-bottom-icon-font-size: 13px;
     --ebk-list-item-checked-icon-font-size: 20px;
     --ebk-searchbar-icon-font-size: 20px;
@@ -23,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 18px;
     --ebk-pie-chart-toolbox-text-font-size: 16px;
     --ebk-account-list-group-title-height: 36px;
+    --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 25px;
     --ebk-transaction-day-font-size: 16px;
     --ebk-transaction-day-of-week-font-size: 12px;
     --ebk-license-popup-title-font-size: 30px;
+    --ebk-license-content-font-size: 14px;
 }
diff --git a/src/styles/mobile/font-size-large.css b/src/styles/mobile/font-size-large.css
index b3a175c8..bda37c15 100644
--- a/src/styles/mobile/font-size-large.css
+++ b/src/styles/mobile/font-size-large.css
@@ -1,24 +1,30 @@
-:root.font-size-large {
+:root.font-size-large,
+:root .preview-font-size-large {
     font-size: 15px;
     --f7-font-size: 15px;
     --f7-navbar-font-size: 18px;
     --f7-searchbar-input-font-size: 18px;
+    --f7-searchbar-input-height: 32px;
     --f7-toolbar-font-size: 18px;
     --f7-tabbar-icon-size: 29px;
-    --f7-toolbar-height: 50px;
     --f7-tabbar-icons-height: 50px;
     --f7-tabbar-label-font-size: 13px;
     --f7-label-font-size: 13px;
+    --f7-label-height: 16px;
     --f7-input-font-size: 17px;
+    --f7-input-height: 40px;
     --f7-button-font-size: 15px;
     --f7-button-small-font-size: 14px;
+    --f7-button-small-height: 26px;
     --f7-button-large-font-size: 18px;
     --f7-chip-font-size: 15px;
     --f7-block-title-font-size: 17px;
+    --f7-block-title-line-height: 20px;
     --f7-block-font-size: 17px;
     --f7-block-footer-font-size: 15px;
     --f7-card-header-font-size: 18px;
     --f7-list-group-title-font-size: 18px;
+    --f7-list-group-title-height: 31px;
     --f7-list-item-header-font-size: 13px;
     --f7-list-item-title-font-size: 17px;
     --f7-list-item-text-font-size: 16px;
@@ -27,16 +33,21 @@
     --f7-list-item-footer-font-size: 13px;
     --f7-list-button-font-size: 17px;
     --f7-list-item-min-height: 46px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 18px;
     --f7-swipeout-button-font-size: 17px;
     --f7-dialog-title-font-size: 19px;
     --f7-dialog-font-size: 15px;
     --f7-dialog-button-font-size: 18px;
     --f7-actions-button-font-size: 21px;
+    --dp-font-size: 17px;
+    --dp-time-font-size: 34px;
     --ebk-icon-font-size: 29px;
     --ebk-icon-text-margin: 3px;
     --ebk-hide-icon-font-size: 19px;
     --ebk-big-icon-button-size: 44px;
+    --ebk-icon-after-text-font-size: 17px;
     --ebk-right-bottom-icon-font-size: 13px;
     --ebk-list-item-checked-icon-font-size: 21px;
     --ebk-searchbar-icon-font-size: 20px;
@@ -57,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 19px;
     --ebk-pie-chart-toolbox-text-font-size: 17px;
     --ebk-account-list-group-title-height: 37px;
+    --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 28px;
     --ebk-transaction-day-font-size: 17px;
     --ebk-transaction-day-of-week-font-size: 13px;
     --ebk-license-popup-title-font-size: 31px;
+    --ebk-license-content-font-size: 15px;
 }
diff --git a/src/styles/mobile/font-size-small.css b/src/styles/mobile/font-size-small.css
index ad8d1b0f..96e0c426 100644
--- a/src/styles/mobile/font-size-small.css
+++ b/src/styles/mobile/font-size-small.css
@@ -1,25 +1,30 @@
-:root.font-size-small {
-    --f7-list-item-padding-horizontal: 12px;
-    --f7-list-item-padding-vertical: 8px;
-    --f7-list-media-item-padding-vertical: 8px;
+:root.font-size-small,
+:root .preview-font-size-small {
     font-size: 13px;
     --f7-font-size: 13px;
     --f7-navbar-font-size: 16px;
     --f7-searchbar-input-font-size: 16px;
+    --f7-searchbar-input-height: 32px;
     --f7-toolbar-font-size: 16px;
     --f7-tabbar-icon-size: 28px;
+    --f7-tabbar-icons-height: 50px;
     --f7-tabbar-label-font-size: 12px;
     --f7-label-font-size: 12px;
+    --f7-label-height: 16px;
     --f7-input-font-size: 15px;
+    --f7-input-height: 40px;
     --f7-button-font-size: 13px;
     --f7-button-small-font-size: 12px;
+    --f7-button-small-height: 26px;
     --f7-button-large-font-size: 16px;
     --f7-chip-font-size: 13px;
     --f7-block-title-font-size: 15px;
+    --f7-block-title-line-height: 20px;
     --f7-block-font-size: 15px;
     --f7-block-footer-font-size: 13px;
     --f7-card-header-font-size: 16px;
     --f7-list-group-title-font-size: 15px;
+    --f7-list-group-title-height: 31px;
     --f7-list-item-header-font-size: 12px;
     --f7-list-item-title-font-size: 15px;
     --f7-list-item-text-font-size: 14px;
@@ -28,16 +33,21 @@
     --f7-list-item-footer-font-size: 12px;
     --f7-list-button-font-size: 15px;
     --f7-list-item-min-height: 40px;
+    --f7-list-item-padding-horizontal: 12px;
+    --f7-list-media-item-padding-vertical: 8px;
     --f7-treeview-label-font-size: 16px;
     --f7-swipeout-button-font-size: 15px;
     --f7-dialog-title-font-size: 16px;
     --f7-dialog-font-size: 13px;
     --f7-dialog-button-font-size: 16px;
     --f7-actions-button-font-size: 18px;
+    --dp-font-size: 15px;
+    --dp-time-font-size: 30px;
     --ebk-icon-font-size: 28px;
     --ebk-icon-text-margin: 2px;
     --ebk-hide-icon-font-size: 18px;
     --ebk-big-icon-button-size: 42px;
+    --ebk-icon-after-text-font-size: 15px;
     --ebk-right-bottom-icon-font-size: 13px;
     --ebk-list-item-checked-icon-font-size: 20px;
     --ebk-searchbar-icon-font-size: 20px;
@@ -58,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 18px;
     --ebk-pie-chart-toolbox-text-font-size: 16px;
     --ebk-account-list-group-title-height: 36px;
+    --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 25px;
     --ebk-transaction-day-font-size: 16px;
     --ebk-transaction-day-of-week-font-size: 12px;
     --ebk-license-popup-title-font-size: 30px;
+    --ebk-license-content-font-size: 13px;
 }
diff --git a/src/styles/mobile/font-size-x-large.css b/src/styles/mobile/font-size-x-large.css
index 7e7bfbcd..17c85755 100644
--- a/src/styles/mobile/font-size-x-large.css
+++ b/src/styles/mobile/font-size-x-large.css
@@ -1,24 +1,30 @@
-:root.font-size-x-large {
+:root.font-size-x-large,
+:root .preview-font-size-x-large {
     font-size: 16px;
     --f7-font-size: 16px;
     --f7-navbar-font-size: 19px;
     --f7-searchbar-input-font-size: 19px;
+    --f7-searchbar-input-height: 32px;
     --f7-toolbar-font-size: 19px;
     --f7-tabbar-icon-size: 30px;
-    --f7-toolbar-height: 54px;
     --f7-tabbar-icons-height: 54px;
     --f7-tabbar-label-font-size: 14px;
     --f7-label-font-size: 14px;
+    --f7-label-height: 16px;
     --f7-input-font-size: 18px;
+    --f7-input-height: 40px;
     --f7-button-font-size: 16px;
     --f7-button-small-font-size: 15px;
+    --f7-button-small-height: 26px;
     --f7-button-large-font-size: 19px;
     --f7-chip-font-size: 16px;
     --f7-block-title-font-size: 18px;
+    --f7-block-title-line-height: 20px;
     --f7-block-font-size: 18px;
     --f7-block-footer-font-size: 16px;
     --f7-card-header-font-size: 19px;
     --f7-list-group-title-font-size: 20px;
+    --f7-list-group-title-height: 31px;
     --f7-list-item-header-font-size: 14px;
     --f7-list-item-title-font-size: 18px;
     --f7-list-item-text-font-size: 17px;
@@ -27,16 +33,21 @@
     --f7-list-item-footer-font-size: 14px;
     --f7-list-button-font-size: 18px;
     --f7-list-item-min-height: 48px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 19px;
     --f7-swipeout-button-font-size: 18px;
     --f7-dialog-title-font-size: 20px;
     --f7-dialog-font-size: 16px;
     --f7-dialog-button-font-size: 19px;
     --f7-actions-button-font-size: 22px;
+    --dp-font-size: 18px;
+    --dp-time-font-size: 36px;
     --ebk-icon-font-size: 30px;
     --ebk-icon-text-margin: 3px;
     --ebk-hide-icon-font-size: 20px;
     --ebk-big-icon-button-size: 48px;
+    --ebk-icon-after-text-font-size: 17px;
     --ebk-right-bottom-icon-font-size: 14px;
     --ebk-list-item-checked-icon-font-size: 22px;
     --ebk-searchbar-icon-font-size: 20px;
@@ -57,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 20px;
     --ebk-pie-chart-toolbox-text-font-size: 18px;
     --ebk-account-list-group-title-height: 38px;
+    --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 30px;
     --ebk-transaction-day-font-size: 18px;
     --ebk-transaction-day-of-week-font-size: 14px;
     --ebk-license-popup-title-font-size: 32px;
+    --ebk-license-content-font-size: 16px;
 }
diff --git a/src/styles/mobile/font-size-xx-large.css b/src/styles/mobile/font-size-xx-large.css
index 7ece9d14..8c76d60b 100644
--- a/src/styles/mobile/font-size-xx-large.css
+++ b/src/styles/mobile/font-size-xx-large.css
@@ -1,4 +1,5 @@
-:root.font-size-xx-large {
+:root.font-size-xx-large,
+:root .preview-font-size-xx-large {
     font-size: 17px;
     --f7-font-size: 17px;
     --f7-navbar-font-size: 20px;
@@ -6,7 +7,6 @@
     --f7-searchbar-input-height: 34px;
     --f7-toolbar-font-size: 20px;
     --f7-tabbar-icon-size: 32px;
-    --f7-toolbar-height: 62px;
     --f7-tabbar-icons-height: 62px;
     --f7-tabbar-label-font-size: 17px;
     --f7-label-font-size: 16px;
@@ -15,6 +15,7 @@
     --f7-input-height: 56px;
     --f7-button-font-size: 18px;
     --f7-button-small-font-size: 15px;
+    --f7-button-small-height: 26px;
     --f7-button-large-font-size: 20px;
     --f7-chip-font-size: 16px;
     --f7-block-title-font-size: 20px;
@@ -32,16 +33,21 @@
     --f7-list-item-footer-font-size: 15px;
     --f7-list-button-font-size: 20px;
     --f7-list-item-min-height: 50px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 20px;
     --f7-swipeout-button-font-size: 20px;
     --f7-dialog-title-font-size: 20px;
     --f7-dialog-font-size: 17px;
     --f7-dialog-button-font-size: 20px;
     --f7-actions-button-font-size: 22px;
+    --dp-font-size: 20px;
+    --dp-time-font-size: 38px;
     --ebk-icon-font-size: 32px;
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 24px;
     --ebk-big-icon-button-size: 54px;
+    --ebk-icon-after-text-font-size: 18px;
     --ebk-right-bottom-icon-font-size: 15px;
     --ebk-list-item-checked-icon-font-size: 24px;
     --ebk-searchbar-icon-font-size: 22px;
@@ -62,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 22px;
     --ebk-pie-chart-toolbox-text-font-size: 20px;
     --ebk-account-list-group-title-height: 40px;
+    --ebk-category-separate-icon-font-size: 20px;
     --ebk-transaction-date-width: 32px;
     --ebk-transaction-day-font-size: 20px;
     --ebk-transaction-day-of-week-font-size: 15px;
     --ebk-license-popup-title-font-size: 36px;
+    --ebk-license-content-font-size: 17px;
 }
diff --git a/src/styles/mobile/font-size-xxx-large.css b/src/styles/mobile/font-size-xxx-large.css
index 53187f2b..cce3dc6f 100644
--- a/src/styles/mobile/font-size-xxx-large.css
+++ b/src/styles/mobile/font-size-xxx-large.css
@@ -1,4 +1,5 @@
-:root.font-size-xxx-large {
+:root.font-size-xxx-large,
+:root .preview-font-size-xxx-large {
     font-size: 19px;
     --f7-font-size: 19px;
     --f7-navbar-font-size: 22px;
@@ -6,7 +7,6 @@
     --f7-searchbar-input-height: 36px;
     --f7-toolbar-font-size: 22px;
     --f7-tabbar-icon-size: 34px;
-    --f7-toolbar-height: 66px;
     --f7-tabbar-icons-height: 66px;
     --f7-tabbar-label-font-size: 19px;
     --f7-label-font-size: 18px;
@@ -15,8 +15,8 @@
     --f7-input-height: 60px;
     --f7-button-font-size: 20px;
     --f7-button-small-font-size: 17px;
+    --f7-button-small-height: 30px;
     --f7-button-large-font-size: 22px;
-    --f7-button-height: 30px;
     --f7-chip-font-size: 18px;
     --f7-block-title-font-size: 22px;
     --f7-block-title-line-height: 24px;
@@ -33,16 +33,21 @@
     --f7-list-item-footer-font-size: 17px;
     --f7-list-button-font-size: 22px;
     --f7-list-item-min-height: 52px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 22px;
     --f7-swipeout-button-font-size: 22px;
     --f7-dialog-title-font-size: 22px;
     --f7-dialog-font-size: 19px;
     --f7-dialog-button-font-size: 22px;
     --f7-actions-button-font-size: 24px;
+    --dp-font-size: 22px;
+    --dp-time-font-size: 38px;
     --ebk-icon-font-size: 34px;
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 26px;
     --ebk-big-icon-button-size: 58px;
+    --ebk-icon-after-text-font-size: 20px;
     --ebk-right-bottom-icon-font-size: 17px;
     --ebk-list-item-checked-icon-font-size: 26px;
     --ebk-searchbar-icon-font-size: 24px;
@@ -63,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 24px;
     --ebk-pie-chart-toolbox-text-font-size: 22px;
     --ebk-account-list-group-title-height: 42px;
+    --ebk-category-separate-icon-font-size: 20px;
     --ebk-transaction-date-width: 36px;
     --ebk-transaction-day-font-size: 22px;
     --ebk-transaction-day-of-week-font-size: 17px;
     --ebk-license-popup-title-font-size: 38px;
+    --ebk-license-content-font-size: 19px;
 }
diff --git a/src/styles/mobile/font-size-xxxx-large.css b/src/styles/mobile/font-size-xxxx-large.css
index ba05fdc6..78aa7b34 100644
--- a/src/styles/mobile/font-size-xxxx-large.css
+++ b/src/styles/mobile/font-size-xxxx-large.css
@@ -1,4 +1,5 @@
-:root.font-size-xxxx-large {
+:root.font-size-xxxx-large,
+:root .preview-font-size-xxxx-large {
     font-size: 21px;
     --f7-font-size: 21px;
     --f7-navbar-font-size: 24px;
@@ -6,7 +7,6 @@
     --f7-searchbar-input-height: 38px;
     --f7-toolbar-font-size: 24px;
     --f7-tabbar-icon-size: 36px;
-    --f7-toolbar-height: 70px;
     --f7-tabbar-icons-height: 70px;
     --f7-tabbar-label-font-size: 21px;
     --f7-label-font-size: 20px;
@@ -15,8 +15,8 @@
     --f7-input-height: 64px;
     --f7-button-font-size: 22px;
     --f7-button-small-font-size: 19px;
+    --f7-button-small-height: 32px;
     --f7-button-large-font-size: 24px;
-    --f7-button-height: 32px;
     --f7-chip-font-size: 20px;
     --f7-block-title-font-size: 24px;
     --f7-block-title-line-height: 26px;
@@ -33,16 +33,21 @@
     --f7-list-item-footer-font-size: 19px;
     --f7-list-button-font-size: 24px;
     --f7-list-item-min-height: 54px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 24px;
     --f7-swipeout-button-font-size: 24px;
     --f7-dialog-title-font-size: 24px;
     --f7-dialog-font-size: 21px;
     --f7-dialog-button-font-size: 24px;
     --f7-actions-button-font-size: 26px;
+    --dp-font-size: 22px;
+    --dp-time-font-size: 38px;
     --ebk-icon-font-size: 36px;
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 28px;
     --ebk-big-icon-button-size: 64px;
+    --ebk-icon-after-text-font-size: 22px;
     --ebk-right-bottom-icon-font-size: 19px;
     --ebk-list-item-checked-icon-font-size: 28px;
     --ebk-searchbar-icon-font-size: 26px;
@@ -63,8 +68,10 @@
     --ebk-pie-chart-toolbox-percentage-font-size: 26px;
     --ebk-pie-chart-toolbox-text-font-size: 24px;
     --ebk-account-list-group-title-height: 44px;
+    --ebk-category-separate-icon-font-size: 22px;
     --ebk-transaction-date-width: 40px;
     --ebk-transaction-day-font-size: 24px;
     --ebk-transaction-day-of-week-font-size: 19px;
     --ebk-license-popup-title-font-size: 40px;
+    --ebk-license-content-font-size: 21px;
 }
diff --git a/src/views/mobile/AboutPage.vue b/src/views/mobile/AboutPage.vue
index 54a9f0e7..08d5d441 100644
--- a/src/views/mobile/AboutPage.vue
+++ b/src/views/mobile/AboutPage.vue
@@ -15,7 +15,7 @@
                     <div class="swipe-handler" style="z-index: 10"></div>
                     <f7-subnavbar :title="$t('License') "></f7-subnavbar>
                 </f7-navbar>
-                <f7-block strong outline>
+                <f7-block strong outline class="license-content">
                     <p>
                         <span :key="num" v-for="(line, num) in licenseLines"
                               :style="{ 'display': line ? 'initial' : 'block', 'padding' : line ? '0' : '0 0 1em 0' }">
@@ -81,4 +81,8 @@ export default {
 .license-popup .subnavbar-title {
     --f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
 }
+
+.license-content {
+    font-size: var(--ebk-license-content-font-size);
+}
 </style>
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index eaa635de..a45f9168 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -26,7 +26,7 @@
                 </select>
             </f7-list-item>
 
-            <f7-list-item :title="$t('Font Size')" link="/settings/fontsize"></f7-list-item>
+            <f7-list-item :title="$t('Text Size')" link="/settings/textsize"></f7-list-item>
 
             <f7-list-item
                 :key="currentLocale + '_timezone'"
diff --git a/src/views/mobile/settings/FontSizeSettingsPage.vue b/src/views/mobile/settings/FontSizeSettingsPage.vue
deleted file mode 100644
index 834566dd..00000000
--- a/src/views/mobile/settings/FontSizeSettingsPage.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <f7-page>
-        <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Font Size')"></f7-nav-title>
-            <f7-nav-right>
-                <f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
-            </f7-nav-right>
-        </f7-navbar>
-
-        <f7-list strong inset>
-            <f7-list-item>
-                <div class="full-line padding-bottom padding-top-half">
-                    <div class="display-flex justify-content-space-between">
-                        <div class="fontsize-minimum">A</div>
-                        <div class="fontsize-maximum">A</div>
-                        <div class="fontsize-default" :style="'left: ' + (100 / maxFontSizeType - 6) + '%'">{{ $t('Default') }}</div>
-                    </div>
-                    <f7-range
-                        :min="minFontSizeType"
-                        :max="maxFontSizeType"
-                        :step="1"
-                        :scale="true"
-                        :scale-steps="maxFontSizeType"
-                        :scale-sub-steps="1"
-                        :format-scale-label="getFontSizeName"
-                        v-model:value="fontSize"
-                    />
-                </div>
-            </f7-list-item>
-        </f7-list>
-    </f7-page>
-</template>
-
-<script>
-import fontConstants from '@/consts/font.js';
-import { setAppFontSize } from '@/lib/ui.mobile.js';
-
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            fontSize: this.$settings.getFontSize()
-        }
-    },
-    computed: {
-        minFontSizeType() {
-            return 0;
-        },
-        maxFontSizeType() {
-            return fontConstants.allFontSizeArray.length - 1;
-        }
-    },
-    methods: {
-        setFontSize() {
-            const router = this.f7router;
-
-            if (this.fontSize !== this.$settings.getFontSize()) {
-                this.$settings.setFontSize(this.fontSize);
-                setAppFontSize(this.fontSize);
-            }
-
-            router.back();
-        },
-        getFontSizeName() {
-            return '';
-        }
-    }
-}
-</script>
-
-<style>
-.fontsize-minimum {
-    font-size: 15px;
-    align-self: end;
-}
-
-.fontsize-maximum {
-    font-size: 24px;
-    align-self: end;
-}
-
-.fontsize-default {
-    font-size: 17px;
-    position: absolute;
-    align-self: end;
-}
-</style>
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
new file mode 100644
index 00000000..bd1aa2cf
--- /dev/null
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -0,0 +1,193 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Text Size')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-block class="no-padding no-margin readonly" :class="fontSizePreviewClassName">
+            <f7-block class="combination-list-wrapper margin-vertical">
+                <f7-accordion-item>
+                    <f7-block-title>
+                        <f7-accordion-toggle>
+                            <f7-list strong inset dividers media-list
+                                     class="transaction-amount-list combination-list-header combination-list-opened">
+                                <f7-list-item>
+                                    <template #title>
+                                        <small>{{ currentLongYearMonth }}</small>
+                                        <small class="transaction-amount-statistics">
+                                            <span class="text-color-red">{{ `+${getDisplayAmount('12345')}` }}</span>
+                                            <span class="text-color-teal">{{ `-${getDisplayAmount('67890')}` }}</span>
+                                        </small>
+                                        <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
+                                    </template>
+                                </f7-list-item>
+                            </f7-list>
+                        </f7-accordion-toggle>
+                    </f7-block-title>
+                    <f7-accordion-content style="height: auto">
+                        <f7-list strong inset dividers media-list accordion-list class="transaction-info-list combination-list-content">
+                            <f7-list-item chevron-center class="transaction-info" link="#">
+                                <template #media>
+                                    <div class="display-flex flex-direction-column transaction-date">
+                                        <span class="transaction-day full-line flex-direction-column">{{ currentDayOfMonth }}</span>
+                                        <span class="transaction-day-of-week full-line flex-direction-column">{{ currentDayOfWeek }}</span>
+                                    </div>
+                                </template>
+                                <template #inner>
+                                    <div class="display-flex no-padding-horizontal">
+                                        <div class="item-media">
+                                            <div class="transaction-icon display-flex align-items-center">
+                                                <f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
+                                            </div>
+                                        </div>
+                                        <div class="actual-item-inner">
+                                            <div class="item-title-row">
+                                                <div class="item-title">
+                                                    <div class="transaction-category-name no-padding">
+                                                        <span>{{ $t('Category Name') }}</span>
+                                                    </div>
+                                                </div>
+                                                <div class="item-after">
+                                                    <div class="transaction-amount">
+                                                        <span>{{ getDisplayAmount('12345') }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="item-text">
+                                                <div class="transaction-comment">
+                                                    <span>{{ $t('Description') }}</span>
+                                                </div>
+                                            </div>
+                                            <div class="item-footer">
+                                                <div class="transaction-footer">
+                                                    <span>{{ currentShortTime }}</span>
+                                                    <span>·</span>
+                                                    <span>{{ $t('Account Name') }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </f7-list-item>
+                        </f7-list>
+                    </f7-accordion-content>
+                </f7-accordion-item>
+            </f7-block>
+        </f7-block>
+
+        <f7-block class="fontsize-panel no-padding margin-bottom">
+            <f7-block strong inset class="no-padding-bottom margin-bottom">
+                <div class="full-line padding-bottom padding-top-half">
+                    <div class="display-flex justify-content-space-between">
+                        <div class="fontsize-minimum">A</div>
+                        <div class="fontsize-maximum">A</div>
+                        <div class="fontsize-default" :style="`left: calc(${100 / maxFontSizeType}% - 6px)`">{{ $t('Default') }}</div>
+                    </div>
+                    <f7-range
+                        :min="minFontSizeType"
+                        :max="maxFontSizeType"
+                        :step="1"
+                        :scale="true"
+                        :scale-steps="maxFontSizeType"
+                        :scale-sub-steps="1"
+                        :format-scale-label="getFontSizeName"
+                        v-model:value="fontSize"
+                    />
+                </div>
+            </f7-block>
+        </f7-block>
+    </f7-page>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+
+import fontConstants from '@/consts/font.js';
+import { getCurrentUnixTime, getDay, getDayOfWeekName } from '@/lib/datetime.js';
+import { setAppFontSize, getFontSizePreviewClassName } from '@/lib/ui.mobile.js';
+
+export default {
+    props: [
+        'f7router'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            currentTime: getCurrentUnixTime(),
+            fontSize: self.$settings.getFontSize()
+        }
+    },
+    computed: {
+        ...mapStores(useUserStore),
+        minFontSizeType() {
+            return 0;
+        },
+        maxFontSizeType() {
+            return fontConstants.allFontSizeArray.length - 1;
+        },
+        fontSizePreviewClassName() {
+            return getFontSizePreviewClassName(this.fontSize);
+        },
+        currentLongYearMonth() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, this.currentTime);
+        },
+        currentDayOfMonth() {
+            return getDay(this.currentTime);
+        },
+        currentDayOfWeek() {
+            return this.$t(`datetime.${getDayOfWeekName(this.currentTime)}.short`);
+        },
+        currentShortTime() {
+            return this.$locale.formatUnixTimeToShortTime(this.userStore, this.currentTime);
+        }
+    },
+    methods: {
+        setFontSize() {
+            const router = this.f7router;
+
+            if (this.fontSize !== this.$settings.getFontSize()) {
+                this.$settings.setFontSize(this.fontSize);
+                setAppFontSize(this.fontSize);
+            }
+
+            router.back();
+        },
+        getFontSizeName() {
+            return '';
+        },
+        getDisplayAmount(value) {
+            return this.$locale.getDisplayCurrency(value, this.userStore.currentUserDefaultCurrency);
+        }
+    }
+}
+</script>
+
+<style>
+.fontsize-panel {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+.fontsize-minimum {
+    font-size: 15px;
+    align-self: end;
+}
+
+.fontsize-maximum {
+    font-size: 24px;
+    align-self: end;
+}
+
+.fontsize-default {
+    font-size: 17px;
+    position: absolute;
+    align-self: end;
+}
+</style>
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index cf54ec09..457778ef 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -1047,10 +1047,10 @@ export default {
 </script>
 
 <style>
-.category-separate-icon {
+.category-separate-icon.icon {
     margin-left: 5px;
     margin-right: 5px;
-    font-size: 18px;
+    font-size: var(--ebk-category-separate-icon-font-size);
     line-height: 16px;
     color: var(--f7-color-gray-tint);
 }