From 159c0344c62b7478f6f9f779a7e36c468d2c6e4f Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Mon, 24 Jan 2022 12:44:24 +0800
Subject: [PATCH 1/5] academy - fixed tab for mobile

---
 .../components/recent-featured-posts/_style.js    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/pages/academy/components/recent-featured-posts/_style.js b/src/pages/academy/components/recent-featured-posts/_style.js
index 6296aad0563..ee2cf16f683 100644
--- a/src/pages/academy/components/recent-featured-posts/_style.js
+++ b/src/pages/academy/components/recent-featured-posts/_style.js
@@ -16,6 +16,10 @@ export const StyledContainer = styled(Flex)`
     @media ${device.laptopM} {
         max-width: 58.8rem;
     }
+
+    @media ${device.mobileL} {
+        width: 100%;
+    }
 `
 
 export const StyledTabs = styled(Tabs)`
@@ -26,10 +30,16 @@ export const ArticleContentWrapper = styled(Container)`
     margin-top: 24px;
     color: var(--color-white);
     width: 100%;
+
     @media ${device.laptopM} {
         flex-direction: column;
         width: 100%;
     }
+
+    @media ${device.mobileL} {
+        margin: 24px auto 0;
+        padding: 0 16px 0 18px;
+    }
 `
 
 export const LeftContent = styled(Flex)`
@@ -291,6 +301,11 @@ export const AllArticleButton = styled(LinkButton)`
     @media ${device.laptopM} {
         width: 100%;
     }
+
+    @media ${device.mobileL} {
+        width: 90%;
+        margin-top: 24px;
+    }
 `
 
 export const RedirectLink = styled(LocalizedLink)`

From 098720c6cee9c23addb994c12bcf1c69c64c0e6e Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Mon, 24 Jan 2022 14:52:18 +0800
Subject: [PATCH 2/5] slice tags for featured post to 3 tags

---
 src/pages/academy/_recent-featured-posts.js | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js
index d69bcbc436e..9afd661f42a 100644
--- a/src/pages/academy/_recent-featured-posts.js
+++ b/src/pages/academy/_recent-featured-posts.js
@@ -66,7 +66,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                 <MainArticle image={getAssetUrl(headline_recent?.main_image?.id)}>
                                     <Description>
                                         <TagParentWrapper>
-                                            {headline_recent.tags.map((article) => {
+                                            {headline_recent.tags.slice(0, 3).map((article) => {
                                                 return (
                                                     <TagWrapper key={article?.id}>
                                                         <StyledCategories>
@@ -149,15 +149,17 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                     >
                                         <Description>
                                             <TagParentWrapper>
-                                                {headline_featured.tags.map((article) => {
-                                                    return (
-                                                        <TagWrapper key={article.id}>
-                                                            <StyledCategories>
-                                                                {article.tags_id?.tag_name}
-                                                            </StyledCategories>
-                                                        </TagWrapper>
-                                                    )
-                                                })}
+                                                {headline_featured.tags
+                                                    .slice(0, 3)
+                                                    .map((article) => {
+                                                        return (
+                                                            <TagWrapper key={article.id}>
+                                                                <StyledCategories>
+                                                                    {article.tags_id?.tag_name}
+                                                                </StyledCategories>
+                                                            </TagWrapper>
+                                                        )
+                                                    })}
                                             </TagParentWrapper>
                                             <Header as="h3" type="heading-3" color="white" mb="5px">
                                                 {headline_featured.blog_title}

From 22185909585369ed4e38ce1e927dbf54bb01f7b5 Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Mon, 24 Jan 2022 17:12:30 +0800
Subject: [PATCH 3/5] changed font-size for mobile tab

---
 src/components/elements/default-tab.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/elements/default-tab.js b/src/components/elements/default-tab.js
index 2e9299c311f..5b3946ba73d 100644
--- a/src/components/elements/default-tab.js
+++ b/src/components/elements/default-tab.js
@@ -144,7 +144,15 @@ const Tabs = ({
                         onClick={() => setActiveTab(tab_list[index])}
                         mobile_tab_button_underline_length={mobile_tab_button_underline_length}
                     >
-                        <TextWrapper font_size={route_from === 'markets' ? '24px' : undefined}>
+                        <TextWrapper
+                            font_size={
+                                route_from === 'markets'
+                                    ? '24px'
+                                    : route_from === 'recent_featured_posts'
+                                    ? '18px'
+                                    : undefined
+                            }
+                        >
                             {label}
                         </TextWrapper>
                     </TabButton>

From 1e0fff11b05131322115a12b23ef930c464566e5 Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Wed, 26 Jan 2022 09:46:05 +0800
Subject: [PATCH 4/5] remove font size hack

---
 src/components/elements/default-tab.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/elements/default-tab.js b/src/components/elements/default-tab.js
index 5b3946ba73d..2e9299c311f 100644
--- a/src/components/elements/default-tab.js
+++ b/src/components/elements/default-tab.js
@@ -144,15 +144,7 @@ const Tabs = ({
                         onClick={() => setActiveTab(tab_list[index])}
                         mobile_tab_button_underline_length={mobile_tab_button_underline_length}
                     >
-                        <TextWrapper
-                            font_size={
-                                route_from === 'markets'
-                                    ? '24px'
-                                    : route_from === 'recent_featured_posts'
-                                    ? '18px'
-                                    : undefined
-                            }
-                        >
+                        <TextWrapper font_size={route_from === 'markets' ? '24px' : undefined}>
                             {label}
                         </TextWrapper>
                     </TabButton>

From 9d2d4158b13daad026e0b323c2ca7f0ae3df7969 Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Wed, 26 Jan 2022 11:54:53 +0800
Subject: [PATCH 5/5] change tab text from posts to articles

---
 src/pages/academy/_recent-featured-posts.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js
index 9afd661f42a..5f72b7f9798 100644
--- a/src/pages/academy/_recent-featured-posts.js
+++ b/src/pages/academy/_recent-featured-posts.js
@@ -59,7 +59,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                 mobile_tab_button_underline_length="100%"
                 has_no_query
             >
-                <Tabs.Panel label={localize('Recent posts')}>
+                <Tabs.Panel label={localize('Recent articles')}>
                     <ArticleContentWrapper>
                         <LeftContent>
                             <RedirectLink to={`/academy/blog/posts/${headline_recent.slug}/`}>
@@ -140,7 +140,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                     </ArticleContentWrapper>
                 </Tabs.Panel>
                 {featured_data && (
-                    <Tabs.Panel label={localize('Featured posts')}>
+                    <Tabs.Panel label={localize('Featured articles')}>
                         <ArticleContentWrapper>
                             <LeftContent>
                                 <RedirectLink to={`/academy/blog/posts/${headline_featured.slug}/`}>