From 8fe51d34c0141928541eaaa540a6319eeff81054 Mon Sep 17 00:00:00 2001
From: Farabi <102643568+farabi-deriv@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:31:12 +0800
Subject: [PATCH] fix: run button color on run and stop status (#16106)

---
 .../trade-animation/trade-animation.scss      | 19 ++++++++++++++++++-
 .../trade-animation/trade-animation.tsx       | 16 +++++++++++++---
 .../src/pages/tutorials/tutorials.scss        |  8 +++-----
 3 files changed, 34 insertions(+), 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
index 1a29a4b7290d..79cb5fd11a30 100644
--- 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
index 5599598357a0..615dd1393319 100644
--- 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
index 05fd44b9105e..bb65e10ef9a1 100644
--- 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,8 +125,7 @@
 
         &__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);
@@ -134,8 +133,7 @@
                 filter: invert(1);
             }
             @include mobile-or-tablet-screen {
-                height: 6rem;
-                width: 8rem;
+                padding: 0.8rem 1.6rem;
             }
         }
         &--disabled {