From 568abb6e035cc665fff085e50410a56b1c6b7f55 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 21 Jan 2025 00:27:45 +0800
Subject: [PATCH] update transaction tag icon style

---
 .../mobile/TransactionTagSelectionSheet.vue           |  4 ++--
 src/styles/mobile/font-size-default.css               |  1 +
 src/styles/mobile/font-size-large.css                 |  1 +
 src/styles/mobile/font-size-small.css                 |  1 +
 src/styles/mobile/font-size-x-large.css               |  1 +
 src/styles/mobile/font-size-xx-large.css              |  1 +
 src/styles/mobile/font-size-xxx-large.css             |  1 +
 src/styles/mobile/font-size-xxxx-large.css            |  1 +
 src/styles/mobile/global.css                          |  5 +++++
 src/views/mobile/settings/TextSizeSettingsPage.vue    |  3 ++-
 .../settings/TransactionTagFilterSettingsPage.vue     |  2 +-
 src/views/mobile/tags/ListPage.vue                    |  6 +++---
 src/views/mobile/transactions/EditPage.vue            | 11 ++++++++---
 src/views/mobile/transactions/ListPage.vue            |  8 ++++----
 14 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index f9eb26c6..4d78dbe3 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -29,7 +29,7 @@
                     <template #title>
                         <f7-block class="no-padding no-margin">
                             <div class="display-flex">
-                                <f7-icon f7="number"></f7-icon>
+                                <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                                 <div class="tag-selection-list-item list-item-valign-middle padding-left-half">
                                     {{ tag.name }}
                                 </div>
@@ -44,7 +44,7 @@
                 </f7-list-item>
                 <f7-list-item checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
                     <template #media>
-                        <f7-icon f7="number"></f7-icon>
+                        <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                     </template>
                     <template #title>
                         <div class="display-flex">
diff --git a/src/styles/mobile/font-size-default.css b/src/styles/mobile/font-size-default.css
index 1dc73863..7ef44be1 100644
--- a/src/styles/mobile/font-size-default.css
+++ b/src/styles/mobile/font-size-default.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 12px;
     --ebk-transaction-account-arrow-font-size: 12px;
     --ebk-transaction-account-arrow-margin-top: -1px;
+    --ebk-transaction-tag-icon-font-size: 22px;
     --ebk-transaction-tag-chip-font-size: 13px;
     --ebk-transaction-tag-chip-media-size: 19px;
     --ebk-transaction-tag-chip-height: 19px;
diff --git a/src/styles/mobile/font-size-large.css b/src/styles/mobile/font-size-large.css
index ce6ce29e..c330a642 100644
--- a/src/styles/mobile/font-size-large.css
+++ b/src/styles/mobile/font-size-large.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 13px;
     --ebk-transaction-account-arrow-font-size: 13px;
     --ebk-transaction-account-arrow-margin-top: -2px;
+    --ebk-transaction-tag-icon-font-size: 24px;
     --ebk-transaction-tag-chip-font-size: 13px;
     --ebk-transaction-tag-chip-media-size: 20px;
     --ebk-transaction-tag-chip-height: 20px;
diff --git a/src/styles/mobile/font-size-small.css b/src/styles/mobile/font-size-small.css
index c33afa93..76056797 100644
--- a/src/styles/mobile/font-size-small.css
+++ b/src/styles/mobile/font-size-small.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 12px;
     --ebk-transaction-account-arrow-font-size: 12px;
     --ebk-transaction-account-arrow-margin-top: -1px;
+    --ebk-transaction-tag-icon-font-size: 20px;
     --ebk-transaction-tag-chip-font-size: 13px;
     --ebk-transaction-tag-chip-media-size: 18px;
     --ebk-transaction-tag-chip-height: 18px;
diff --git a/src/styles/mobile/font-size-x-large.css b/src/styles/mobile/font-size-x-large.css
index d642d532..3a8a8844 100644
--- a/src/styles/mobile/font-size-x-large.css
+++ b/src/styles/mobile/font-size-x-large.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 14px;
     --ebk-transaction-account-arrow-font-size: 14px;
     --ebk-transaction-account-arrow-margin-top: -2px;
+    --ebk-transaction-tag-icon-font-size: 26px;
     --ebk-transaction-tag-chip-font-size: 14px;
     --ebk-transaction-tag-chip-media-size: 22px;
     --ebk-transaction-tag-chip-height: 22px;
diff --git a/src/styles/mobile/font-size-xx-large.css b/src/styles/mobile/font-size-xx-large.css
index 73015afa..11468eb4 100644
--- a/src/styles/mobile/font-size-xx-large.css
+++ b/src/styles/mobile/font-size-xx-large.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 15px;
     --ebk-transaction-account-arrow-font-size: 15px;
     --ebk-transaction-account-arrow-margin-top: -3px;
+    --ebk-transaction-tag-icon-font-size: 28px;
     --ebk-transaction-tag-chip-font-size: 15px;
     --ebk-transaction-tag-chip-media-size: 22px;
     --ebk-transaction-tag-chip-height: 22px;
diff --git a/src/styles/mobile/font-size-xxx-large.css b/src/styles/mobile/font-size-xxx-large.css
index 5f7a9b63..68446d5c 100644
--- a/src/styles/mobile/font-size-xxx-large.css
+++ b/src/styles/mobile/font-size-xxx-large.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 17px;
     --ebk-transaction-account-arrow-font-size: 17px;
     --ebk-transaction-account-arrow-margin-top: -4px;
+    --ebk-transaction-tag-icon-font-size: 30px;
     --ebk-transaction-tag-chip-font-size: 16px;
     --ebk-transaction-tag-chip-media-size: 24px;
     --ebk-transaction-tag-chip-height: 24px;
diff --git a/src/styles/mobile/font-size-xxxx-large.css b/src/styles/mobile/font-size-xxxx-large.css
index 8c70141e..0ec9ddbc 100644
--- a/src/styles/mobile/font-size-xxxx-large.css
+++ b/src/styles/mobile/font-size-xxxx-large.css
@@ -77,6 +77,7 @@
     --ebk-transaction-day-of-week-font-size: 19px;
     --ebk-transaction-account-arrow-font-size: 19px;
     --ebk-transaction-account-arrow-margin-top: -4px;
+    --ebk-transaction-tag-icon-font-size: 32px;
     --ebk-transaction-tag-chip-font-size: 18px;
     --ebk-transaction-tag-chip-media-size: 26px;
     --ebk-transaction-tag-chip-height: 26px;
diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css
index 95bb7240..1ea888c1 100644
--- a/src/styles/mobile/global.css
+++ b/src/styles/mobile/global.css
@@ -138,6 +138,11 @@ i.icon.la, i.icon.las, i.icon.lab {
     font-size: var(--ebk-hide-icon-font-size);
 }
 
+.transaction-tag-icon {
+    font-size: var(--ebk-transaction-tag-icon-font-size);
+    align-self: center;
+}
+
 .login-page-logo {
     width: 80px;
     height: 80px;
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index 88eef75b..e25c7668 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -64,7 +64,8 @@
                                             </div>
                                             <div class="item-footer">
                                                 <div class="transaction-tags">
-                                                    <f7-chip media-bg-color="black" class="transaction-tag" :text="tt('Tag Title')">
+                                                    <f7-chip media-text-color="var(--f7-chip-text-color)"
+                                                             class="transaction-tag" :text="tt('Tag Title')">
                                                         <template #media>
                                                             <f7-icon f7="number"></f7-icon>
                                                         </template>
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index 07270da1..3f2fff95 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -81,7 +81,7 @@
                                       v-show="showHidden || !transactionTag.hidden"
                                       @change="selectTransactionTag">
                             <template #media>
-                                <f7-icon f7="number">
+                                <f7-icon class="transaction-tag-icon" f7="number">
                                     <f7-badge color="gray" class="right-bottom-icon" v-if="transactionTag.hidden">
                                         <f7-icon f7="eye_slash_fill"></f7-icon>
                                     </f7-badge>
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index bd653112..47909418 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -13,7 +13,7 @@
         <f7-list strong inset dividers class="tag-item-list margin-top skeleton-text" v-if="loading">
             <f7-list-item :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
                 <template #media>
-                    <f7-icon f7="number"></f7-icon>
+                    <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                 </template>
                 <template #title>
                     <div class="display-flex">
@@ -38,7 +38,7 @@
                           v-show="showHidden || !tag.hidden"
                           @taphold="setSortable()">
                 <template #media>
-                    <f7-icon f7="number">
+                    <f7-icon class="transaction-tag-icon" f7="number">
                         <f7-badge color="gray" class="right-bottom-icon" v-if="tag.hidden">
                             <f7-icon f7="eye_slash_fill"></f7-icon>
                         </f7-badge>
@@ -91,7 +91,7 @@
 
             <f7-list-item v-if="newTag">
                 <template #media>
-                    <f7-icon f7="number"></f7-icon>
+                    <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                 </template>
                 <template #title>
                     <div class="display-flex">
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index c55c017a..b883647c 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -320,7 +320,7 @@
 
                 <template #footer>
                     <f7-block class="margin-top-half no-padding no-margin" v-if="transaction.tagIds && transaction.tagIds.length">
-                        <f7-chip media-bg-color="black" class="transaction-edit-tag"
+                        <f7-chip media-text-color="var(--f7-chip-text-color)" class="transaction-edit-tag"
                                  :text="getTagName(tagId)"
                                  :key="tagId"
                                  v-for="tagId in transaction.tagIds">
@@ -1431,8 +1431,13 @@ export default {
     text-overflow: ellipsis;
 }
 
-.transaction-edit-tag > .chip-media {
-    opacity: 0.6;
+.chip.transaction-edit-tag .chip-media+.chip-label {
+    margin-left: 0;
+}
+
+.chip.transaction-edit-tag .chip-media i.icon {
+    font-size: calc(var(--f7-chip-media-size) - 12px);
+    height: calc(var(--f7-chip-media-size) - 12px);
 }
 
 .transaction-pictures {
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index de01ad68..7e32ace2 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -212,7 +212,7 @@
                                         </div>
                                         <div class="item-footer">
                                             <div class="transaction-tags" v-if="showTagInTransactionListPage && transaction.tagIds && transaction.tagIds.length">
-                                                <f7-chip media-bg-color="black" class="transaction-tag"
+                                                <f7-chip media-text-color="var(--f7-chip-text-color)" class="transaction-tag"
                                                          :text="allTransactionTags[tagId].name"
                                                          :key="tagId"
                                                          v-for="tagId in transaction.tagIds">
@@ -495,7 +495,7 @@
                               @click="changeTagFilter(transactionTag.id)"
                 >
                     <template #before-title>
-                        <f7-icon f7="number" class="transaction-tag-name"></f7-icon>
+                        <f7-icon class="transaction-tag-name transaction-tag-icon" f7="number"></f7-icon>
                     </template>
                     <template #after>
                         <f7-icon class="list-item-checked-icon"
@@ -1283,8 +1283,8 @@ export default {
     text-overflow: ellipsis;
 }
 
-.list.transaction-info-list li.transaction-info .chip.transaction-tag > .chip-media {
-    opacity: 0.6;
+.list.transaction-info-list li.transaction-info .chip.transaction-tag .chip-media+.chip-label {
+    margin-left: 0;
 }
 
 .list.transaction-info-list li.transaction-info .transaction-footer {