From 480f59d7013181cb9842ff4c10edc03a9cc26cf7 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Wed, 4 Nov 2020 14:20:06 +0800
Subject: [PATCH 1/2] fix: added KID notice

---
 src/components/elements/accordion.js          | 21 ++++--
 src/pages/regulatory/_document_accordion.js   |  2 +-
 .../_trading-responsibly.js                   | 70 +++++++++++--------
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/components/elements/accordion.js b/src/components/elements/accordion.js
index bea42e7e3ae..2322d0eac7a 100644
--- a/src/components/elements/accordion.js
+++ b/src/components/elements/accordion.js
@@ -64,11 +64,11 @@ const AccordionWrapper = styled.div`
 const TRANSITION_DURATION = 250
 
 // TODO: keyboard events and find a way to add proper focus handling
-const Accordion = ({ children, has_single_state, is_default_open }) => {
+const Accordion = ({ children, has_single_state, id, is_default_open }) => {
     const nodes = []
 
     return has_single_state ? (
-        <SingleAccordionContent is_default_open={is_default_open} nodes={nodes}>
+        <SingleAccordionContent id={id} is_default_open={is_default_open} nodes={nodes}>
             {children}
         </SingleAccordionContent>
     ) : (
@@ -78,11 +78,12 @@ const Accordion = ({ children, has_single_state, is_default_open }) => {
 Accordion.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     has_single_state: PropTypes.bool,
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.array,
 }
 
-const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
+const ItemExpanded = ({ is_default_open, child, child_idx, nodes, id }) => {
     const getHeight = (active_idx) => {
         return (
             nodes[active_idx] &&
@@ -94,7 +95,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
         // set height to auto to allow content that can resize inside the accordion
         // reset height to content height before collapse for transition (height: auto does not support transitions)
         if (is_expanded) setTimeout(() => setHeight('auto'), 200)
-        else setTimeout(() => setHeight(0), 50)
+        else setHeight(0)
     })
 
     React.useEffect(() => {
@@ -109,6 +110,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
                 <ResponsiveWrapper
                     key={child_idx}
                     style={child.props.parent_style}
+                    id={id}
                     ref={(div) => {
                         nodes[child_idx] = { ref: div }
                     }}
@@ -155,11 +157,12 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
 ItemExpanded.propTypes = {
     child: PropTypes.any,
     child_idx: PropTypes.any,
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.any,
 }
 
-const SingleAccordionContent = ({ is_default_open = false, nodes, children }) => {
+const SingleAccordionContent = ({ is_default_open = false, nodes, children, id }) => {
     const render_nodes = React.Children.map(children, (child, child_idx) => {
         return (
             <ItemExpanded
@@ -168,6 +171,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>
                 child={child}
                 child_idx={child_idx}
                 nodes={nodes}
+                id={id}
             />
         )
     })
@@ -177,6 +181,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>
 
 SingleAccordionContent.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.array,
 }
@@ -255,12 +260,13 @@ const AccordionContent = ({ children, nodes }) => {
 AccordionContent.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     has_single_state: PropTypes.bool,
+    id: PropTypes.string,
     nodes: PropTypes.array,
 }
 
-const AccordionItem = ({ text, children, style }) => {
+const AccordionItem = ({ id, text, children, style }) => {
     return (
-        <div style={style} header={text}>
+        <div style={style} header={text} id={id}>
             {children}
         </div>
     )
@@ -268,6 +274,7 @@ const AccordionItem = ({ text, children, style }) => {
 
 AccordionItem.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    id: PropTypes.string,
     is_showed: PropTypes.bool,
     style: PropTypes.object,
     text: PropTypes.string,
diff --git a/src/pages/regulatory/_document_accordion.js b/src/pages/regulatory/_document_accordion.js
index 9b2832306b6..50272922c22 100644
--- a/src/pages/regulatory/_document_accordion.js
+++ b/src/pages/regulatory/_document_accordion.js
@@ -136,7 +136,7 @@ const DocumentAccordion = () => {
     }
 
     return (
-        <Accordion has_single_state>
+        <Accordion has_single_state id="kid">
             <AccordionItem
                 header={localize('Pillar III disclosures')}
                 content_style={content_style}
diff --git a/src/pages/responsible-trading/_trading-responsibly.js b/src/pages/responsible-trading/_trading-responsibly.js
index e9d01806cfe..fac294a42e7 100644
--- a/src/pages/responsible-trading/_trading-responsibly.js
+++ b/src/pages/responsible-trading/_trading-responsibly.js
@@ -4,15 +4,15 @@ import DontBorrow from 'images/svg/dont-borrow.svg'
 import FreeDemo from 'images/svg/free-demo.svg'
 import SetLimitLosses from 'images/svg/set-limit-chart.svg'
 import BadJudgement from 'images/svg/bad-judgement.svg'
-// import Info from 'images/svg/info.svg'
+import Info from 'images/svg/info.svg'
 import { SectionContainer, Flex, Show } from 'components/containers'
-import { Header, Text, Divider, CardStyle } from 'components/elements'
+import { Header, Text, Divider, CardStyle, LocalizedLinkText } from 'components/elements'
 import { localize, Localize } from 'components/localization'
 import device from 'themes/device'
 
-// const IcInfo = styled(Info)`
-//     margin-left: 1.5rem;
-// `
+const IcInfo = styled(Info)`
+    margin-left: 1.5rem;
+`
 
 const Card = styled(Flex)`
     ${CardStyle}
@@ -62,30 +62,34 @@ const ContentWrapper = styled(Flex)`
         flex-direction: column;
     }
 `
-// const StyledFlex = styled(Flex)`
-//     max-width: 58rem;
-//     max-height: 6.6rem;
-//     border-radius: 6rem;
-//     box-shadow: inset 0 -1px 0 0 #f2f3f4;
-//     background-color: var(--color-grey-25);
-//     margin-left: auto;
-//     margin-right: auto;
-//     margin-top: 4rem;
-//     flex-direction: row;
-//     justify-content: center;
-//     align-items: center;
+const StyledFlex = styled(Flex)`
+    max-width: 60.4rem;
+    max-height: 6.6rem;
+    border-radius: 6rem;
+    box-shadow: inset 0 -1px 0 0 #f2f3f4;
+    background-color: var(--color-grey-25);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4rem;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    @media ${device.tabletS} {
+        max-height: 10rem;
+        padding: 1rem 0.5rem 1rem 0;
+    }
 
-//     @media ${device.mobileM} {
-//         max-height: 8rem;
-//         border-radius: 2rem;
-//         margin-bottom: 1rem;
-//     }
+    @media ${device.mobileM} {
+        max-height: 12rem;
+        border-radius: 2rem;
+        margin-bottom: 1rem;
+    }
 
-//     @media ${device.mobileS} {
-//         max-height: 9rem;
-//         border-radius: 1rem;
-//     }
-// `
+    @media ${device.mobileS} {
+        border-radius: 1rem;
+    }
+`
 const StyledHeader = styled(Header)`
     @media ${device.tablet} {
         text-align: center;
@@ -141,20 +145,24 @@ const TradingResponsibly = () => {
                             </StyledText>
                         </FlexContent>
                     </ContentWrapper>
-                    {/* TOD0: Display this section once KIDs documents are ready */}
-                    {/* <Show.Eu>
+                    <Show.Eu>
                         <StyledFlex>
                             <IcInfo />
                             <Text size="1.4rem" ml="1.6rem" mr="1.5rem">
                                 <Localize
                                     translate_text="For more details on our products and the risks involved in online trading, read our <0>key information documents (KIDs)</0> on commodities, forex, and cryptocurrencies."
                                     components={[
-                                        <LocalizedLinkText key={0} to="/contact-us/" color="red" />,
+                                        <LocalizedLinkText
+                                            key={0}
+                                            to="/regulatory#kid"
+                                            color="red"
+                                            size={14}
+                                        />,
                                     ]}
                                 />
                             </Text>
                         </StyledFlex>
-                    </Show.Eu> */}
+                    </Show.Eu>
                 </Card>
             </Flex>
         </SectionContainer>

From 5d9d501f2aaba47bd6e1eee0f3099b109d774474 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 5 Nov 2020 10:41:48 +0800
Subject: [PATCH 2/2] fix: added padding

---
 src/pages/responsible-trading/_trading-responsibly.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/responsible-trading/_trading-responsibly.js b/src/pages/responsible-trading/_trading-responsibly.js
index fac294a42e7..ced7ed42201 100644
--- a/src/pages/responsible-trading/_trading-responsibly.js
+++ b/src/pages/responsible-trading/_trading-responsibly.js
@@ -71,19 +71,21 @@ const StyledFlex = styled(Flex)`
     margin-left: auto;
     margin-right: auto;
     margin-top: 4rem;
+    padding: 1.2rem 0;
     flex-direction: row;
     justify-content: center;
     align-items: center;
 
     @media ${device.tabletS} {
         max-height: 10rem;
-        padding: 1rem 0.5rem 1rem 0;
+        padding: 1.2rem 0.6rem 1.2rem 0;
     }
 
     @media ${device.mobileM} {
         max-height: 12rem;
         border-radius: 2rem;
         margin-bottom: 1rem;
+        padding: 2rem 0.6rem 2.5rem 0;
     }
 
     @media ${device.mobileS} {