chang icons of boursemes

Co-authored-by: Cursor <cursoragent@cursor.com>

src/layouts/config/navigation.ts

@@ -1,11 +1,33 @@
-import { isBoursecuProject } from '@/utils/config'
+import {
+  getBoursecuActionIconSrc,
+  getBoursecuTransactionsIcon,
+  isBoursecuProject,
+} from '@/utils/config'
 import type { AppNavItem } from '../types'
 
 const BOURSECU_PRIMARY_NAV: AppNavItem[] = [
-  { id: 'buyProduct', routeName: 'buyProduct', label: 'سفارش‌ها', icon: 'vuesax-linear:box' },
-  { id: 'transactions', routeName: 'transactions', label: 'تراکنش‌ها', icon: 'vuesax-linear:receipt-item' },
+  {
+    id: 'buyProduct',
+    routeName: 'buyProduct',
+    label: 'سفارش‌ها',
+    icon: 'vuesax-linear:box',
+    iconSrc: getBoursecuActionIconSrc('buySell'),
+  },
+  {
+    id: 'transactions',
+    routeName: 'transactions',
+    label: 'تراکنش‌ها',
+    icon: 'vuesax-linear:receipt-item',
+    iconSrc: getBoursecuTransactionsIcon(),
+  },
   { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
-  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  {
+    id: 'wallet',
+    routeName: 'wallet',
+    label: 'کیف پول',
+    icon: 'vuesax-linear:wallet-1',
+    iconSrc: getBoursecuActionIconSrc('wallet'),
+  },
   { id: 'user', routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },
 ]
 

src/layouts/desktop/DesktopNavItem.vue

@@ -5,7 +5,15 @@
     :class="{ 'desktop-nav-item--active': active }"
     @click="$emit('click')"
   >
-    <BasicIcon :icon="icon" size="20" class="desktop-nav-item__icon" />
+    <span class="desktop-nav-item__icon-wrap">
+      <img
+        v-if="iconSrc"
+        :src="iconSrc"
+        alt=""
+        class="desktop-nav-item__icon desktop-nav-item__icon--image"
+      />
+      <BasicIcon v-else :icon="icon" size="20" class="desktop-nav-item__icon" />
+    </span>
     <span class="desktop-nav-item__label">{{ label }}</span>
   </button>
 </template>
@@ -15,6 +23,7 @@ import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 
 defineProps<{
   icon: string
+  iconSrc?: string
   label: string
   active: boolean
 }>()
@@ -23,3 +32,12 @@ defineEmits<{
   click: []
 }>()
 </script>
+
+<style scoped>
+.desktop-nav-item__icon--image {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  transform: scale(1.75);
+}
+</style>

src/layouts/desktop/DesktopSidebar.vue

@@ -16,6 +16,7 @@
         v-for="item in primaryItems"
         :key="item.id"
         :icon="item.icon"
+        :icon-src="item.iconSrc"
         :label="item.label"
         :active="isNavActive(item.routeName)"
         @click="navigateTo(item.routeName)"
@@ -29,6 +30,7 @@
         v-for="item in secondaryItems"
         :key="item.id"
         :icon="item.icon"
+        :icon-src="item.iconSrc"
         :label="item.label"
         :active="isNavActive(item.routeName)"
         @click="navigateTo(item.routeName)"

src/layouts/desktop/desktop-layout.less

@@ -61,13 +61,25 @@
       color: #fff;
 
       .desktop-nav-item__icon {
-        color: #fff;
+        color: #133050;
       }
     }
   }
 
+  .desktop-nav-item__icon-wrap {
+    background: rgba(255, 255, 255, 0.92);
+  }
+
   .desktop-nav-item__icon {
-    color: rgba(255, 255, 255, 0.85);
+    color: #133050;
+  }
+
+  .desktop-nav-item {
+    &:hover {
+      .desktop-nav-item__icon {
+        color: #133050;
+      }
+    }
   }
 
   .desktop-sidebar__logo {
@@ -153,6 +165,17 @@
   color: #9ca3af;
 }
 
+.desktop-nav-item__icon-wrap {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: transparent;
+  flex-shrink: 0;
+}
+
 .desktop-nav-item__label {
   flex: 1;
   line-height: 1.3;

src/layouts/mobile/MobileBottomNav.vue

@@ -7,7 +7,13 @@
         class="tab"
         @click="$emit('navigate', 'buyProduct')"
       >
-        <Icon icon="vuesax-linear:box" />
+        <div class="tab__icon">
+          <img
+            :src="boursecuBuySellIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+        </div>
         <div class="text-xs mt-1 font-bold">سفارش ها</div>
       </div>
       <div
@@ -16,7 +22,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
 
@@ -25,7 +33,15 @@
         class="tab"
         @click="$emit('navigate', 'transactions')"
       >
-        <Icon icon="vuesax-linear:receipt-item" />
+        <div class="tab__icon">
+          <img
+            v-if="isBoursecu"
+            :src="boursecuTransactionsIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+          <Icon v-else icon="vuesax-linear:receipt-item" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}</div>
       </div>
 
@@ -35,7 +51,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
       <div v-else class="main_in" @click="$emit('navigate', 'buyProduct')">
@@ -66,7 +84,15 @@
         class="tab"
         @click="$emit('navigate', 'wallet')"
       >
-        <Icon icon="vuesax-linear:wallet-1" />
+        <div class="tab__icon">
+          <img
+            v-if="isBoursecu"
+            :src="boursecuWalletIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+          <Icon v-else icon="vuesax-linear:wallet-1" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">کیف پول</div>
       </div>
       <div
@@ -74,7 +100,9 @@
         class="tab"
         @click="$emit('navigate', 'user')"
       >
-        <Icon icon="vuesax-linear:setting-2" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:setting-2" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">تنظیمات</div>
       </div>
     </div>
@@ -88,7 +116,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { getConfigApp } from '@/utils/config'
+import { getBoursecuActionIconSrc, getConfigApp } from '@/utils/config'
 
 defineProps<{
   isBoursecu: boolean
@@ -102,6 +130,28 @@ defineEmits<{
 }>()
 
 const projectName = getConfigApp('name')
+const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
+const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
+const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
 const whiteNavLogoProjects = ['goldenramin']
 const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(projectName))
 </script>
+
+<style scoped>
+.tab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.tab__icon-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform: scale(2.25);
+}
+</style>

src/layouts/types.ts

@@ -3,4 +3,5 @@ export interface AppNavItem {
   routeName: string
   label: string
   icon: string
+  iconSrc?: string
 }

src/utils/config.ts

@@ -1,6 +1,12 @@
 import boursecuLogo from '@/assets/img/boursemes_logofull.png'
 import boursecuSplashLogo from '@/assets/img/boursemes-splash.png'
 import boursecuLoginLogo from '@/assets/img/boursemes-login.png'
+import boursecuTransactionsIcon from '@/assets/img/boursecu-transactions-icon.png'
+import boursecuPhysicalReceiveIcon from '@/assets/img/boursecu-physical-receive-icon.png'
+import boursecuConvertIcon from '@/assets/img/boursecu-convert-icon.png'
+import boursecuWalletIcon from '@/assets/img/boursecu-wallet-icon.png'
+import boursecuBuySellIcon from '@/assets/img/boursecu-buy-sell-icon.png'
+import boursecuAssetsIcon from '@/assets/img/boursecu-assets-icon.png'
 import bazretalaLoginLogo from '@/assets/img/bazretala-login-logo.png'
 import bazretalaNavLogo from '@/assets/img/bazretala-nav-logo.png'
 import bazretalaFundBg from '@/assets/img/bazretala-fund-bg.png'
@@ -23,6 +29,43 @@ export function isBazretalaProject() {
   return getConfigApp('name') === 'bazretala'
 }
 
+export function getBoursecuTransactionsIcon() {
+  return boursecuTransactionsIcon
+}
+
+export function getBoursecuPhysicalReceiveIcon() {
+  return boursecuPhysicalReceiveIcon
+}
+
+export function getBoursecuConvertIcon() {
+  return boursecuConvertIcon
+}
+
+export function getBoursecuWalletIcon() {
+  return boursecuWalletIcon
+}
+
+export function getBoursecuBuySellIcon() {
+  return boursecuBuySellIcon
+}
+
+export function getBoursecuAssetsIcon() {
+  return boursecuAssetsIcon
+}
+
+export function getBoursecuActionIconSrc(actionId: string): string | undefined {
+  const icons: Record<string, string> = {
+    buySell: boursecuBuySellIcon,
+    wallet: boursecuWalletIcon,
+    assets: boursecuAssetsIcon,
+    transactions: boursecuTransactionsIcon,
+    physicalReceive: boursecuPhysicalReceiveIcon,
+    convert: boursecuConvertIcon,
+  }
+
+  return icons[actionId]
+}
+
 export function hasCustomLoginLogoLayout() {
   return isBoursecuProject() || isBazretalaProject()
 }

src/views/base/home/components/HomeQuickActionBox.vue

@@ -17,12 +17,18 @@ const isBoursecu = isBoursecuProject()
 <template>
   <button
     type="button"
-    class="home-quick-action-box flex flex-col items-center justify-center gap-2 rounded-xl border-2 p-3 min-h-[96px] w-full"
+    class="home-quick-action-box flex flex-col items-center justify-center gap-2 rounded-xl border-2 p-1 min-h-[96px] w-full"
     :class="{ 'home-quick-action-box--boursecu': isBoursecu }"
     @click="$emit('click')"
   >
-    <div class="flex h-11 w-11 shrink-0 items-center justify-center">
-      <Icon class="text-primary" :icon="action.icon" size="28" />
+    <div class="flex h-12 w-12 shrink-0 items-center justify-center">
+      <img
+        v-if="action.iconSrc"
+        :src="action.iconSrc"
+        alt=""
+        class="h-full w-full object-contain project-icon-image"
+      />
+      <Icon v-else class="text-primary" :icon="action.icon" size="28" />
     </div>
     <span class="text-primary text-xs font-bold text-center leading-5">{{ action.label }}</span>
   </button>
@@ -38,4 +44,8 @@ const isBoursecu = isBoursecuProject()
   background-color: #eff5f3;
   border-color: #d4e3de;
 }
+
+.project-icon-image {
+  transform: scale(1.75);
+}
 </style>

src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue

@@ -32,7 +32,13 @@ function navigate(action: HomeQuickActionItem) {
         @click="navigate(action)"
       >
         <span class="dhome-action__icon">
-          <BasicIcon :icon="action.icon" size="18" />
+          <img
+            v-if="action.iconSrc"
+            :src="action.iconSrc"
+            alt=""
+            class="dhome-action__icon-image"
+          />
+          <BasicIcon v-else :icon="action.icon" size="18" />
         </span>
         <span class="dhome-action__label">{{ action.label }}</span>
         <BasicIcon icon="vuesax-linear:arrow-left" size="14" class="dhome-action__chevron" />

src/views/base/home/desktop/styles/desktop-home.less

@@ -374,6 +374,14 @@
     color: @App-primary-color;
     flex-shrink: 0;
     transition: background 0.15s ease;
+    overflow: visible;
+  }
+
+  &__icon-image {
+    width: 18px;
+    height: 18px;
+    object-fit: contain;
+    transform: scale(2.2);
   }
 
   &:hover &__icon {

src/views/base/home/layouts/configs/boursecuQuickActions.ts

@@ -1,3 +1,4 @@
+import { getBoursecuActionIconSrc } from '@/utils/config'
 import type { HomeQuickActionItem } from '../types'
 
 export const boursecuQuickActions: HomeQuickActionItem[] = [
@@ -5,36 +6,42 @@ export const boursecuQuickActions: HomeQuickActionItem[] = [
     id: 'buySell',
     label: 'خرید و فروش',
     icon: 'vuesax-linear:money-receive',
+    iconSrc: getBoursecuActionIconSrc('buySell'),
     route: { name: 'buyProduct' },
   },
   {
     id: 'wallet',
     label: 'واریز و برداشت',
     icon: 'vuesax-linear:wallet-1',
+    iconSrc: getBoursecuActionIconSrc('wallet'),
     route: { name: 'wallet' },
   },
   {
     id: 'assets',
     label: 'دارایی ها',
     icon: 'vuesax-linear:cup',
+    iconSrc: getBoursecuActionIconSrc('assets'),
     route: { name: 'fund' },
   },
   {
     id: 'transactions',
     label: 'تراکنش ها',
     icon: 'vuesax-linear:receipt-item',
+    iconSrc: getBoursecuActionIconSrc('transactions'),
     route: { name: 'transactions' },
   },
   {
     id: 'physicalReceive',
     label: 'تحویل فیزیکی',
     icon: 'vuesax-linear:direct-inbox',
+    iconSrc: getBoursecuActionIconSrc('physicalReceive'),
     route: { name: 'physicalReceive' },
   },
   {
     id: 'convert',
     label: 'تبدیل',
     icon: 'vuesax-linear:refresh-circle',
+    iconSrc: getBoursecuActionIconSrc('convert'),
     route: { name: 'buyProduct' },
   },
-]
+]

src/views/base/home/layouts/types.ts

@@ -18,6 +18,7 @@ export interface HomeQuickActionItem {
   id: string
   label: string
   icon: string
+  iconSrc?: string
   route: { name: string; query?: Record<string, string> }
 }
 

src/views/base/user/composables/useUserPage.ts

@@ -14,12 +14,13 @@ import { updateMe, updatePass } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import { getUserAvatarUrl } from '@/utils/file'
 import { useConfigStore } from '@/store/configStore'
-import { getConfigApp, getReferralShareText, getReferralShareTitle } from '@/utils/config'
+import { getConfigApp, getReferralShareText, getReferralShareTitle, isBoursecuProject, getBoursecuActionIconSrc } from '@/utils/config'
 
 export interface UserMenuAction {
   id: string
   label: string
   icon: string
+  iconSrc?: string
   onClick: () => void
   visible: boolean
 }
@@ -138,6 +139,7 @@ export function useUserPage() {
         id: 'physicalReceive',
         label: 'تحویل فیزیکی',
         icon: 'vuesax-linear:direct-inbox',
+        iconSrc: isBoursecuProject() ? getBoursecuActionIconSrc('physicalReceive') : undefined,
         onClick: () => router.push({ name: 'physicalReceive' }),
         visible: projectName !== 'bazretala',
       },

src/views/base/user/desktop/DesktopUserView.vue

@@ -71,7 +71,13 @@
               @click="action.onClick"
             >
               <span class="duser-actions__icon">
-                <BasicIcon :icon="action.icon" size="18" />
+                <img
+                  v-if="action.iconSrc"
+                  :src="action.iconSrc"
+                  alt=""
+                  class="duser-actions__icon-image"
+                />
+                <BasicIcon v-else :icon="action.icon" size="18" />
               </span>
               <span class="duser-actions__label">{{ action.label }}</span>
               <BasicIcon

src/views/base/user/desktop/styles/desktop-user.less

@@ -230,6 +230,14 @@
     background: #f3f4f6;
     color: #374151;
     flex-shrink: 0;
+    overflow: visible;
+  }
+
+  &__icon-image {
+    width: 18px;
+    height: 18px;
+    object-fit: contain;
+    transform: scale(2.2);
   }
 
   &__label {

src/views/base/user/mobile/MobileUserView.vue

@@ -74,7 +74,13 @@
             @click="action.onClick"
           >
             <div class="flex">
-              <BasicIcon :icon="action.icon" class="absolute right-8" />
+              <img
+                v-if="action.iconSrc"
+                :src="action.iconSrc"
+                alt=""
+                class="user-menu-icon-image absolute right-8"
+              />
+              <BasicIcon v-else :icon="action.icon" class="absolute right-8" />
               <div>{{ action.label }}</div>
             </div>
           </BasicButton>
@@ -108,4 +114,11 @@ const {
   overflow-y: auto;
   max-height: 100vh;
 }
+
+.user-menu-icon-image {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+  transform: scale(2.2);
+}
 </style>