chore: handle quoted button (deriv-com#17371)

heorhi-deriv · Nov 6, 2024 · 8769161 · 8769161
1 parent 56d6f3a
commit 8769161
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/.../AppV2/Components/Guide/Description/ContractDescription/multipliers-trade-description.tsx b/.../AppV2/Components/Guide/Description/ContractDescription/multipliers-trade-description.tsx
@@ -68,20 +68,20 @@ const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: stri
             type: 'paragraph',
             text: (
                 <Localize
-                    i18n_default_text='Additional features are available to manage your positions: “<0>Take profit</0>”, “<1>Stop loss</1>” and “<2>Deal cancellation</2>” allow you to adjust your level of risk aversion.'
+                    i18n_default_text='Additional features are available to manage your positions: <0>Take profit</0>, <1>Stop loss</1> and <2>Deal cancellation</2> allow you to adjust your level of risk aversion.'
                     components={[
                         <button
-                            className='description__content--definition'
+                            className='description__content--definition quoted-button'
                             key={0}
                             onClick={() => onTermClick(TAKE_PROFIT)}
                         />,
                         <button
-                            className='description__content--definition'
+                            className='description__content--definition quoted-button'
                             key={1}
                             onClick={() => onTermClick(STOP_LOSS)}
                         />,
                         <button
-                            className='description__content--definition'
+                            className='description__content--definition quoted-button'
                             key={2}
                             onClick={() => onTermClick(DEAL_CANCELLATION)}
                         />,

diff --git a/packages/trader/src/AppV2/Components/Guide/guide.scss b/packages/trader/src/AppV2/Components/Guide/guide.scss
@@ -133,6 +133,20 @@
     }
 }
 
+.quoted-button {
+    white-space: nowrap;
+    &:before {
+        // for opening quotes
+        content: '\201C';
+        color: var(--component-textIcon-normal-default);
+    }
+    &:after {
+        // for closing quotes
+        content: '\201D';
+        color: var(--component-textIcon-normal-default);
+    }
+}
+
 .definition {
     &__title {
         margin-block-end: var(--component-actionSheet-spacing-padding-lg);