henry/dtra-131/feat: dropdown style and description change for all tr…

…ade types (#8727)

* feat: dropdown style and description change for all trade types

* fix: minify svg

* refactor: resolve edge cases

* fix: remove comment

* fix: resolve comments

* fix: add animation, make image scrollable

* refactor: refactor for better maintainability

* fix: circleci issue

* fix: disable animation for now

* fix: indexing to contract type value and change view height for mobile

* fix: remove outerscroll

* fix: trying auto size

* fix: autosizer didnt work

* fix: make words bold

* fix: fix bold

* fix: remove navigation and pagnation

* fix: refactor

* fix: resolve comments

* empty commit

* empty commit

* fix: rearrange glossary based on order

* fix: animation bug

* fix: disable swipe on mobile and animation issue

* fix: remove commented out code

* fix: scroll not working for trade-types

* fix: test

* fix: remove unintended test file

packages/components/src/components/carousel/carousel.tsx

@@ -13,6 +13,7 @@ type TCarousel = {
     bullet_color?: string;
     bullet_position?: 'bottom' | 'top';
     className?: string;
+    disable_swipe?: boolean;
     initial_index?: number;
     is_mt5?: boolean;
     item_per_window?: number;
@@ -30,6 +31,7 @@ const Carousel = ({
     bullet_color = 'var(--text-less-prominent)',
     bullet_position = 'bottom',
     className,
+    disable_swipe = false,
     initial_index = 0,
     is_mt5,
     item_per_window = 1,
@@ -85,7 +87,7 @@ const Carousel = ({
     });
 
     return (
-        <div {...swipe_handlers} className={className}>
+        <div {...(disable_swipe ? {} : swipe_handlers)} className={className}>
             <div className={classNames('dc-carousel', { 'dc-carousel--mt5': is_mt5 })}>
                 {sliced_list_length > 1 && (
                     <Nav

packages/shared/src/styles/themes.scss

@@ -116,6 +116,7 @@
         --button-primary-light-hover: #{$alpha-color-red-3};
         --button-toggle-primary: #{$color-blue-3};
         --button-toggle-secondary: #{$color-grey-5};
+        --button-toggle-alternate: #{$color-white};
         // Overlay
         --overlay-outside-dialog: #{$alpha-color-black-1};
         --overlay-inside-dialog: #{$alpha-color-white-1};
@@ -247,6 +248,7 @@
         --button-primary-light-hover: #{$alpha-color-red-3};
         --button-toggle-primary: #{$color-blue-3};
         --button-toggle-secondary: #{$color-black-8};
+        --button-toggle-alternate: #{$color-black-8};
         // Overlay
         --overlay-outside-dialog: #{$alpha-color-black-1};
         --overlay-inside-dialog: #{$alpha-color-black-2};