From 72709f5d6eb78d1ec7896ca7a53d63c98638d555 Mon Sep 17 00:00:00 2001
From: Amy <a258wang@csclub.uwaterloo.ca>
Date: Tue, 24 Aug 2021 12:02:13 -0400
Subject: [PATCH] Add EmailSignup link (#175)

Also changed the `XXX@XXX.COM` in the footer to `exec@csclub.uwaterloo.ca`.

Closes #129

Co-authored-by: Amy <a258wang@uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/175
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>
---
 components/EmailSignup.module.css |  7 ++-----
 components/EmailSignup.tsx        | 21 ++++++++++++---------
 components/Footer.module.css      |  5 +++++
 components/Footer.tsx             |  6 +++++-
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css
index 03dc79c1..c44609b8 100644
--- a/components/EmailSignup.module.css
+++ b/components/EmailSignup.module.css
@@ -1,7 +1,3 @@
-.container form {
-  box-sizing: border-box;
-}
-
 .header {
   color: var(--primary-accent);
   font-weight: 600;
@@ -9,8 +5,9 @@
 }
 
 .button {
-  margin-top: calc(34rem / 16);
+  margin-top: calc(26rem / 16);
   display: block;
+  width: fit-content;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx
index 9a1885ae..064a3f13 100644
--- a/components/EmailSignup.tsx
+++ b/components/EmailSignup.tsx
@@ -1,21 +1,24 @@
 import React from "react";
 
 import { Button } from "./Button";
-import { Input } from "./Input";
 
 import styles from "./EmailSignup.module.css";
 
 export function EmailSignup() {
   return (
     <section className={styles.container}>
-      <h1 className={styles.header}>Join Our Mailing List!</h1>
-      <form className={styles.form} action="">
-        <Input type="text" placeholder="Full Name*" required />
-        <Input type="email" placeholder="Email*" required />
-        <Button type="submit" className={styles.button}>
-          Subscribe
-        </Button>
-      </form>
+      <h1 className={styles.header}>Join our mailing list!</h1>
+      <p>
+        Join our mailing list to receive email notifications about important
+        news and upcoming events!
+      </p>
+      <Button
+        isLink={true}
+        href="https://mailman.csclub.uwaterloo.ca/postorius/lists/csc-general.csclub.uwaterloo.ca/"
+        className={styles.button}
+      >
+        Subscribe
+      </Button>
     </section>
   );
 }
diff --git a/components/Footer.module.css b/components/Footer.module.css
index 2f4c9d0c..337a419f 100644
--- a/components/Footer.module.css
+++ b/components/Footer.module.css
@@ -23,6 +23,11 @@
   text-align: center;
 }
 
+.email {
+  color: unset;
+  text-decoration: unset;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .footer {
     height: calc(120rem / 16);
diff --git a/components/Footer.tsx b/components/Footer.tsx
index e0fac676..0d008838 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import { SocialLinks } from "./SocialLinks";
@@ -9,7 +10,10 @@ export function Footer() {
     <footer className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.text}>
-          Have questions? Email us at XX@XXX.COM
+          Have questions? Email us at{" "}
+          <Link href="mailto:exec@csclub.uwaterloo.ca">
+            <a className={styles.email}>exec@csclub.uwaterloo.ca</a>
+          </Link>
         </div>
         <SocialLinks color="white" size="small" />
       </div>