Merge pull request #403 from cofacts/impact-adjustment

Impact page adjustment
cofacts · Mar 3, 2021 · 3f508e1 · 3f508e1
2 parents 5dcb0fa + a97d547
commit 3f508e1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/components/ReportPage/SectionHowToUse.js b/components/ReportPage/SectionHowToUse.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 import Link from 'next/link';
-import { t } from 'ttag';
+import { c, t } from 'ttag';
 
 import SectionTitle from './SectionTitle';
 import HowToUseItem from './HowToUseItem';
@@ -131,7 +131,7 @@ const SectionHowToUse = () => {
       </div>
       <Link href="/about" passHref>
         <ActionButton style={{ color: '#fff' }} theme="dark">
-          {t`More`}
+          {c('impact').t`More`}
         </ActionButton>
       </Link>
     </section>

diff --git a/components/ReportPage/SectionInfluence.js b/components/ReportPage/SectionInfluence.js
@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
 import { t } from 'ttag';
-import { useMediaQuery } from '@material-ui/core';
 
 import SectionTitle from './SectionTitle';
 
@@ -39,15 +38,17 @@ const useStyles = makeStyles(theme => ({
   bgBottom: {
     width: '100%',
     zIndex: -1,
-  },
-  bgBottomMobile: {
-    width: '100%',
-    height: 110,
-    background: `url(${bgBottomMobile})`,
+    height: 0,
+    paddingTop: '18%',
+    backgroundImage: `url(${bgBottom})`,
     backgroundSize: 'cover',
     backgroundPosition: 'bottom center',
-    zIndex: -1,
-    marginTop: 30,
+
+    [theme.breakpoints.down('xs')]: {
+      height: 110,
+      backgroundImage: `url(${bgBottomMobile})`,
+      marginTop: 30,
+    },
   },
   title: {
     color: '#3d2e56',
@@ -85,8 +86,6 @@ const useStyles = makeStyles(theme => ({
 const SectionInfluence = () => {
   const classes = useStyles();
 
-  const isMobile = useMediaQuery(theme => theme.breakpoints.down('xs'));
-
   return (
     <section className={classes.influence}>
       <img className={classes.bgTop} src={bgTop} />
@@ -107,11 +106,7 @@ const SectionInfluence = () => {
         We automated the process of combating false information through artificial intelligence and machine learning, 
         in order to avoid exhausting professional reviewers and provide review resources.`}
       </p>
-      {isMobile ? (
-        <div className={classes.bgBottomMobile} />
-      ) : (
-        <img className={classes.bgBottom} src={bgBottom} />
-      )}
+      <div className={classes.bgBottom} />
     </section>
   );
 };

diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
@@ -1219,6 +1219,7 @@ msgstr ""
 "協助你得到查核報告"
 
 #: components\ReportPage\SectionHowToUse.js:134
+msgctxt "impact"
 msgid "More"
 msgstr "了解更多"