fix: run button color on run and stop status (binary-com#16106)

niloofar-deriv · Jul 29, 2024 · 8fe51d3 · 8fe51d3
1 parent 1f8e870
commit 8fe51d3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss
@@ -73,11 +73,28 @@
     }
 
     // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
-    &__button {
+    &__run-button {
         width: fit-content;
         height: 100% !important;
         border-start-end-radius: 0 !important;
         border-end-end-radius: 0 !important;
+        background-color: var(--purchase-main-1);
+
+        &:hover {
+            background-color: var(--purchase-main-1) !important;
+        }
+    }
+
+    &__stop-button {
+        width: fit-content;
+        height: 100% !important;
+        border-start-end-radius: 0 !important;
+        border-end-end-radius: 0 !important;
+        background-color: var(--button-primary-default);
+
+        &:hover {
+            background-color: var(--button-primary-default) !important;
+        }
     }
 
     &__container {

diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.tsx b/packages/bot-web-ui/src/components/trade-animation/trade-animation.tsx
@@ -70,16 +70,26 @@ const TradeAnimation = observer(({ className, should_show_overlay }: TTradeAnima
 
     const button_props = React.useMemo(() => {
         if (is_stop_button_visible) {
-            return { id: 'db-animation__stop-button', text: localize('Stop'), icon: 'IcBotStop' };
+            return {
+                id: 'db-animation__stop-button',
+                class: 'animation__stop-button',
+                text: localize('Stop'),
+                icon: 'IcBotStop',
+            };
         }
-        return { id: 'db-animation__run-button', text: localize('Run'), icon: 'IcPlay' };
+        return {
+            id: 'db-animation__run-button',
+            class: 'animation__run-button',
+            text: localize('Run'),
+            icon: 'IcPlay',
+        };
     }, [is_stop_button_visible]);
     const show_overlay = should_show_overlay && is_contract_completed;
     return (
         <div className={classNames('animation__wrapper', className)}>
             <Button
                 is_disabled={is_disabled && !is_unavailable_for_payment_agent}
-                className='animation__button'
+                className={button_props.class}
                 id={button_props.id}
                 text={button_props.text}
                 icon={<Icon icon={button_props.icon} color='active' />}

diff --git a/packages/bot-web-ui/src/pages/tutorials/tutorials.scss b/packages/bot-web-ui/src/pages/tutorials/tutorials.scss
@@ -31,7 +31,7 @@
             &--end {
                 position: absolute;
                 top: 0;
-                inset-inline-end: 1rem;
+                padding: 0.8rem;
                 z-index: 90;
             }
         }
@@ -125,17 +125,15 @@
 
         &__button-group {
             @include flex-center;
-            width: 20rem;
-            height: 7rem;
+            padding: 1.6rem 3.2rem;
             border-radius: 1rem;
             cursor: pointer;
             background-color: rgba(0, 0, 0, 0.5);
             &--play {
                 filter: invert(1);
             }
             @include mobile-or-tablet-screen {
-                height: 6rem;
-                width: 8rem;
+                padding: 0.8rem 1.6rem;
             }
         }
         &--disabled {