From 956890cc3b66e58194b0d34a9f592b388e6978c9 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Sat, 13 Jun 2026 22:19:01 +0330
Subject: [PATCH] support ui changed

---
 src/App.vue                     |  86 +++++++++++--
 src/views/base/wallet/index.vue | 206 ++++++++++++++++++++++++++------
 2 files changed, 241 insertions(+), 51 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5778bc0..92704c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -90,16 +90,15 @@
       class="draggable-support-button"
       :class="{ 'is-dragging': supportDragging }"
       :style="supportButtonStyle"
+      title="پشتیبانی"
       @pointerdown="onSupportPointerDown"
       @pointermove="onSupportPointerMove"
       @pointerup="handleSupportPointerUp"
       @pointercancel="onSupportPointerCancel"
     >
-      <div class="bg-green-100 text-green-800 flex gap-2 p-2 rounded-lg">
-        <span>پشتیبانی</span>
-        <div class="w-5">
-          <img src="/logo-montzar.png" alt="" draggable="false" />
-        </div>
+      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
+        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
+        <span class="support-button-label">پشتیبانی</span>
       </div>
     </div>
   </div>
@@ -168,6 +167,40 @@ const supportLink = computed(() => {
 
 const showSupportButton = computed(() => !!supportLink.value)
 
+const supportIcon = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return 'vuesax-linear:whatsapp'
+    case 'telegram':
+      return 'vuesax-linear:send-2'
+    case 'bale':
+      return 'vuesax-linear:messages-2'
+    default:
+      return 'vuesax-linear:messages-2'
+  }
+})
+
+const supportAccentColor = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return '#22c55e'
+    case 'telegram':
+      return '#0ea5e9'
+    case 'bale':
+      return '#16a34a'
+    case 'rubika':
+      return '#7c3aed'
+    case 'eitaa':
+      return '#f59e0b'
+    case 'soroush':
+      return '#2563eb'
+    default:
+      return config.config?.color || '#334155'
+  }
+})
+
 const {
   dragging: supportDragging,
   fabStyle: supportButtonStyle,
@@ -176,8 +209,8 @@ const {
   handlePointerUp: supportPointerUp,
   handlePointerCancel: onSupportPointerCancel
 } = useDraggableFloatingButton('khaneghi_support_button_position', {
-  width: 110,
-  height: 44,
+  width: 118,
+  height: 42,
   defaultBottomOffset: 120
 })
 
@@ -292,19 +325,48 @@ function update() {
   z-index: 9999;
   cursor: grab;
   user-select: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 0.5rem;
+  border-radius: 9999px;
 
   &.is-dragging {
     cursor: grabbing;
-    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
+  }
+}
+
+.support-button-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px 9px 12px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9999px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  direction: rtl;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  .support-button-icon {
+    color: var(--support-accent, #334155);
+    flex-shrink: 0;
   }
 
-  img {
-    pointer-events: none;
+  .support-button-label {
+    white-space: nowrap;
   }
 }
 
+#support-button:not(.is-dragging):hover .support-button-inner {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+
+#support-button.is-dragging .support-button-inner {
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+}
+
 @media screen and (min-width: 426px) {
   .desktopConfig {
     width: 426px;
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index f583afe..12f234c 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -295,75 +295,95 @@
       v-model:visible="chargeAccountModal"
       custom-footer
       :closable="false"
+      wrap-class-name="wallet-info-modal"
     >
-      <div v-if="config.config.name === 'garoosi'" class="text-center">
-        <div class=" font-bold text-red-600">مشتریان گرامی</div>
-        <div class="mt-2">
-          <span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
+      <div class="wallet-info-modal__body">
+        <div class="wallet-info-modal__icon">
+          <BasicIcon icon="vuesax-linear:wallet-add" size="26" />
         </div>
 
-        <div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
-        <div class="mt-4">(سیده زهرا موسوی)</div>
-        <div class="mt-1">شماره کارت:6037701900311389</div>
-        <!--        <div>شماره حساب: 0233273609006</div>-->
-        <div>شماره شبا: IR 080160000000001143804581</div>
-        <BasicButton class="mt-4">
-          <a class="w-full" href="https://ble.ir/garoosigallery">
+        <div v-if="config.config.name === 'garoosi'" class="wallet-info-modal__content">
+          <h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
+          <p class="wallet-info-modal__text">
+            جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.
+          </p>
+          <p class="wallet-info-modal__warn">
+            در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمی‌شود.
+          </p>
+          <div class="wallet-info-modal__card-box">
+            <div>(سیده زهرا موسوی)</div>
+            <div>شماره کارت: 6037701900311389</div>
+            <div>شماره شبا: IR 080160000000001143804581</div>
+          </div>
+          <a
+            class="wallet-info-modal__action wallet-info-modal__action--outline"
+            href="https://ble.ir/garoosigallery"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <BasicIcon icon="vuesax-linear:headphone" size="18" />
             پیام به پشتیبانی
           </a>
-        </BasicButton>
-      </div>
-      <div v-else-if="isBazretalaProject()" class="text-center">
-        <div class="font-bold text-red-600">همراه گرامی</div>
-        <div class="mt-2">
-          <div>جهت شارژ حساب کاربری خود،</div>
-          <div>مبلغ موردنظر را به شماره کارت زیر واریز نموده</div>
-          <div>و به شماره پشتیبانی 09121784258 در برنامه ی بله اطلاع دهید.</div>
-        </div>
-        <div class="mt-4">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</div>
-        <div class="mt-1">شماره کارت: 6037998800496928</div>
-        <div>شماره شبا: IR 110170000000372468150002</div>
-      </div>
-      <div v-else class="text-center">
-        <div class=" font-bold text-red-600">مشتریان گرامی</div>
-        <div class="mt-2">
-          <span>{{ supportMessengerText }}</span>
         </div>
 
-        <BasicButton v-if="supportMessengerLink">
+        <div v-else-if="isBazretalaProject()" class="wallet-info-modal__content">
+          <h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
+          <p class="wallet-info-modal__text">
+            جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و به شماره پشتیبانی
+            <strong>09121784258</strong>
+            در برنامه بله اطلاع دهید.
+          </p>
+          <div class="wallet-info-modal__card-box">
+            <div>(گنجینه طلای حاجی ابوالفتح - بانک ملی)</div>
+            <div>شماره کارت: 6037998800496928</div>
+            <div>شماره شبا: IR 110170000000372468150002</div>
+          </div>
+        </div>
+
+        <div v-else class="wallet-info-modal__content">
+          <h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
+          <p class="wallet-info-modal__text">{{ supportMessengerText }}</p>
           <a
-            class="w-full"
+            v-if="supportMessengerLink"
+            class="wallet-info-modal__action wallet-info-modal__action--outline"
             :href="supportMessengerLink"
             target="_blank"
             rel="noopener noreferrer"
           >
+            <BasicIcon icon="vuesax-linear:headphone" size="18" />
             پیام به پشتیبانی
           </a>
-        </BasicButton>
+        </div>
       </div>
 
       <template #footer>
-        <a-button type="primary" class="w-full" @click="chargeAccountModal = false">
+        <BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="chargeAccountModal = false">
           متوجه شدم
-        </a-button>
+        </BasicButton>
       </template>
     </BasicModal>
     <BasicModal
       v-model:visible="withdrawInfModal"
       custom-footer
       :closable="false"
+      wrap-class-name="wallet-info-modal"
     >
-      <div class="text-center">
-        <div class=" font-bold text-red-600">مشتری گرامی</div>
-        <div class="mt-2">
-          <div>واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.</div>
+      <div class="wallet-info-modal__body">
+        <div class="wallet-info-modal__icon wallet-info-modal__icon--info">
+          <BasicIcon icon="vuesax-linear:info-circle" size="26" />
+        </div>
+        <div class="wallet-info-modal__content">
+          <h3 class="wallet-info-modal__title">زمان واریز برداشت</h3>
+          <p class="wallet-info-modal__text">
+            واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.
+          </p>
         </div>
       </div>
 
       <template #footer>
-        <a-button type="primary" class="w-full" @click="withdrawInfModal = false">
+        <BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="withdrawInfModal = false">
           متوجه شدم
-        </a-button>
+        </BasicButton>
       </template>
     </BasicModal>
   </div>
@@ -766,4 +786,112 @@ async function handleOnComplete(value: string) {
     margin: 0 auto;
   }
 }
+
+.wallet-info-modal__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 4px 8px 8px;
+}
+
+.wallet-info-modal__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 9999px;
+  background: #ecfdf5;
+  color: #059669;
+  margin-bottom: 14px;
+}
+
+.wallet-info-modal__icon--info {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.wallet-info-modal__title {
+  margin: 0 0 10px;
+  font-size: 17px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.5;
+}
+
+.wallet-info-modal__text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.85;
+  color: #475569;
+}
+
+.wallet-info-modal__warn {
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #fef2f2;
+  color: #b91c1c;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.wallet-info-modal__card-box {
+  margin-top: 14px;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.8;
+  text-align: right;
+  direction: rtl;
+}
+
+.wallet-info-modal__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  margin-top: 16px;
+  padding: 11px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.wallet-info-modal__action--outline {
+  color: #0f766e;
+  background: #f0fdfa;
+  border: 1px solid #99f6e4;
+}
+
+.wallet-info-modal__action--outline:hover {
+  background: #ccfbf1;
+  border-color: #5eead4;
+}
+
+.wallet-info-modal__ok {
+  height: 44px !important;
+  border-radius: 12px !important;
+  font-weight: 600;
+}
+</style>
+
+<style>
+.wallet-info-modal .ant-modal-content {
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+.wallet-info-modal .ant-modal-footer {
+  border-top: none;
+  padding: 0 20px 20px;
+}
 </style>