fix: avatar resize issue fixed

deriv-com · May 24, 2024 · f949808 · f949808
1 parent 49c4c57
commit f949808
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx
@@ -16,14 +16,14 @@ type TAdvertiserNameProps = {
 
 const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProps) => {
     const { data } = useGetSettings();
-    const { isDesktop } = useDevice();
+    const { isMobile } = useDevice();
     const isMyProfile = getCurrentRoute() === 'my-profile';
 
     const name = advertiserStats?.name || data?.email;
 
     return (
         <div className='advertiser-name' data-testid='dt_advertiser_name'>
-            <UserAvatar nickname={name ?? ''} size={isDesktop ? 64 : 42} textSize='lg' />
+            <UserAvatar nickname={name ?? ''} size={isMobile ? 42 : 64} textSize='lg' />
             <div className='advertiser-name__details'>
                 <div className='flex items-center gap-3'>
                     <Text size='md' weight='bold'>
@@ -38,8 +38,8 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp
                 <AdvertiserNameStats advertiserStats={advertiserStats} />
                 <AdvertiserNameBadges advertiserStats={advertiserStats} />
             </div>
-            {isDesktop && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
-            {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && (
+            {!isMobile && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
+            {!isMobile && !isMyProfile && !advertiserStats?.is_blocked && (
                 <BlockDropdown id={advertiserStats?.id} onClickBlocked={onClickBlocked} />
             )}
         </div>

diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx
@@ -10,12 +10,18 @@ const mockProps = {
 };
 
 jest.mock('@deriv-com/api-hooks', () => ({
+    ...jest.requireActual('@deriv-com/api-hooks'),
     useGetSettings: jest.fn(() => ({ email: '[email protected]' })),
 }));
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
-    useDevice: jest.fn(() => ({ isMobile: false })),
+    useDevice: jest.fn(() => ({ isMobile: true })),
+}));
+
+jest.mock('@/utils', () => ({
+    ...jest.requireActual('@/utils'),
+    getCurrentRoute: jest.fn(() => ''),
 }));
 
 describe('AdvertiserName', () => {