Merge pull request #557 from simonzheng/simonzheng-20240106/issue-553…

…/Include-donation-link-in-mobile-web-app Include donation link in mobile web app (simonzheng/20240106)
cofacts · Jan 7, 2024 · 20083e3 · 20083e3
2 parents 5dc43ee + 12d4653
commit 20083e3
Showing 1 changed file with 81 additions and 76 deletions.
diff --git a/components/AppLayout/AppFooter.js b/components/AppLayout/AppFooter.js
@@ -89,88 +89,93 @@ const CustomLink = withStyles(theme => ({
   </div>
 ));
 
+function FactCheckSection({ classes }) {
+  return (
+    <div className={classes.column}>
+      <h3>{t`Fact Check`}</h3>
+      <CustomLink href="/articles">{t`Messages`}</CustomLink>
+      <CustomLink href="/replies">{c('App layout').t`Replies`}</CustomLink>
+      <CustomLink href="/hoax-for-you">{c('App layout').t`For You`}</CustomLink>
+      <CustomLink href="/tutorial">{c('App layout').t`Tutorial`}</CustomLink>
+    </div>
+  );
+}
+
+function AboutSection({ classes }) {
+  return (
+    <div className={classes.column}>
+      <h3>{t`About`}</h3>
+      <CustomLink href="/about">{t`About Cofacts`}</CustomLink>
+      <CustomLink href="/terms">{t`User Agreement`}</CustomLink>
+      <CustomLink external href={PROJECT_HACKFOLDR}>
+        {t`Introduction`}
+      </CustomLink>
+      <CustomLink external href={PROJECT_SOURCE_CODE}>
+        {t`Source Code`}
+      </CustomLink>
+      <CustomLink external href={PROJECT_MEDIUM}>
+        Medium
+      </CustomLink>
+      <CustomLink href="/impact">{t`Impact Report`}</CustomLink>
+    </div>
+  );
+}
+
+function ContactSection({ classes, isDesktop }) {
+  return (
+    <div className={classes.column}>
+      <h3>{t`Contact`}</h3>
+      <CustomLink
+        external
+        href={`mailto:${CONTACT_EMAIL}`}
+        icon={({ className }) => (
+          <img className={className} src={mailIcon} style={{ width: '30px' }} />
+        )}
+      >
+        {t`Contact Us`}
+      </CustomLink>
+      <CustomLink
+        external
+        href={EDITOR_FACEBOOK_GROUP}
+        icon={({ className }) => (
+          <img
+            className={className}
+            src={facebookIcon}
+            style={{ width: '30px' }}
+          />
+        )}
+      >
+        {t`Facebook forum`}
+      </CustomLink>
+      <CustomLink
+        external
+        href={LINE_URL}
+        icon={({ className }) => (
+          <img className={className} src={lineIcon} style={{ width: '30px' }} />
+        )}
+      >
+        Line: @cofacts
+      </CustomLink>
+      {isDesktop && <GoogleWebsiteTranslator />}
+      <CustomLink external href={DONATION_URL}>
+        {t`Donate to Cofacts`}
+      </CustomLink>
+    </div>
+  );
+}
+
 function AppFooter() {
   const classes = useStyles();
-  const matches = useMediaQuery('(min-width:768px)');
+  const isDesktop = useMediaQuery('(min-width:768px)');
 
   return (
-    <Box component="footer" display={['none', 'none', 'block']}>
+    // <Box component="footer" display={['block', 'block', 'block']}>
+    <Box component="footer">
       <div className={classes.first}>
         <div className={classes.container}>
-          <div className={classes.column}>
-            <h3>{t`Fact Check`}</h3>
-            <CustomLink href="/articles">{t`Messages`}</CustomLink>
-            <CustomLink href="/replies">
-              {c('App layout').t`Replies`}
-            </CustomLink>
-            <CustomLink href="/hoax-for-you">
-              {c('App layout').t`For You`}
-            </CustomLink>
-            <CustomLink href="/tutorial">
-              {c('App layout').t`Tutorial`}
-            </CustomLink>
-          </div>
-          <div className={classes.column}>
-            <h3>{t`About`}</h3>
-            <CustomLink href="/about">{t`About Cofacts`}</CustomLink>
-            <CustomLink href="/terms">{t`User Agreement`}</CustomLink>
-            <CustomLink external href={PROJECT_HACKFOLDR}>
-              {t`Introduction`}
-            </CustomLink>
-            <CustomLink external href={PROJECT_SOURCE_CODE}>
-              {t`Source Code`}
-            </CustomLink>
-            <CustomLink external href={PROJECT_MEDIUM}>
-              Medium
-            </CustomLink>
-            <CustomLink href="/impact">{t`Impact Report`}</CustomLink>
-          </div>
-          <div className={classes.column}>
-            <h3>{t`Contact`}</h3>
-            <CustomLink
-              external
-              href={`mailto:${CONTACT_EMAIL}`}
-              icon={({ className }) => (
-                <img
-                  className={className}
-                  src={mailIcon}
-                  style={{ width: '30px' }}
-                />
-              )}
-            >
-              {t`Contact Us`}
-            </CustomLink>
-            <CustomLink
-              external
-              href={EDITOR_FACEBOOK_GROUP}
-              icon={({ className }) => (
-                <img
-                  className={className}
-                  src={facebookIcon}
-                  style={{ width: '30px' }}
-                />
-              )}
-            >
-              {t`Facebook forum`}
-            </CustomLink>
-            <CustomLink
-              external
-              href={LINE_URL}
-              icon={({ className }) => (
-                <img
-                  className={className}
-                  src={lineIcon}
-                  style={{ width: '30px' }}
-                />
-              )}
-            >
-              Line: @cofacts
-            </CustomLink>
-            {matches && <GoogleWebsiteTranslator />}
-            <CustomLink external href={DONATION_URL}>
-              {t`Donate to Cofacts`}
-            </CustomLink>
-          </div>
+          {isDesktop && <FactCheckSection classes={classes} />}
+          {isDesktop && <AboutSection classes={classes} />}
+          <ContactSection classes={classes} isDesktop={isDesktop} />
         </div>
       </div>
       <div className={classes.second}>