From 6d578f6eeca0a1d651abc8be5e09bab046ba97a8 Mon Sep 17 00:00:00 2001
From: Sergei Baranovski <sergei@deriv.com>
Date: Thu, 25 May 2023 14:21:42 +0300
Subject: [PATCH 1/2] feat: change logo when user tries to signup

---
 .../modules/onboarding/empty-onboarding.tsx    | 18 ++++++++++++++----
 .../src/modules/onboarding/onboarding.scss     |  5 ++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/appstore/src/modules/onboarding/empty-onboarding.tsx b/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
index 5e3974c5f8a1..042c38549b27 100644
--- a/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
+++ b/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
 import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
+import { observer, useStore } from '@deriv/stores';
+import classNames from 'classnames';
+
+const EmptyOnboarding = observer(() => {
+    const {
+        ui: { is_mobile },
+    } = useStore();
 
-const EmptyOnboarding = () => {
     return (
         <div className='empty-onboarding__wrapper'>
-            <div className='empty-onboarding__header'>
-                <TradigPlatformIconProps icon='DerivTradingLogo' />
+            <div
+                className={classNames('empty-onboarding__header', {
+                    'empty-onboarding__header--mobile': is_mobile,
+                })}
+            >
+                <TradigPlatformIconProps icon='DerivLogo' />
             </div>
         </div>
     );
-};
+});
 
 export default EmptyOnboarding;
diff --git a/packages/appstore/src/modules/onboarding/onboarding.scss b/packages/appstore/src/modules/onboarding/onboarding.scss
index fef34a0c077c..89fb151f966b 100644
--- a/packages/appstore/src/modules/onboarding/onboarding.scss
+++ b/packages/appstore/src/modules/onboarding/onboarding.scss
@@ -109,9 +109,12 @@
     &__header {
         width: 100%;
         height: 7.2rem;
-        background-color: $color-black;
         display: flex;
         justify-content: center;
         align-items: center;
+
+        &--mobile {
+            height: auto;
+        }
     }
 }

From 489dec51261d3e15700e28a6e85df69732c00dd6 Mon Sep 17 00:00:00 2001
From: Sergei Baranovski <sergei@deriv.com>
Date: Thu, 25 May 2023 23:40:15 +0300
Subject: [PATCH 2/2] refactor: delete --mobile class, useStore and observer

---
 .../src/modules/onboarding/empty-onboarding.tsx  | 16 +++-------------
 .../src/modules/onboarding/onboarding.scss       |  2 +-
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/appstore/src/modules/onboarding/empty-onboarding.tsx b/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
index 042c38549b27..3f6ab5bcabc4 100644
--- a/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
+++ b/packages/appstore/src/modules/onboarding/empty-onboarding.tsx
@@ -1,24 +1,14 @@
 import React from 'react';
 import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
-import { observer, useStore } from '@deriv/stores';
-import classNames from 'classnames';
-
-const EmptyOnboarding = observer(() => {
-    const {
-        ui: { is_mobile },
-    } = useStore();
 
+const EmptyOnboarding = () => {
     return (
         <div className='empty-onboarding__wrapper'>
-            <div
-                className={classNames('empty-onboarding__header', {
-                    'empty-onboarding__header--mobile': is_mobile,
-                })}
-            >
+            <div className='empty-onboarding__header'>
                 <TradigPlatformIconProps icon='DerivLogo' />
             </div>
         </div>
     );
-});
+};
 
 export default EmptyOnboarding;
diff --git a/packages/appstore/src/modules/onboarding/onboarding.scss b/packages/appstore/src/modules/onboarding/onboarding.scss
index 89fb151f966b..c186299f486d 100644
--- a/packages/appstore/src/modules/onboarding/onboarding.scss
+++ b/packages/appstore/src/modules/onboarding/onboarding.scss
@@ -113,7 +113,7 @@
         justify-content: center;
         align-items: center;
 
-        &--mobile {
+        @include mobile {
             height: auto;
         }
     }