MetaMask · davidnguyen88 · Sep 23, 2022 · Sep 23, 2022
diff --git a/src/components/Card/CardNews.js b/src/components/Card/CardNews.js
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import Image from '../Image'
 import classnames from 'classnames'
 import Link from '../Link'
-import CTAAngleIcon from './CTAAngleIcon'
 
 /**
  * @name Card
@@ -14,54 +13,35 @@ import CTAAngleIcon from './CTAAngleIcon'
 
 const StyledCard = props => {
   const {
-    description,
+    title,
     image,
-    imageDarkMode,
     link,
-    title,
-    newTab,
-    backgroundColor,
-    backgroundImage,
-    backgroundImageMobile,
-    imageMargin,
-    layoutSize,
-    linkText,
-    isDarkMode,
+    description,
   } = props
 
   return (
     <Card className="moduleCardWrapper">
       <CardInner
         to={link}
-        newTab={newTab}
-        backgroundColor={backgroundColor}
-        image={backgroundImage}
-        imageMobile={backgroundImageMobile}
-        layoutSize={layoutSize}
-        className={classnames('custom-card-bg cardLink', {
-          [`bg-${backgroundColor}`]: backgroundColor,
-        })}
+        className={classnames('custom-card-bg cardLink')}
       >
         {image ? (
-          <ImageWrapper imageMargin={imageMargin} layoutSize={layoutSize}>
-            <ImageSrc
-              image={isDarkMode && imageDarkMode ? imageDarkMode : image}
-            />
-          </ImageWrapper>
+          <ImageInner>
+            <ImageWrapper>
+              <ImageSrc
+                image={image}
+              />
+            </ImageWrapper>
+          </ImageInner>
         ) : null}
-        <Inner>
-          {title ? <Title layoutSize={layoutSize}>{title}</Title> : null}
+        <ContentInner>
+          {title ? <Title>{title}</Title> : null}
           {description ? (
             <Description>
               <div dangerouslySetInnerHTML={{ __html: description }}></div>
             </Description>
           ) : null}
-          {linkText ? (
-            <CTAWrapper>
-              <CTAAngleIcon text={linkText} />
-            </CTAWrapper>
-          ) : null}
-        </Inner>
+        </ContentInner>
       </CardInner>
     </Card>
   )
@@ -92,70 +72,45 @@ const CardInner = styled(Link)`
       margin-left: 6px;
     }
   }
-  ${({ image }) =>
-    image
-      ? ` background-image: url(${image});
-      background-size: cover;
-      padding: 24px;
-    `
-      : ''}
-  ${({ imageMobile, theme }) =>
-    imageMobile
-      ? ` 
-      @media (max-width: ${theme.device.tabletMediaMax}){
-        background-image: url(${imageMobile});
-        background-position: center;
-      }
-    `
-      : ''}
+`
+
+const ImageInner = styled.div`
+  height: 0;
+  padding: 0 0 56%;
+  position: relative;
 `
 
 const ImageWrapper = styled.div`
-  min-height: 176px;
-  margin-bottom: 24px;
-  padding: 10px 16px;
+  display: block;
   border-radius: 12px;
-  body.light-mode &{
+  height: 100%;
+  max-width: 100%;
+  padding: 10px 16px;
+  position: absolute;
+  width: 100%;
+
+  body.light-mode & {
     background: #F2F4F6;
   }
-  body.dark-mode &{
+
+  body.dark-mode & {
     background: #F2F4F615;
   }
-  img {
-    height: 100%;
-    width: auto;
-    border-radius: 12px;
-    @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
-      margin: 0 auto;
-    }
-  }
-
-  ${({ layoutSize }) =>
-    layoutSize === 'small'
-      ? `
-    height: 80px;
-  `
-      : null}
-
-  ${({ layoutSize, theme }) =>
-    `
-  @media (max-width: ${theme.device.mobileMediaMax}){
-    height: ${layoutSize === 'small' ? '80px' : '96px'};
-  }
-  `}
-    @media (max-width: ${({ theme }) => theme.device.miniDesktopMediaMax}) {
-      height: auto;
-    }
 `
 
 const ImageSrc = styled(Image)`
+  border-radius: 12px;
   display: block;
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
 `
 
-const Inner = styled.div`
+const ContentInner = styled.div`
   display: flex;
   flex-direction: column;
   border-radius: 12px;
+  margin-top: 24px;
   min-height: 0;
   flex: 1;
   width: 100%;
@@ -170,20 +125,6 @@ const Title = styled.div`
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-
-  ${({ layoutSize }) =>
-    layoutSize === 'small'
-      ? `
-      font-size: 18px;
-  `
-      : null}
-
-  ${({ layoutSize, theme }) =>
-    `
-  @media (max-width: ${theme.device.mobileMediaMax}){
-    font-size: ${layoutSize === 'small' ? '16px' : '20px'};
-  }
-  `}
 `
 
 const Description = styled.div`
@@ -205,10 +146,4 @@ const Description = styled.div`
     color: #535a61;
   }
 `
-const CTAWrapper = styled.div`
-  display: block;
-  margin-top: auto;
-  &:hover {
-    opacity: 0.9;
-  }
-`
+
diff --git a/src/components/ContentWrapper.js b/src/components/ContentWrapper.js
@@ -59,8 +59,9 @@ const ContainerInner = styled.div`
 
   @media (max-width: ${({ theme }) => theme.device.miniDesktopMediaMax}) {
     max-width: 728px;
-    .scrolled.custom-newsHero & {
-      max-width: calc(728px + 200px);
+
+    .news-page-content & {
+      max-width: 784px;
     }
   }
 

diff --git a/src/components/Pagination/PaginattionBar.js b/src/components/Pagination/PaginattionBar.js
@@ -59,6 +59,11 @@ const Item = styled.div`
   margin: 0 12px;
   cursor: pointer;
 
+  @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
+    margin: 0 4px;
+    padding: 0 8px;
+  }
+
   ${({ active }) =>
     active
       ? `
@@ -82,6 +87,10 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: center;
   order: 1;
+
+  .newsCategoriesTab & {
+    margin: 24px 0;
+  }
 `
 const ArrowIcon = styled.span`
   font-size: 28px;
@@ -92,8 +101,14 @@ const ArrowIcon = styled.span`
   }
   &:first-child {
     margin-right: 32px;
+    @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
+      margin-right: 16px;
+    }
   }
   &:last-child {
     margin-left: 32px;
+    @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
+      margin-left: 16px;
+    }
   }
 `
diff --git a/src/components/hubspotForm.js b/src/components/hubspotForm.js
@@ -77,6 +77,7 @@ const Wrapper = styled.div`
   ${({ width }) => (width ? `width: ${width};` : 'min-width: 300px;')}
 
   &.newsletterOnNewsDetail {
+    margin-top: 56px;
     height: 410px;
     position: relative;
   }

diff --git a/src/templates/NewsLayout.js b/src/templates/NewsLayout.js
@@ -16,16 +16,18 @@ function NewsLayout(props) {
       hero,
       cta,
       news: { title, subtitle, image, content },
-      news_bg: {
-        file: { url: bgUrl },
-      },
+      news_bg,
+      news_dark_bg,
       hubspot,
       latest,
       footer,
     },
     pageContext: { pathBuild },
   } = props
 
+  const bgUrl = news_bg?.file?.url || ''
+  const darkBgUrl = news_dark_bg?.file?.url || ''
+
   const seoModuleConfig = {
     internal: { type: 'ContentfulSeo' },
     pageTitle: title,
@@ -61,7 +63,7 @@ function NewsLayout(props) {
               <SocialButtonList />
             </SocialShare>
           </ContentWrapper>
-          <NewsContentWrapper bgUrl={bgUrl}>
+          <NewsContentWrapper bgUrl={bgUrl} darkBgUrl={darkBgUrl}>
             {contentfulModuleToComponent(contentConfig)}
             {contentfulModuleToComponent(hubspot)}
           </NewsContentWrapper>
@@ -81,24 +83,39 @@ const NewsContainer = styled(Section)`
   position: relative;
 `
 const SocialShare = styled.div`
-  padding-top: 32px;
+  margin: 32px 0;
   display: flex;
   align-items: center;
   justify-content: right;
+
   @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
     flex-direction: column;
   }
 `
 
 const NewsContentWrapper = styled.div`
+  ${({ bgUrl, darkBgUrl }) =>
+    bgUrl || darkBgUrl
+      ? ` background-size: contain;
+      background-repeat: no-repeat;
+      background-position: bottom;
+   `
+    : ''}
+
   ${({ bgUrl }) =>
     bgUrl
       ? ` background-image: url(${bgUrl});
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: bottom;
+  `
+    : ''}
+
+  ${({ darkBgUrl }) =>
+    darkBgUrl
+      ? ` 
+      body.dark-mode & {
+        background-image: url(${darkBgUrl});
+      }
    `
-      : ''}
+   : ''}
 
   & > * {
     max-width: 784px;
@@ -172,6 +189,12 @@ export const NewsLayoutQuery = graphql`
       }
     }
 
+    news_dark_bg: contentfulAsset(contentful_id: { eq: "2StKLJf0XE38EyT9GlzQuO" }) {
+      file {
+        url
+      }
+    }
+
     hubspot: contentfulHubSpotForm(
       contentful_id: { eq: "5VZVKtbcRMzaaP77nsz3Fs" }
     ) {