fixing code, thanks adi

components/ConnectWithUs.tsx

@@ -5,17 +5,17 @@ import { Link } from "./Link";
 
 export function ConnectWithUs() {
   return (
-    <>
+    <div>
       <h2 className={styles.header}>Connect with us!</h2>
-      <p className={styles.text}>
+      <div className={styles.text}>
         Drop by any of our social media outlets to learn more about us, keep
         up-to-date with our upcoming events, or to chat with our members!
         <div className={styles.socialLinks}>
           <SocialLinks color="gradient" size="big" />
         </div>
         {/* TODO: fix feedback form link  */}
-        Send feedback through our <Link href="">Feedback Form</Link>
-      </p>
-    </>
+        Send feedback through our <Link href="#">Feedback Form</Link>
+      </div>
+    </div>
   );
 }

components/EmailSignup.module.css

@@ -12,50 +12,7 @@
   margin: 0 0 calc(21rem / 16) 0;
 }
 
-.form input {
-  display: block;
-  width: 100%;
-  margin: calc(21rem / 16) 0;
-
-  box-sizing: border-box;
-  border: 0;
-  border-radius: calc(20rem / 16);
-
-  background-color: var(--grey-24);
-}
-
-.form input::placeholder {
-  color: var(--grey);
-  font-weight: 700;
-}
-
-.form input[type="text"],
-.form input[type="email"] {
-  padding: calc(10rem / 16) calc(31rem / 16);
-  font-family: Poppins;
-
-  font-size: calc(18rem / 16);
-  line-height: calc(30rem / 16);
-  color: var(--dark-grey);
-}
-
-.form input:is(:active, :hover, :focus) {
-  box-sizing: border-box;
-  border: calc(3rem / 16) solid var(--blue-1);
-  border-radius: calc(20rem / 16);
-  outline: none;
-  padding: calc(7rem / 16) calc(28rem / 16);
-}
-
 .button {
   margin-top: calc(34rem / 16);
+  display: block;
 }
-
-/* TODO: make this only happen if the form is clicked on? */
-/* .form input:invalid {
-  box-sizing: border-box;
-  border: calc(3rem / 16) solid var(--red);
-  border-radius: calc(20rem / 16);
-  outline: none;
-  padding: calc(7rem / 16) calc(28rem / 16);
-} */

components/EmailSignup.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import styles from "./EmailSignup.module.css";
 import { Button } from "./Button";
+import { Input } from "./Input";
 
 export function EmailSignup() {
   return (
     <div className={styles.container}>
       <h2 className={styles.header}>Join Our Mailing List!</h2>
       <form className={styles.form} action="">
-        <input type="text" placeholder="Full Name*" required />
-        <input type="email" placeholder="Email*" required />
-
-        <div className={styles.button}>
-          <Button>Subscribe</Button>
-        </div>
+        <Input type="text" placeholder="Full Name*" required />
+        <Input type="email" placeholder="Email*" required />
+        <Button className={styles.button}>Subscribe</Button>
       </form>
     </div>
   );

components/Input.module.css

@@ -0,0 +1,37 @@
+.input {
+  display: block;
+  width: 100%;
+  margin: calc(21rem / 16) 0;
+  padding: calc(10rem / 16) calc(31rem / 16);
+
+  box-sizing: border-box;
+  border: 0;
+  border-radius: calc(20rem / 16);
+
+  background-color: var(--grey-1-24);
+  font-size: calc(18rem / 16);
+  line-height: calc(30rem / 16);
+  color: var(--grey-3);
+}
+
+.input::placeholder {
+  color: var(--grey-2);
+  font-weight: 700;
+}
+
+.input:is(:active, :hover, :focus) {
+  box-sizing: border-box;
+  border: calc(3rem / 16) solid var(--blue-1);
+  border-radius: calc(20rem / 16);
+  outline: none;
+  padding: calc(7rem / 16) calc(28rem / 16);
+}
+
+/* TODO: make this only happen if the form is clicked on? */
+/* .form input:invalid {
+  box-sizing: border-box;
+  border: calc(3rem / 16) solid var(--red);
+  border-radius: calc(20rem / 16);
+  outline: none;
+  padding: calc(7rem / 16) calc(28rem / 16);
+} */

components/Input.tsx

@@ -0,0 +1,8 @@
+import React, { InputHTMLAttributes } from "react";
+import styles from "./Input.module.css";
+
+export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input {...props} className={`${styles.input} ${props.className ?? ""}`} />
+  );
+}

pages/_app.css

@@ -13,9 +13,10 @@ body {
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --black: #000000;
-  --grey: #bbbbbb;
-  --grey-24: rgba(196, 196, 196, 0.24);
-  --dark-grey: #6b6b6b;
+  --grey-1: #c4c4c4;
+  --grey-1-24: #c4c4c440;
+  --grey-2: #bbbbbb;
+  --grey-3: #6b6b6b;
   --red: #9f616a;
   --gradient-blue-green: linear-gradient(
     99.94deg,
@@ -81,3 +82,7 @@ h4 {
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
+
+input {
+  font-family: "Poppins", "sans-serif";
+}

pages/about/our-supporters.tsx

@@ -8,10 +8,7 @@ export default function OurSupporters() {
     <>
       <div className={styles.headerContainer}>
         <h1 className={styles.header}>Our Supporters</h1>
-        <Image
-          src="our-supporters/supporters-codey.svg"
-          className={styles.codey}
-        />
+        <Image src="images/our-supporters/codey.svg" className={styles.codey} />
       </div>
       <div className={styles.content}>
         <Content />

pages/get-involved.module.css

@@ -6,12 +6,12 @@
 
 .headerText h1 {
   color: var(--purple-2);
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 calc(8rem / 16) 0;
 }
 
 .headerText p {
   color: var(--black);
-  margin: 0 0 1.375rem 0;
+  margin: 0 0 calc(22rem / 16) 0;
 }
 
 .codey {
@@ -21,7 +21,7 @@
 
 .content {
   margin-top: calc(32rem / 16);
-  margin-bottom: calc(52.77rem / 16);
+  margin-bottom: calc(52rem / 16);
 }
 
 .content h2 {
@@ -34,11 +34,7 @@
   font-weight: 600;
   color: var(--purple-2);
   margin-top: calc(30rem / 16);
-  margin-bottom: calc(15rem / 16);
-}
-
-.content p {
-  margin: 0;
+  margin-bottom: 1rem;
 }
 
 .connectWithUs {
@@ -46,12 +42,13 @@
 }
 
 .emailSignup {
-  margin-bottom: calc(57.81rem / 16);
+  margin-bottom: calc(58rem / 16);
 }
 
 .pageContainer {
-  margin-top: calc(172rem / 16);
+  margin-top: calc(50rem / 16);
 }
 
+/* @todo aaaaaa */
 @media only screen and (max-width: calc(768rem / 16)) {
 }

pages/get-involved.tsx

@@ -21,11 +21,11 @@ export default function GetInvolved() {
             <Link href="/about/team">Programme Committee</Link>!
           </p>
         </div>
-        <Image src="images/get-involved-codey.svg" className={styles.codey} />
+        <Image src="images/get-involved/codey.svg" className={styles.codey} />
       </div>
-      <div className={styles.content}>
+      <main className={styles.content}>
         <Content />
-      </div>
+      </main>
       <div className={styles.connectWithUs}>
         <ConnectWithUs />
       </div>