Merge pull request #327 from nada-deriv/nada/FEQ-2477/upgrade-ui-version

Nada/feq 2477/upgrade UI version
deriv-com · Sep 18, 2024 · 8fc51fb · 8fc51fb
2 parents 17be272 + 1616efa
commit 8fc51fb
Show file tree

Hide file tree

Showing 51 changed files with 205 additions and 677 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
         "@deriv-com/analytics": "^1.16.1",
         "@deriv-com/api-hooks": "^1.4.9",
         "@deriv-com/translations": "^1.3.7",
-        "@deriv-com/ui": "^1.29.0",
+        "@deriv-com/ui": "^1.30.2",
         "@deriv-com/utils": "^0.0.28",
         "@deriv/quill-icons": "^1.23.8",
         "@sendbird/chat": "^4.11.3",

diff --git a/src/components/AdvertiserName/AdvertiserNameStats.scss b/src/components/AdvertiserName/AdvertiserNameStats.scss
@@ -9,7 +9,7 @@
         gap: 1rem;
     }
 
-    & div:not(.deriv-tooltip-container):not(.deriv-tooltip-container *) {
+    & div:not(.deriv-tooltip) {
         display: flex;
         align-items: center;
         gap: 0.8rem;
@@ -27,7 +27,7 @@
         }
         @include desktop {
             &:nth-child(2) {
-                & div {
+                & div:not(.deriv-tooltip) {
                     padding-right: 0;
                 }
             }

diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -5,9 +5,8 @@ import { useModalManager } from '@/hooks';
 import { getCurrentRoute } from '@/utils';
 import { LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Text, Tooltip, useDevice } from '@deriv-com/ui';
 import { BlockUserCountModal } from '../Modals';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
 import BlockUserCount from './BlockUserCount';
 import './AdvertiserNameStats.scss';
 
@@ -99,9 +98,10 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                             </div>
                         </div>
                         <div>
-                            <TooltipMenuIcon
+                            <Tooltip
                                 as='button'
                                 className='advertiser-name-stats__tooltip'
+                                hideTooltip={!isDesktop}
                                 onClick={() => {
                                     isDesktop ? undefined : showModal('BlockUserCountModal');
                                 }}
@@ -111,7 +111,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                                 <Text color='less-prominent' size='sm'>
                                     {recommendedAverage || 0}%
                                 </Text>
-                            </TooltipMenuIcon>
+                            </Tooltip>
                         </div>
                     </>
                 )}

diff --git a/src/components/AdvertiserName/BlockDropdown.tsx b/src/components/AdvertiserName/BlockDropdown.tsx
@@ -18,7 +18,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
     return (
         <div className='block-dropdown'>
             <Dropdown
-                dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon data-testid='dt_block_dropdown_icon' />}
+                chevronIcon={<LabelPairedEllipsisVerticalXlRegularIcon data-testid='dt_block_dropdown_icon' />}
                 list={[
                     {
                         text: localize('Block'),

diff --git a/src/components/AdvertiserName/BlockUserCount.scss b/src/components/AdvertiserName/BlockUserCount.scss
@@ -1,9 +1,4 @@
 .block-user-count {
-    & .deriv-tooltip-container {
-        display: flex;
-        align-items: center;
-        gap: 0.1rem;
-    }
     &__tooltip {
         padding: 0 0.8rem;
         display: flex;
@@ -28,4 +23,12 @@
     &__button {
         padding: 0;
     }
+
+    & .deriv-tooltip {
+        padding: 0.8rem;
+
+        @include mobile-or-tablet-screen {
+            display: none;
+        }
+    }
 }
diff --git a/src/components/AdvertiserName/BlockUserCount.tsx b/src/components/AdvertiserName/BlockUserCount.tsx
@@ -2,9 +2,8 @@ import { TLocalize } from 'types';
 import { useModalManager } from '@/hooks';
 import { LabelPairedCircleUserSlashSmRegularIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Text, Tooltip, useDevice } from '@deriv-com/ui';
 import { BlockUserCountModal } from '../Modals';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
 import './BlockUserCount.scss';
 
 type TBlockUserCount = {
@@ -32,21 +31,21 @@ const BlockUserCount = ({ count }: TBlockUserCount) => {
     const { isDesktop, isMobile } = useDevice();
     return (
         <div className='block-user-count'>
-            <TooltipMenuIcon
+            <Tooltip
                 as='button'
                 className='block-user-count__tooltip'
                 data-testid='dt_block_user_count_button'
                 onClick={() => {
                     isDesktop ? undefined : showModal('BlockUserCountModal');
                 }}
-                tooltipContent={getMessage(localize, count)}
+                tooltipContent={<Text size='xs'>{getMessage(localize, count)}</Text>}
             >
                 <LabelPairedCircleUserSlashSmRegularIcon />
 
                 <Text color='less-prominent' size={isMobile ? 'xs' : 'sm'}>
                     {count ?? 0}
                 </Text>
-            </TooltipMenuIcon>
+            </Tooltip>
             {!!isModalOpenFor('BlockUserCountModal') && (
                 <BlockUserCountModal isModalOpen message={getMessage(localize, count)} onRequestClose={hideModal} />
             )}

diff --git a/src/components/AppFooter/AccountLimits.tsx b/src/components/AppFooter/AccountLimits.tsx
@@ -1,20 +1,15 @@
 import { ACCOUNT_LIMITS } from '@/constants';
 import { LegacyAccountLimitsIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const AccountLimits = () => {
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
-            as='a'
-            className='app-footer__icon'
-            href={ACCOUNT_LIMITS}
-            tooltipContent={localize('Account limits')}
-        >
+        <Tooltip as='a' className='app-footer__icon' href={ACCOUNT_LIMITS} tooltipContent={localize('Account limits')}>
             <LegacyAccountLimitsIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/ChangeTheme.tsx b/src/components/AppFooter/ChangeTheme.tsx
@@ -1,16 +1,16 @@
 import { LegacyThemeLightIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const ChangeTheme = () => {
     const { localize } = useTranslations();
 
     return (
         // TODO need to add theme logic
         // TODO update the component's tests after adding the logic
-        <TooltipMenuIcon as='button' className='app-footer__icon' tooltipContent={localize('Change theme')}>
+        <Tooltip as='button' className='app-footer__icon' tooltipContent={localize('Change theme')}>
             <LegacyThemeLightIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/Deriv.tsx b/src/components/AppFooter/Deriv.tsx
@@ -1,21 +1,21 @@
 import { DERIV_COM } from '@/constants';
 import { LegacyDerivIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const Deriv = () => {
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='a'
             className='app-footer__icon'
             href={DERIV_COM}
             target='_blank'
             tooltipContent={localize('Go to deriv.com')}
         >
             <LegacyDerivIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/FullScreen.tsx b/src/components/AppFooter/FullScreen.tsx
@@ -1,21 +1,21 @@
 import { useFullScreen } from '@/hooks';
 import { LegacyFullscreen1pxIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const FullScreen = () => {
     const { toggleFullScreenMode } = useFullScreen();
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='button'
             className='app-footer__icon'
             onClick={toggleFullScreenMode}
             tooltipContent={localize('Full screen')}
         >
             <LegacyFullscreen1pxIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/HelpCentre.tsx b/src/components/AppFooter/HelpCentre.tsx
@@ -1,21 +1,21 @@
 import { HELP_CENTRE } from '@/constants';
 import { LegacyHelpCentreIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const HelpCentre = () => {
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='a'
             className='app-footer__icon'
             href={HELP_CENTRE}
             target='_blank'
             tooltipContent={localize('Help centre')}
         >
             <LegacyHelpCentreIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/LanguageSettings.tsx b/src/components/AppFooter/LanguageSettings.tsx
@@ -1,9 +1,8 @@
 import { useMemo } from 'react';
 import { LANGUAGES } from '@/constants';
 import { useTranslations } from '@deriv-com/translations';
-import { Text } from '@deriv-com/ui';
+import { Text, Tooltip } from '@deriv-com/ui';
 import { LocalStorageUtils } from '@deriv-com/utils';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
 
 type TLanguageSettings = {
     openLanguageSettingModal: () => void;
@@ -19,7 +18,7 @@ const LanguageSettings = ({ openLanguageSettingModal }: TLanguageSettings) => {
     );
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='button'
             className='app-footer__language'
             onClick={openLanguageSettingModal}
@@ -29,7 +28,7 @@ const LanguageSettings = ({ openLanguageSettingModal }: TLanguageSettings) => {
             <Text size='xs' weight='bold'>
                 {currentLang}
             </Text>
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };
 

diff --git a/src/components/AppFooter/Livechat.tsx b/src/components/AppFooter/Livechat.tsx
@@ -1,14 +1,14 @@
 import { useLiveChat } from '@/hooks/custom-hooks';
 import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { TooltipMenuIcon } from '../TooltipMenuIcon';
+import { Tooltip } from '@deriv-com/ui';
 
 const Livechat = () => {
     const { LiveChatWidget } = useLiveChat();
     const { localize } = useTranslations();
 
     return (
-        <TooltipMenuIcon
+        <Tooltip
             as='button'
             className='app-footer__icon'
             onClick={() => {
@@ -17,7 +17,7 @@ const Livechat = () => {
             tooltipContent={localize('Live chat')}
         >
             <LegacyLiveChatOutlineIcon iconSize='xs' />
-        </TooltipMenuIcon>
+        </Tooltip>
     );
 };