From 48f3991d1d7547e00a687212f4587e2bead3e1b8 Mon Sep 17 00:00:00 2001
From: Suthesan <suthesan@Suthesans-MacBook-Pro.local>
Date: Mon, 21 Feb 2022 16:59:20 +0800
Subject: [PATCH 1/2] use new show component

---
 .../layout/footer/bottom-social-wrapper.js    | 14 ++++----
 src/components/layout/footer/disclaimer.js    | 34 +++++++++----------
 src/components/layout/footer/logo.js          | 10 +++---
 src/components/layout/footer/main-links.js    | 18 +++++-----
 4 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/layout/footer/bottom-social-wrapper.js b/src/components/layout/footer/bottom-social-wrapper.js
index 6dca6c8aafb..e960d65885b 100644
--- a/src/components/layout/footer/bottom-social-wrapper.js
+++ b/src/components/layout/footer/bottom-social-wrapper.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import SocialWrapperComponent from './social-wrapper'
 import { useWebsiteStatus } from 'components/hooks/use-website-status'
-import { Show } from 'components/containers'
+import { Mobile, EU, NonEU } from 'components/containers'
 import { isUKOrMXAccount } from 'common/utility'
 import {
     fb_non_eu_url,
@@ -22,17 +22,17 @@ const BottomSocialSection = ({ type }) => {
 
     return (
         <>
-            <Show.NonEU>
+            <NonEU>
                 <SocialWrapperComponent
                     is_career_page={type === 'careers'}
                     fb_url={fb_non_eu_url}
                     instagram_url={instagram_non_eu_url}
                     twitter_url={twitter_non_eu_url}
                 />
-            </Show.NonEU>
+            </NonEU>
 
-            <Show.Eu>
-                <Show.Mobile>
+            <EU>
+                <Mobile>
                     <SocialWrapperComponent
                         is_career_page={type === 'careers'}
                         fb_url={isUKOrMXAccount(current_client_country) ? fb_uk_url : fb_eu_url}
@@ -47,8 +47,8 @@ const BottomSocialSection = ({ type }) => {
                                 : twitter_eu_url
                         }
                     />
-                </Show.Mobile>
-            </Show.Eu>
+                </Mobile>
+            </EU>
         </>
     )
 }
diff --git a/src/components/layout/footer/disclaimer.js b/src/components/layout/footer/disclaimer.js
index e35e46eda5a..b032cbaecb6 100644
--- a/src/components/layout/footer/disclaimer.js
+++ b/src/components/layout/footer/disclaimer.js
@@ -7,7 +7,7 @@ import {
     RiskWarning,
     BoldLink,
 } from './common/style'
-import { Show } from 'components/containers'
+import { Mobile, Desktop, EU, NonEU } from 'components/containers'
 import { Localize, localize } from 'components/localization'
 import { loss_percent } from 'common/constants'
 
@@ -15,7 +15,7 @@ const DisclaimerSection = ({ is_academy }) => {
     return (
         <>
             <DisclaimerWrapper>
-                <Show.NonEU>
+                <NonEU>
                     <DisclaimerParagraph>
                         <Localize
                             translate_text="In the EU, financial products are offered by Deriv Investments (Europe) Limited, W Business Centre, Level 3, Triq Dun Karm, Birkirkara BKR 9033, Malta, licensed as a Category 3 Investment Services provider by the Malta Financial Services Authority (<0>licence no. IS/70156</0>)."
@@ -54,8 +54,8 @@ const DisclaimerSection = ({ is_academy }) => {
                             ]}
                         />
                     </DisclaimerParagraph>
-                </Show.NonEU>
-                <Show.Eu>
+                </NonEU>
+                <EU>
                     <DisclaimerParagraph>
                         <Localize
                             translate_text="Deriv Investments (Europe) Limited, W Business Centre, Level 3, Triq Dun Karm, Birkirkara BKR 9033, Malta, is licensed in Malta (<0>licence no. IS/70156</0>) and regulated by the Malta Financial Services Authority under the Investments Services Act to provide investment services in the European Union. It is also authorised and subject to limited regulation by the Financial Conduct Authority in the UK. Details about the extent of our authorisation and regulation by the Financial Conduct Authority are available from us on request."
@@ -69,7 +69,7 @@ const DisclaimerSection = ({ is_academy }) => {
                             ]}
                         />
                     </DisclaimerParagraph>
-                </Show.Eu>
+                </EU>
                 <DisclaimerParagraph>
                     {localize(
                         'Deriv Limited - 13 Castle Street, St. Helier, JE2 3BT, Jersey - is the holding company for the above subsidiaries.',
@@ -88,8 +88,8 @@ const DisclaimerSection = ({ is_academy }) => {
                     </DisclaimerParagraph>
                 )}
                 <RiskWarning>
-                    <Show.Desktop>
-                        <Show.NonEU>
+                    <Desktop>
+                        <NonEU>
                             <DisclaimerParagraph no_margin>
                                 <Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
                             </DisclaimerParagraph>
@@ -101,8 +101,8 @@ const DisclaimerSection = ({ is_academy }) => {
                                     ]}
                                 />
                             </DisclaimerParagraph>
-                        </Show.NonEU>
-                        <Show.Eu>
+                        </NonEU>
+                        <EU>
                             <DisclaimerParagraph no_margin>
                                 <Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients." />
                             </DisclaimerParagraph>
@@ -115,10 +115,10 @@ const DisclaimerSection = ({ is_academy }) => {
                             <DisclaimerParagraph>
                                 <Localize translate_text="The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
                             </DisclaimerParagraph>
-                        </Show.Eu>
-                    </Show.Desktop>
-                    <Show.Mobile>
-                        <Show.Eu>
+                        </EU>
+                    </Desktop>
+                    <Mobile>
+                        <EU>
                             <DisclaimerParagraph no_margin>
                                 <Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients." />
                             </DisclaimerParagraph>
@@ -131,8 +131,8 @@ const DisclaimerSection = ({ is_academy }) => {
                             <DisclaimerParagraph>
                                 <Localize translate_text="The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
                             </DisclaimerParagraph>
-                        </Show.Eu>
-                        <Show.NonEU>
+                        </EU>
+                        <NonEU>
                             <DisclaimerParagraph no_margin>
                                 <Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
                             </DisclaimerParagraph>
@@ -144,8 +144,8 @@ const DisclaimerSection = ({ is_academy }) => {
                                     ]}
                                 />
                             </DisclaimerParagraph>
-                        </Show.NonEU>
-                    </Show.Mobile>
+                        </NonEU>
+                    </Mobile>
                 </RiskWarning>
             </DisclaimerWrapper>
         </>
diff --git a/src/components/layout/footer/logo.js b/src/components/layout/footer/logo.js
index 20bb98766b8..890b3e006e8 100644
--- a/src/components/layout/footer/logo.js
+++ b/src/components/layout/footer/logo.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import SocialWrapperComponent from './social-wrapper'
 import { DerivLogoWrapper, StyledLogo } from './common/style.js'
-import { Show } from 'components/containers'
+import { Desktop, EU } from 'components/containers'
 import { useWebsiteStatus } from 'components/hooks/use-website-status'
 import DerivLogo from 'images/svg/layout/deriv-footer.svg'
 import { isUKOrMXAccount } from 'common/utility'
@@ -22,8 +22,8 @@ const LogoSection = ({ type }) => {
     return (
         <DerivLogoWrapper>
             <StyledLogo src={DerivLogo} alt="logo" width="147" height="25" />
-            <Show.Eu>
-                <Show.Desktop>
+            <EU>
+                <Desktop>
                     <SocialWrapperComponent
                         is_career_page={type === 'careers'}
                         fb_url={isUKOrMXAccount(current_client_country) ? fb_uk_url : fb_eu_url}
@@ -38,8 +38,8 @@ const LogoSection = ({ type }) => {
                                 : twitter_eu_url
                         }
                     />
-                </Show.Desktop>
-            </Show.Eu>
+                </Desktop>
+            </EU>
         </DerivLogoWrapper>
     )
 }
diff --git a/src/components/layout/footer/main-links.js b/src/components/layout/footer/main-links.js
index c15da6aaac9..88ccfad991b 100644
--- a/src/components/layout/footer/main-links.js
+++ b/src/components/layout/footer/main-links.js
@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { LinksWrapper, LinkWrapper, LinksCol, Title, Link } from './common/style.js'
 import { localize } from 'components/localization'
-import { Flex, Show } from 'components/containers'
+import { Flex, Desktop, NonEU } from 'components/containers'
 import { deriv_status_page_url, binary_bot_url } from 'common/constants'
 
 const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
     return (
         <LinksWrapper>
-            <Show.Desktop>
+            <Desktop>
                 <Flex jc="space-between">
                     <LinksCol>
                         <LinkWrapper>
@@ -37,20 +37,20 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper first_child="true">
                             <Link to="/dtrader/">{localize('DTrader')}</Link>
                         </LinkWrapper>
-                        <Show.NonEU>
+                        <NonEU>
                             <LinkWrapper>
                                 <Link to="/landing/deriv-go/">{localize('Deriv GO')}</Link>
                             </LinkWrapper>
                             <LinkWrapper>
                                 <Link to="/dbot/">{localize('DBot')}</Link>
                             </LinkWrapper>
-                        </Show.NonEU>
+                        </NonEU>
                         <LinkWrapper>
                             <Link to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}>
                                 {localize('DMT5')}
                             </Link>
                         </LinkWrapper>
-                        <Show.NonEU>
+                        <NonEU>
                             <LinkWrapper>
                                 <Link to="/derivx/">{localize('Deriv X')}</Link>
                             </LinkWrapper>
@@ -75,7 +75,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                                     {localize('Binary Bot')}
                                 </Link>
                             </LinkWrapper>
-                        </Show.NonEU>
+                        </NonEU>
                     </LinksCol>
                     {!is_ppc && (
                         <LinksCol>
@@ -85,11 +85,11 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                             <LinkWrapper first_child="true">
                                 <Link to="/trade-types/cfds/">{localize('CFDs')}</Link>
                             </LinkWrapper>
-                            <Show.NonEU>
+                            <NonEU>
                                 <LinkWrapper>
                                     <Link to="/trade-types/options/">{localize('Options')}</Link>
                                 </LinkWrapper>
-                            </Show.NonEU>
+                            </NonEU>
                             <LinkWrapper>
                                 <Link to="/trade-types/multiplier/">{localize('Multipliers')}</Link>
                             </LinkWrapper>
@@ -202,7 +202,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         </LinkWrapper>
                     </LinksCol>
                 </Flex>
-            </Show.Desktop>
+            </Desktop>
         </LinksWrapper>
     )
 }

From a929b50dc591077636d460cc5d9ed289c2bc8b25 Mon Sep 17 00:00:00 2001
From: Suthesan <suthesan@Suthesans-MacBook-Pro.local>
Date: Tue, 22 Feb 2022 15:28:37 +0800
Subject: [PATCH 2/2] remove unused codes

---
 src/components/layout/footer.js              | 12 ------------
 src/components/layout/footer/common/style.js | 15 +++++----------
 src/components/layout/footer/main-links.js   | 14 +++++++-------
 3 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index b4117def936..c108641c346 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -10,21 +10,9 @@ import BottomSocialSection from './footer/bottom-social-wrapper'
 import { DerivStore } from 'store'
 // TODO: (discussion) make footer pure component, and move usage of footer to custom
 
-const mobile_accordion_header = {
-    borderTop: '1px solid var(--color-grey-26)',
-    borderBottom: 'none',
-    padding: '0',
-    margin: '0 2rem',
-    backgroundColor: 'var(--color-grey-25)',
-    boxShadow: 'none',
-}
-
-const mobile_accordion_header_about = Object.assign({}, mobile_accordion_header)
-
 const Footer = ({ type, is_ppc, is_ppc_redirect, academy }) => {
     const { show_cookie_banner } = React.useContext(LocationContext)
     const { is_eu_country } = React.useContext(DerivStore)
-    mobile_accordion_header_about.borderTop = 'none'
 
     return (
         <DefaultFooter has_banner_cookie={show_cookie_banner} is_eu_country={is_eu_country}>
diff --git a/src/components/layout/footer/common/style.js b/src/components/layout/footer/common/style.js
index b8d0e5e3f74..485798d8d37 100644
--- a/src/components/layout/footer/common/style.js
+++ b/src/components/layout/footer/common/style.js
@@ -114,7 +114,7 @@ export const AcademyWrapper = styled.div`
 `
 
 export const LinkWrapper = styled.div`
-    margin-top: ${(props) => (props.first_child == 'true' ? '0.8rem' : '1.6rem')};
+    margin-top: 1.6rem;
 
     @media ${device.laptopM} {
         ${Title} {
@@ -124,6 +124,10 @@ export const LinkWrapper = styled.div`
             font-size: var(--text-size-xs);
         }
     }
+
+    :nth-child(2) {
+        margin-top: 0.8rem;
+    }
 `
 export const DisclaimerWrapper = styled.div`
     grid-area: disclaimer;
@@ -240,12 +244,3 @@ export const StyledMgaLogo = styled.img`
 export const StyledLogo = styled.img`
     width: 18.2rem;
 `
-
-export const mobile_accordion_header = {
-    borderTop: '1px solid var(--color-grey-26)',
-    borderBottom: 'none',
-    padding: '0',
-    margin: '0 2rem',
-    backgroundColor: 'var(--color-grey-25)',
-    boxShadow: 'none',
-}
diff --git a/src/components/layout/footer/main-links.js b/src/components/layout/footer/main-links.js
index 88ccfad991b..5631c603514 100644
--- a/src/components/layout/footer/main-links.js
+++ b/src/components/layout/footer/main-links.js
@@ -14,7 +14,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/who-we-are/">{localize('Who we are')}</Link>
                         </LinkWrapper>
                         <LinkWrapper>
@@ -34,7 +34,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/dtrader/">{localize('DTrader')}</Link>
                         </LinkWrapper>
                         <NonEU>
@@ -82,7 +82,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                             <LinkWrapper>
                                 <title>Codestin Search App</title>
                             </LinkWrapper>
-                            <LinkWrapper first_child="true">
+                            <LinkWrapper>
                                 <Link to="/trade-types/cfds/">{localize('CFDs')}</Link>
                             </LinkWrapper>
                             <NonEU>
@@ -99,7 +99,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/markets/forex/">{localize('Forex')}</Link>
                         </LinkWrapper>
                         {!is_ppc && (
@@ -125,7 +125,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/regulatory/">{localize('Regulatory information')}</Link>
                         </LinkWrapper>
                         <LinkWrapper>
@@ -143,7 +143,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/partners/affiliate-ib/">
                                 {localize('Affiliates and IBs')}
                             </Link>
@@ -167,7 +167,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
                         <LinkWrapper>
                             <title>Codestin Search App</title>
                         </LinkWrapper>
-                        <LinkWrapper first_child="true">
+                        <LinkWrapper>
                             <Link to="/help-centre/">{localize('Help centre')}</Link>
                         </LinkWrapper>
                         <LinkWrapper>