Ft/membership placement icon

src/app/[locale]/seller/registration/page.tsx

@@ -14,6 +14,7 @@ import {
   TelephoneInput
 } from '@/components/shared/Forms/Inputs/Inputs';
 import ConfirmDialog from '@/components/shared/confirm';
+import MembershipIcon from '@/components/shared/membership/MembershipIcon';
 import OnlineShopping from '@/components/shared/Seller/ShopItem';
 import ToggleCollapse from '@/components/shared/Seller/ToggleCollapse';
 import Skeleton from '@/components/skeleton/skeleton';
@@ -372,9 +373,18 @@ const SellerRegistrationForm = () => {
   return (
     <>
       <div className="w-full md:w-[500px] md:mx-auto p-4">
-        <div className="text-center mb-5">
-          <h3 className="text-gray-400 text-sm">
-            {dbSeller ? dbSeller.name : ''}
+        <div className="w-full flex flex-col items-center mb-5">
+          <h3 className="text-gray-400 text-sm flex items-center">
+            {dbSeller ? dbSeller.name : ''} 
+            <MembershipIcon 
+              category='triple_gold' 
+              className="ml-1"
+              styleComponent={{
+                display: "inline-block",
+                objectFit: "contain",
+                verticalAlign: "middle"
+              }}
+            />
           </h3>
           <h1 className={HEADER}>
             {t('SCREEN.SELLER_REGISTRATION.SELLER_REGISTRATION_HEADER')}

src/app/[locale]/seller/sale-items/[id]/page.tsx

@@ -8,7 +8,10 @@ import React, { useEffect, useState, useContext, useRef } from 'react';
 
 import ConfirmDialog from '@/components/shared/confirm';
 import { Button, OutlineBtn } from '@/components/shared/Forms/Buttons/Buttons';
+import { Select, TextArea } from '@/components/shared/Forms/Inputs/Inputs';
+import MembershipIcon from '@/components/shared/membership/MembershipIcon';
 import TrustMeter from '@/components/shared/Review/TrustMeter';
+import { ListItem } from '@/components/shared/Seller/ShopItem';
 import ToggleCollapse from '@/components/shared/Seller/ToggleCollapse';
 import Skeleton from '@/components/skeleton/skeleton';
 import { ISeller, IUserSettings, IUser, SellerItem } from '@/constants/types';
@@ -19,8 +22,6 @@ import { checkAndAutoLoginUser } from '@/utils/auth';
 
 import { AppContext } from '../../../../../../context/AppContextProvider';
 import logger from '../../../../../../logger.config.mjs';
-import { ListItem, ShopItem } from '@/components/shared/Seller/ShopItem';
-import { Select, TextArea } from '@/components/shared/Forms/Inputs/Inputs';
 
 export default function BuyFromSellerForm({ params }: { params: { id: string } }) {
   const SUBHEADER = "font-bold mb-2";
@@ -178,7 +179,18 @@ export default function BuyFromSellerForm({ params }: { params: { id: string } }
             />
           </div>
           <div className="my-auto">
-            <h2 className="font-bold mb-2">{sellerShopInfo.name}</h2>
+            <h2 className="font-bold text-[18px] mb-2 flex items-center">
+              {sellerShopInfo.name} 
+              <MembershipIcon 
+                category='triple_gold' 
+                className="ml-1"
+                styleComponent={{
+                  display: "inline-block",
+                  objectFit: "contain",
+                  verticalAlign: "middle"
+                }}
+              />
+            </h2>
             <p className="text-sm">{translateSellerCategory(sellerShopInfo.seller_type)}</p>
           </div>
         </div>

src/components/shared/map/MapMarkerPopup.tsx

@@ -1,10 +1,9 @@
 import { useTranslations, useLocale } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
-
 import TrustMeter from '@/components/shared/Review/TrustMeter';
+import MembershipIcon from '../membership/MembershipIcon';
 import { Button } from '../Forms/Buttons/Buttons';
-
 import logger from '../../../../logger.config.mjs';
 
 const MapMarkerPopup = ({ seller }: { seller: any }) => {
@@ -39,18 +38,28 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
     <div style={{ position: 'relative', zIndex: 20, padding: '10px' }}>
       {/* Seller name and type - Close with a small gap */}
       <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <h2
-          style={{
-            fontWeight: 'bold',
-            fontSize: '15px',
-            marginBottom: '2px',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {truncateChars(seller.name, 12)} {/* Adjust limit as needed */}
-        </h2>
+        <div className="flex gap-1 justify-center items-center">
+          <h2
+            style={{
+              fontWeight: 'bold',
+              fontSize: '15px',
+              marginBottom: '2px',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {truncateChars(seller.name, 12)} {/* Adjust limit as needed */}
+          </h2>
+          <MembershipIcon 
+            category='triple_gold' 
+            styleComponent={{
+              display: "inline-block",
+              objectFit: "contain",
+              verticalAlign: "middle"
+            }}
+          />
+        </div>
 
         {seller.seller_type && (
           <p style={{ fontSize: '14px', color: '#6B7280', marginTop: '0px', marginBottom: '4px' }}>