From 362d79ce2b212aa60cd89d3bce355c55c3047f53 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Tue, 29 Jun 2021 09:25:36 +0300
Subject: [PATCH 1/4] nikolai.berestevich/fix/trading-signals hightlight 28666

---
 src/pages/dmt5-trading-signals/index.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/pages/dmt5-trading-signals/index.js b/src/pages/dmt5-trading-signals/index.js
index 4c62b79ba75..8af2e549b6d 100644
--- a/src/pages/dmt5-trading-signals/index.js
+++ b/src/pages/dmt5-trading-signals/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Hero, SmallContainer } from './_style'
 import HowTo from './_how-to'
@@ -11,7 +11,6 @@ import { localize, Localize, WithIntl } from 'components/localization'
 import { Header } from 'components/elements'
 import { useTabState } from 'components/hooks/use-tab-state'
 import device from 'themes/device'
-
 const signal_content_subscriber = {
     header: (
         <Localize
@@ -73,10 +72,10 @@ const Item = styled.div`
         font-size: 2.4rem;
         width: max-content;
         text-align: center;
+        font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
     h4 {
         color: var(--color-black-3);
-        font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
     @media ${device.tabletL} {
         padding: 12px 8px 12px 7px;
@@ -102,6 +101,10 @@ const Separator = styled.div`
 
 const DMT5TradingSignals = () => {
     const [active_tab, setActiveTab] = useTabState(['signal-subscriber', 'signal-provider'])
+    const [not_first_loading, setNotFirstLoading] = useState(false) //needs to fix bug with hightlight of the 1st loading
+    useEffect(() => {
+        setNotFirstLoading(true)
+    }, [])
 
     return (
         <Layout>
@@ -114,20 +117,20 @@ const DMT5TradingSignals = () => {
                 </SmallContainer>
             </Hero>
             <TabsContainer>
-                <Item
+                {not_first_loading && <Item
                     onClick={() => setActiveTab('signal-subscriber')}
                     active_tab={active_tab}
                     name="signal-subscriber"
                 >
                     <Header as="h4">{localize('Signal subscriber')}</Header>
-                </Item>
-                <Item
+                </Item>}
+                {not_first_loading && <Item
                     onClick={() => setActiveTab('signal-provider')}
                     active_tab={active_tab}
                     name="signal-provider"
                 >
                     <Header as="h4">{localize('Signal provider')}</Header>
-                </Item>
+                </Item>}
             </TabsContainer>
             <Box position="relative">
                 <Separator />

From 69c83d075b77e62ceb62cd016f42a378607197c3 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Tue, 29 Jun 2021 09:28:46 +0300
Subject: [PATCH 2/4] nikolai.berestevich/fix/trading-signals hightlight 28666

---
 src/pages/dmt5-trading-signals/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/dmt5-trading-signals/index.js b/src/pages/dmt5-trading-signals/index.js
index 8af2e549b6d..cce7a68f2e2 100644
--- a/src/pages/dmt5-trading-signals/index.js
+++ b/src/pages/dmt5-trading-signals/index.js
@@ -11,6 +11,7 @@ import { localize, Localize, WithIntl } from 'components/localization'
 import { Header } from 'components/elements'
 import { useTabState } from 'components/hooks/use-tab-state'
 import device from 'themes/device'
+
 const signal_content_subscriber = {
     header: (
         <Localize
@@ -71,11 +72,11 @@ const Item = styled.div`
     ${Header} {
         font-size: 2.4rem;
         width: max-content;
-        text-align: center;
-        font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
+        text-align: center;   
     }
     h4 {
         color: var(--color-black-3);
+        font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
     @media ${device.tabletL} {
         padding: 12px 8px 12px 7px;

From 5d830055baedef76276888249db86c4edb21df17 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Tue, 29 Jun 2021 09:31:27 +0300
Subject: [PATCH 3/4] nikolai.berestevich/fix/trading-signals hightlight 28666

---
 src/pages/dmt5-trading-signals/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dmt5-trading-signals/index.js b/src/pages/dmt5-trading-signals/index.js
index cce7a68f2e2..2ef76bf8a33 100644
--- a/src/pages/dmt5-trading-signals/index.js
+++ b/src/pages/dmt5-trading-signals/index.js
@@ -72,7 +72,7 @@ const Item = styled.div`
     ${Header} {
         font-size: 2.4rem;
         width: max-content;
-        text-align: center;   
+        text-align: center;
     }
     h4 {
         color: var(--color-black-3);

From 7f85669bfd4ffd2ed8e9ac0305ae722e11712e5c Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Wed, 30 Jun 2021 11:52:51 +0300
Subject: [PATCH 4/4] nikolai.berestevich/fix/ fix wrong highlight during 1st
 loading

---
 src/pages/dmt5-trading-signals/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/dmt5-trading-signals/index.js b/src/pages/dmt5-trading-signals/index.js
index 2ef76bf8a33..efa740500d0 100644
--- a/src/pages/dmt5-trading-signals/index.js
+++ b/src/pages/dmt5-trading-signals/index.js
@@ -102,11 +102,11 @@ const Separator = styled.div`
 
 const DMT5TradingSignals = () => {
     const [active_tab, setActiveTab] = useTabState(['signal-subscriber', 'signal-provider'])
-    const [not_first_loading, setNotFirstLoading] = useState(false) //needs to fix bug with hightlight of the 1st loading
+    const [is_mounted, setMounted] = useState(false) //needs to fix bug with hightlight of the 1st loading
     useEffect(() => {
-        setNotFirstLoading(true)
+        setMounted(true)
     }, [])
-
+  
     return (
         <Layout>
             <SEO description={localize('Subscribe to Deriv MetaTrader 5 trading signals to copy the trades of experienced traders, or become a signal provider and share your strategies.')} title={localize('Deriv MetaTrader 5 trading signals | Resources | Deriv')} />
@@ -118,14 +118,14 @@ const DMT5TradingSignals = () => {
                 </SmallContainer>
             </Hero>
             <TabsContainer>
-                {not_first_loading && <Item
+                {is_mounted && <Item
                     onClick={() => setActiveTab('signal-subscriber')}
                     active_tab={active_tab}
                     name="signal-subscriber"
                 >
                     <Header as="h4">{localize('Signal subscriber')}</Header>
                 </Item>}
-                {not_first_loading && <Item
+                {is_mounted && <Item
                     onClick={() => setActiveTab('signal-provider')}
                     active_tab={active_tab}
                     name="signal-provider"