fix: renamed your ads are running to hide my ads (#8576)

* fix: renamed your ads are running to hide my ads * feat: inverted toggle behaviour * fix: review comment * fix: changed styles for disabled ads currency * fix: style fixes --------- Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com>
binary-com · Jul 5, 2023 · 194c114 · 194c114
1 parent 5df7ec6
commit 194c114
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 29 deletions.
diff --git a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx b/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx
@@ -50,7 +50,9 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
         market_rate: effective_rate,
     });
 
-    const ad_pause_color = general_store.is_listed && !general_store.is_barred ? 'general' : 'less-prominent';
+    const is_advert_listed = general_store.is_listed && !general_store.is_barred;
+    const ad_pause_color = is_advert_listed ? 'general' : 'less-prominent';
+
     const icon_disabled_color =
         (!general_store.is_listed || general_store.is_barred || !is_advert_active) && 'disabled';
     const is_activate_ad_disabled = floating_rate_store.reached_target_date && enable_action_point;
@@ -61,7 +63,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
         }
     };
     const onClickAdd = () => {
-        if (general_store.is_listed && !general_store.is_barred) {
+        if (is_advert_listed) {
             my_ads_store.showQuickAddModal(advert);
         }
     };
@@ -144,7 +146,11 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                             )}
                         </div>
                         <div className='p2p-my-ads__table-row-details'>
-                            <Text color='profit-success' line_height='m' size='xxs'>
+                            <Text
+                                color={is_advert_listed ? 'profit-success' : 'less-prominent'}
+                                line_height='m'
+                                size='xxs'
+                            >
                                 {`${formatMoney(account_currency, amount_dealt, true)}`} {account_currency}&nbsp;
                                 {is_buy_advert ? localize('Bought') : localize('Sold')}
                             </Text>
@@ -173,9 +179,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                                 {min_order_amount_display} - {max_order_amount_display} {account_currency}
                             </Text>
                             <Text
-                                color={
-                                    general_store.is_listed && !general_store.is_barred ? 'profit-success' : 'disabled'
-                                }
+                                color={is_advert_listed ? 'profit-success' : 'disabled'}
                                 line_height='m'
                                 size='xs'
                                 weight='bold'

diff --git a/packages/p2p/src/components/my-ads/my-ads.scss b/packages/p2p/src/components/my-ads/my-ads.scss
@@ -721,18 +721,11 @@
     .toggle-ads {
         display: flex;
         align-items: center;
-        font-size: var(--text-size-s);
         justify-items: flex-start;
 
         &__message {
             margin-right: 1.6rem;
         }
-        &--on {
-            color: var(--text-profit-success);
-        }
-        &--off {
-            color: var(--text-less-prominent);
-        }
     }
 
     &__expand-button {

diff --git a/packages/p2p/src/components/my-ads/toggle-ads.jsx b/packages/p2p/src/components/my-ads/toggle-ads.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ToggleSwitch } from '@deriv/components';
+import { Text, ToggleSwitch } from '@deriv/components';
 import { useIsMounted } from '@deriv/shared';
-import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { requestWS } from 'Utils/websocket';
-import { localize } from 'Components/i18next';
+import { Localize } from '@deriv/translations';
 import { useStores } from 'Stores';
 import './my-ads.scss';
 
@@ -33,21 +32,18 @@ const ToggleAds = observer(() => {
     };
 
     return (
-        <div
-            className={classNames('toggle-ads', {
-                'toggle-ads--on': general_store.is_listed,
-                'toggle-ads--off': !general_store.is_listed || general_store.is_barred,
-            })}
-        >
-            <div className='toggle-ads__message'>
-                {(my_ads_store.api_error || general_store.is_listed) && !general_store.is_barred
-                    ? localize('Your ads are running')
-                    : localize('Your ads are paused')}
-            </div>
-
+        <div className='toggle-ads'>
+            <Text
+                className='toggle-ads__message'
+                color={general_store.is_listed ? 'less-prominent' : 'profit-success'}
+                line_height='xl'
+                size='xs'
+            >
+                <Localize i18n_default_text='Hide my ads' />
+            </Text>
             <ToggleSwitch
                 id='toggle-my-ads'
-                is_enabled={general_store.is_listed && !general_store.is_barred}
+                is_enabled={general_store.is_barred || !general_store.is_listed}
                 handleToggle={handleToggle}
             />
         </div>