responding to feedback

components/index/cards/mailing-list.js

@@ -1,12 +1,12 @@
 import Icon from "@hackclub/icons";
 import { useEffect, useRef, useState } from "react";
 import { Box, Button, Card, Flex, Grid, Input, Link, Text } from "theme-ui";
+import { format } from "date-fns";
 import BGImg from "../../background-image";
 import background from "../../../public/home/footer.png";
 import MailCard from "../../mail-card";
-import { format } from "date-fns";
 
-const markdownToHtml = require("@hackclub/markdown");
+const markdownToHtml = require('@hackclub/markdown')
 
 const Loading = () => (
   <Box
@@ -73,15 +73,15 @@ const MailingList = () => {
         .then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter
         .then(responses => Promise.all(responses.map(response => response.text())))
         .then(markdown => Promise.all(markdown.map(markdown => markdownToHtml(markdown))))
-        .then(html => html.map(html => html.replace(/<[^>]*>/g, "").replace(/The Hackening/g, ""))), // Chucks out all html tags + "The Hackening"
+        .then(html => html.map(html => html.replace(/<[^>]*>/g, '').replace(/The Hackening/g, ''))), // Chucks out all html tags + 'The Hackening'
   
       fetch('https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates')
         .then(response => response.json())
         .then(data => data.sort((a, b) => b.name.localeCompare(a.name)))
         .then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension
     ])
-    .then(([finalHtml, names]) => setData({ finalHtml, names }));
+    .then(([finalHtml, names]) => setData({ finalHtml, names }))
-    }, []);
+    }, [])
 
   return (
     <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
@@ -127,7 +127,7 @@ const MailingList = () => {
                 }}
                 as='p'
               >
-                We&apos;ll send you an email no more than once a month, when we work
+                We&aposll send you an email no more than once a month, when we work
                 on something cool for you. Check out our{' '}
                 <Link
                   href='https://workshops.hackclub.com/leader-newsletters/'
@@ -207,7 +207,7 @@ const MailingList = () => {
               <MailCard
                 issue={index + 1}
                 body={html}
-                date={format(new Date(data.names[index].split('-').join(', ')), "MMMM d, yyyy")}
+                date={format(new Date(data.names[index].split('-').join(', ')), 'MMMM d, yyyy')}
                 link={data.names[index]}
                 key={index}
               />

components/mail-card.js

@@ -1,61 +1,57 @@
 import { Box, Card, Link, Text } from "theme-ui";
 
-// todo: increase padding on mobile
-
 export default function MailCard({ body, date, link }) {
-  body = body.length > 130 ? body.substring(0, 130) + "..." : body;
+  body = body.length > 130 ? body.substring(0, 130) + '...' : body
   return (
     <Card
-      variant="interactive"
+      variant='interactive'
       sx={{
-        cursor: "pointer",
+        cursor: 'pointer',
-        padding: "0 !important",
+        padding: '0 !important',
       }}
     >
       <Link
         href={`https://workshops.hackclub.com/leader-newsletters/${link}`}
-        sx={{ textDecoration: "none" }}
+        sx={{ textDecoration: 'none' }}
-        target="_blank"
+        target='_blank'
-        rel="noopener norefferer"
+        rel='noopener norefferer'
       >
         <Box
           sx={{
-            height: "90%",
+            height: '90%',
-            color: "black",
+            color: 'black',
-            textDecoration: "none !important",
+            textDecoration: 'none !important',
           }}
         >
           <Box
             sx={{
-              width: "100%",
+              width: '100%',
-              height: "10px",
+              height: '10px',
-              backgroundRepeat: "repeat-x",
+              backgroundRepeat: 'repeat-x',
-              backgroundSize: "100%",
+              backgroundSize: '100%',
               backgroundImage: `url('/letter-pattern.svg')`,
             }}
           />
           <Box
             sx={{
-              placeItems: "center",
+              placeItems: 'center',
-              display: "grid",
+              display: 'grid',
-              height: "100%",
+              height: '100%',
               paddingY: [3, 4, 0],
             }}
           >
             <Box sx={{ px: [3, 4] }}>
-              <Box>
                 <Text>
                   {date}
-                  <Text sx={{ color: "#8492a6" }}>— From Hack Club, to You</Text>
+                  <Text sx={{ color: '#8492a6' }}>— From Hack Club, to You</Text>
                 </Text>
-                <Text as="h2" sx={{ fontWeight: "normal" }}>
+                <Text as='h2' sx={{ fontWeight: 'normal' }}>
                   {body}
                 </Text>
-              </Box>
             </Box>
           </Box>
         </Box>
       </Link>
     </Card>
-  );
+  )
 }