From 3680fa8a331eec30d19fbfdc5c7a3685d69c637d Mon Sep 17 00:00:00 2001
From: kevin <kevin@regentmarkets.com>
Date: Mon, 6 Sep 2021 10:56:06 +0800
Subject: [PATCH 1/2] refactor main article image

---
 src/pages/academy/_recent-featured-posts.js | 24 ++++++---------------
 src/pages/academy/blog/_article-card.js     |  2 +-
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js
index dc581ead5bf..9afcfc78573 100644
--- a/src/pages/academy/_recent-featured-posts.js
+++ b/src/pages/academy/_recent-featured-posts.js
@@ -29,7 +29,7 @@ import {
     MobileDotIcon,
     MobileHeader,
 } from './components/recent-featured-posts/_style'
-import { convertDate, truncateString } from 'common/utility'
+import { convertDate, truncateString, getAssetUrl } from 'common/utility'
 import { Flex } from 'components/containers'
 import { QueryImage, Carousel, Tabs, Header } from 'components/elements'
 import { localize, WithIntl, Localize } from 'components/localization'
@@ -57,6 +57,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
     const featureds = featured_data.slice(1)
     const headline_featured = featured_data[0]
 
+    console.log(getAssetUrl(headline_featured.main_image.id))
+
     return (
         <StyledContainer m="20px auto 0" fd="column" ai="center">
             <StyledTabs
@@ -73,13 +75,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                     <ArticleContentWrapper>
                         <LeftContent>
                             <RedirectLink to={`/academy/blog/posts/${headline_recent.slug}`}>
-                                <MainArticle>
-                                    <QueryImage
-                                        className="main-article-bg"
-                                        data={headline_recent.main_image.imageFile}
-                                        alt={headline_recent.main_image.description || ''}
-                                        height="464px"
-                                    />
+                                <MainArticle image={getAssetUrl(headline_recent.main_image.id)}>
                                     <Description>
                                         <TagParentWrapper>
                                             {headline_recent.tags.map((article) => {
@@ -150,7 +146,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                                                         <SmallArticleCategories
                                                                             key={tag.id}
                                                                         >
-                                                                            {tag.tags_id.tag_name}
+                                                                            {tag.tags_id?.tag_name}
                                                                         </SmallArticleCategories>
                                                                     ))}
                                                         </Flex>
@@ -190,13 +186,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                     <ArticleContentWrapper>
                         <LeftContent>
                             <RedirectLink to={`/academy/blog/posts/${headline_featured.slug}`}>
-                                <MainArticle>
-                                    <QueryImage
-                                        className="main-article-bg"
-                                        data={headline_featured.main_image.imageFile}
-                                        alt={headline_featured.main_image.description || ''}
-                                        height="464px"
-                                    />
+                                <MainArticle image={getAssetUrl(headline_featured.main_image.id)}>
                                     <Description>
                                         <TagParentWrapper>
                                             {headline_featured.tags.map((article) => {
@@ -267,7 +257,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                                                         <SmallArticleCategories
                                                                             key={tag.id}
                                                                         >
-                                                                            {tag.tags_id.tag_name}
+                                                                            {tag.tags_id?.tag_name}
                                                                         </SmallArticleCategories>
                                                                     ))}
                                                         </Flex>
diff --git a/src/pages/academy/blog/_article-card.js b/src/pages/academy/blog/_article-card.js
index 989bb5cf544..def966ebeec 100644
--- a/src/pages/academy/blog/_article-card.js
+++ b/src/pages/academy/blog/_article-card.js
@@ -79,7 +79,7 @@ const ArticleCard = ({ item }) => {
                         {item.tags &&
                             item.tags.slice(0, 2).map((tag) => (
                                 <StyledCategories as="h4" type="paragraph-2" key={tag.id}>
-                                    {tag.tags_id.tag_name}
+                                    {tag.tags_id?.tag_name}
                                 </StyledCategories>
                             ))}
                         {item.tags.length > 2 && (

From d3ef5c71882bfc748feeaa307495bf21c4555943 Mon Sep 17 00:00:00 2001
From: kevin <kevin@regentmarkets.com>
Date: Mon, 6 Sep 2021 11:14:19 +0800
Subject: [PATCH 2/2]  fix small articles

---
 src/pages/academy/_recent-featured-posts.js               | 2 --
 src/pages/academy/blog/_first-article.js                  | 4 ++--
 .../academy/components/recent-featured-posts/_style.js    | 8 +-------
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js
index 34af25f4e48..6757a243f2a 100644
--- a/src/pages/academy/_recent-featured-posts.js
+++ b/src/pages/academy/_recent-featured-posts.js
@@ -57,8 +57,6 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
     const featureds = featured_data.slice(1)
     const headline_featured = featured_data[0]
 
-    console.log(getAssetUrl(headline_featured.main_image.id))
-
     return (
         <StyledContainer m="20px auto 0" fd="column" ai="center">
             <StyledTabs
diff --git a/src/pages/academy/blog/_first-article.js b/src/pages/academy/blog/_first-article.js
index a4205d5a8ee..a1a7109ba46 100644
--- a/src/pages/academy/blog/_first-article.js
+++ b/src/pages/academy/blog/_first-article.js
@@ -44,7 +44,7 @@ const ImageWrapper = styled.div`
         height: unset;
     }
 
-    > .main-article-bg {
+    > .first-article-image {
         display: contents;
     }
 `
@@ -78,7 +78,7 @@ const FirstArticle = ({ item }) => {
                         data={getImage(item.main_image.imageFile)}
                         alt={item.main_image.description || ''}
                         width="100%"
-                        className="main-article-bg"
+                        className="first-article-image"
                     />
                 </ImageWrapper>
                 <FirstContentWrapper fd="column" p="35px 40px" width="45%">
diff --git a/src/pages/academy/components/recent-featured-posts/_style.js b/src/pages/academy/components/recent-featured-posts/_style.js
index 02cc5dad634..dc8db25f6e1 100644
--- a/src/pages/academy/components/recent-featured-posts/_style.js
+++ b/src/pages/academy/components/recent-featured-posts/_style.js
@@ -76,14 +76,8 @@ export const MainArticle = styled(Flex)`
     }
 
     @media ${device.tablet} {
-        width: 88vw;
         min-width: 270px;
     }
-
-    > .main-article-bg {
-        display: contents;
-        opacity: 0.8;
-    }
 `
 
 export const Description = styled.div`
@@ -160,6 +154,7 @@ export const SmallArticle = styled(Flex)`
     @media ${device.laptopM} {
         height: 82px;
         margin-bottom: 16px;
+        min-width: unset;
     }
 `
 
@@ -234,7 +229,6 @@ export const SmallArticleRightContent = styled(Flex)`
     }
 
     @media (max-width: 425px) {
-        width: 185px;
         margin-left: 0;
     }
 `