safavi works

src/views/base/wallet/desktop/DesktopWalletView.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="dwallet">
     <div class="dwallet__container">
-      <header class="dwallet-topbar">
-        <p class="dwallet-topbar__eyebrow">مالی</p>
-        <h1 class="dwallet-topbar__title">کیف پول</h1>
-        <p class="dwallet-topbar__subtitle">واریز و برداشت وجه از کیف پول خود</p>
-      </header>
+      <DesktopPageTopbar
+        eyebrow="مالی"
+        title="کیف پول"
+        subtitle="واریز و برداشت وجه از کیف پول خود"
+      />
 
       <div class="dwallet-toolbar">
         <div class="dwallet-toggle">
@@ -159,6 +159,7 @@
 
 <script lang="ts" setup>
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import ListAnim from '@/components/ListAnim.vue'

src/views/base/wallet/mobile/MobileWalletView.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
-    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow z-[1999] wrap-fix">کیف پول</div>
-    <div class="bg-white wrap-fix py-3 top-11 px-3 text-primary font-bold flex justify-evenly z-[1999]">
+    <MobilePageHeader title="کیف پول" />
+    <div class="mpage-subheader wrap-fix flex justify-evenly">
       <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded">
         <div
           :class="isDeposit ? 'text-primary' : 'text-gray-400'"
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      class="px-5 pt-26"
+      class="px-5 mpage-content mpage-content--with-subheader"
       :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
     >
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
@@ -145,6 +145,7 @@
 <script lang="ts" setup>
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import Bg_main from '@/components/bg_main.vue'
 import ListAnim from '@/components/ListAnim.vue'