Nada/advertiser registration issues

src/components/AdvertiserName/AdvertiserNameStats.scss

@@ -6,7 +6,7 @@
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        gap: 2rem;
+        gap: 1rem;
     }
 
     & div:not(.deriv-tooltip-container):not(.deriv-tooltip-container *) {
@@ -23,13 +23,33 @@
 
         &:first-child {
             padding-left: 0;
-            padding-right: 0.8rem;
             border-left: none;
         }
+        @include desktop {
+            &:nth-child(2) {
+                & div {
+                    padding-right: 0;
+                }
+            }
+        }
     }
 
     &__rating {
         display: flex;
         gap: 0.5rem;
     }
+
+    &__tooltip {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        &:hover {
+            background-color: transparent;
+        }
+
+        @include mobile-or-tablet-screen {
+            padding-left: 1rem;
+            border-left: 1px solid #f2f3f4;
+        }
+    }
 }

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -1,13 +1,24 @@
 import clsx from 'clsx';
-import { DeepPartial, TAdvertiserStats } from 'types';
+import { DeepPartial, TAdvertiserStats, TLocalize } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
+import { useModalManager } from '@/hooks';
 import { getCurrentRoute } from '@/utils';
 import { LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
+import { BlockUserCountModal } from '../Modals';
+import { TooltipMenuIcon } from '../TooltipMenuIcon';
 import BlockUserCount from './BlockUserCount';
 import './AdvertiserNameStats.scss';
 
+const getMessage = (localize: TLocalize, count = 0) => {
+    if (count > 0) {
+        return localize('Recommended by {{count}} traders', {
+            count,
+        });
+    }
+    return localize('Recommended by 1 trader');
+};
 /**
  * This component is to show an advertiser's stats, in UI its commonly used under an advertiser's name
  * Example:
@@ -16,8 +27,10 @@ import './AdvertiserNameStats.scss';
  * Use cases are to show this in My Profile and Advertiser page
  */
 const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdvertiserStats> }) => {
+    const { localize } = useTranslations();
     const { isDesktop } = useDevice();
     const isMyProfile = getCurrentRoute() === 'my-profile';
+    const { hideModal, isModalOpenFor, showModal } = useModalManager();
 
     const {
         blocked_by_count: blockedByCount,
@@ -27,6 +40,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
         rating_average: ratingAverage,
         rating_count: ratingCount,
         recommended_average: recommendedAverage,
+        recommended_count: recommendedCount = 0,
     } = advertiserStats || {};
 
     return (
@@ -54,33 +68,58 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                     )}
                 </Text>
             </div>
-            {!ratingAverage && (
-                <div>
-                    <Text color='less-prominent' size='sm'>
-                        <Localize i18n_default_text='Not rated yet' />
-                    </Text>
-                </div>
-            )}
-            {ratingAverage && (
-                <>
-                    <div>
-                        <div className='advertiser-name-stats__rating'>
-                            <Text size='sm'>({ratingAverage})</Text>
-                            <StarRating allowFraction isReadonly ratingValue={ratingAverage} />
-                            <Text color='less-prominent' size='sm'>
-                                (<Localize i18n_default_text='{{ratingCount}} ratings' values={{ ratingCount }} />)
-                            </Text>
-                        </div>
-                    </div>
+            <div>
+                {!ratingAverage && (
                     <div>
-                        <LabelPairedThumbsUpSmRegularIcon />
                         <Text color='less-prominent' size='sm'>
-                            {recommendedAverage || 0}%
+                            <Localize i18n_default_text='Not rated yet' />
                         </Text>
                     </div>
-                </>
-            )}
+                )}
+                {ratingAverage && (
+                    <>
+                        <div>
+                            <div className='advertiser-name-stats__rating'>
+                                <Text size='sm'>({ratingAverage})</Text>
+                                <StarRating allowFraction isReadonly ratingValue={ratingAverage} />
+                                <Text color='less-prominent' size='sm'>
+                                    {ratingCount && ratingCount > 1 ? (
+                                        <Localize
+                                            i18n_default_text='{{ratingCount}} ratings'
+                                            values={{ ratingCount }}
+                                        />
+                                    ) : (
+                                        <Localize i18n_default_text='1 rating' />
+                                    )}
+                                </Text>
+                            </div>
+                        </div>
+                        <div>
+                            <TooltipMenuIcon
+                                as='button'
+                                className='advertiser-name-stats__tooltip'
+                                onClick={() => {
+                                    isDesktop ? undefined : showModal('BlockUserCountModal');
+                                }}
+                                tooltipContent={getMessage(localize, recommendedCount ?? 0)}
+                            >
+                                <LabelPairedThumbsUpSmRegularIcon fill='#4bb4b3' />
+                                <Text color='less-prominent' size='sm'>
+                                    {recommendedAverage || 0}%
+                                </Text>
+                            </TooltipMenuIcon>
+                        </div>
+                    </>
+                )}
+            </div>
             {isMyProfile && <BlockUserCount count={blockedByCount} />}
+            {!!isModalOpenFor('BlockUserCountModal') && (
+                <BlockUserCountModal
+                    isModalOpen
+                    message={getMessage(localize, recommendedCount ?? 0)}
+                    onRequestClose={hideModal}
+                />
+            )}
         </div>
     );
 };

src/components/AdvertiserName/BlockUserCount.scss

@@ -5,11 +5,17 @@
         gap: 0.1rem;
     }
     &__tooltip {
-        padding: 0.8rem;
-        gap: 0;
+        padding: 0 0.8rem;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+
+        &:hover {
+            background-color: transparent;
+        }
 
         @include mobile-or-tablet-screen {
-            display: none;
+            padding: 0.8rem 0;
         }
     }
 

src/components/AdvertiserName/BlockUserCount.tsx

@@ -2,8 +2,9 @@ import { TLocalize } from 'types';
 import { useModalManager } from '@/hooks';
 import { LabelPairedCircleUserSlashSmRegularIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Button, Text, Tooltip, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { BlockUserCountModal } from '../Modals';
+import { TooltipMenuIcon } from '../TooltipMenuIcon';
 import './BlockUserCount.scss';
 
 type TBlockUserCount = {
@@ -31,25 +32,21 @@ const BlockUserCount = ({ count }: TBlockUserCount) => {
     const { isDesktop } = useDevice();
     return (
         <div className='block-user-count'>
-            <Tooltip
+            <TooltipMenuIcon
+                as='button'
                 className='block-user-count__tooltip'
-                message={<Text size='xs'>{getMessage(localize, count)}</Text>}
+                data-testid='dt_block_user_count_button'
+                onClick={() => {
+                    isDesktop ? undefined : showModal('BlockUserCountModal');
+                }}
+                tooltipContent={getMessage(localize, count)}
             >
-                <Button
-                    className='block-user-count__button'
-                    color='white'
-                    data-testid='dt_block_user_count_button'
-                    onClick={() => {
-                        isDesktop ? undefined : showModal('BlockUserCountModal');
-                    }}
-                    variant='outlined'
-                >
-                    <LabelPairedCircleUserSlashSmRegularIcon />
-                </Button>
+                <LabelPairedCircleUserSlashSmRegularIcon />
+
                 <Text color='less-prominent' size='sm'>
                     {count ?? 0}
                 </Text>
-            </Tooltip>
+            </TooltipMenuIcon>
             {!!isModalOpenFor('BlockUserCountModal') && (
                 <BlockUserCountModal isModalOpen message={getMessage(localize, count)} onRequestClose={hideModal} />
             )}

src/components/ProfileContent/ProfileBalance/ProfileBalance.scss

@@ -45,7 +45,6 @@
         gap: 1.6rem;
 
         @include mobile-or-tablet-screen {
-            border-right: 1px solid #f2f3f7;
             gap: 1rem;
 
             &:last-child {
@@ -55,14 +54,13 @@
         }
 
         &-limits {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-
             @include desktop {
+                display: flex;
                 margin-bottom: 2.8rem;
             }
 
             @include mobile-or-tablet-screen {
+                display: grid;
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr 1fr;
                 gap: 0.8rem;

src/components/StarRating/StarRating.scss

@@ -1,7 +1,7 @@
 .star-rating {
     & svg {
         transform: scale(0.7);
-        margin-right: -0.3rem;
+        margin-right: -0.5rem;
         display: inline;
     }
 }

src/routes/AppContent/index.scss

@@ -51,3 +51,10 @@
         border-bottom: 1px solid #f2f3f4;
     }
 }
+
+// to disable border in firefox
+.deriv-input__field {
+    &:focus {
+        outline: none;
+    }
+}