cleaned up some of css file

pages/about/index.module.css

@@ -1,28 +1,21 @@
 .title {
   color: var(--purple-2);
   font-size: 48px;
+  margin: 2rem auto;
+  max-width: calc(806rem / 16);
 }
 
-.headings {
+.headings h2 {
   color: var(--blue-2);
   font-size: 24px;
 }
 
-.headings li {
+.text,
+.text li {
   font-size: 16px;
   color: black;
 }
 
-.text {
-  font-size: 16px;
-  color: black;
-}
-
-.title {
-  margin: 2rem auto;
-  max-width: calc(806rem / 16);
-}
-
 .divs {
   margin-top: 4rem;
 }
@@ -38,10 +31,6 @@
   background-color: #e1eefa;
 } */
 
-.content {
-  margin: auto;
-}
-
 .flexBox {
   position: relative;
   display: flex;
@@ -63,10 +52,10 @@
   z-index: -1;
 }
 
+/*for temp mailing list components*/
 .mailingList {
   margin: 4rem auto;
   max-width: calc(806rem / 16);
-  /* padding: 0 calc(60rem / 16); */
 }
 
 .mailingList form > * {

pages/about/index.tsx

@@ -8,50 +8,41 @@ import { SocialLinks } from "../../components/SocialLinks";
 
 export default function AboutUs() {
   return (
-    <MDXProvider components={{ h2: H2, p: Text, div: Div }}>
+    <DefaultLayout>
       <div className={styles.flexBoxTitle}>
         <h1 className={styles.title}>About Us!</h1>
       </div>
       <div className={styles.flexBox}>
         <Image src="/about/codey.svg" className={styles.codey} />
       </div>
-      <div className={styles.content}>
+      <div className={styles.headings}>
-        <div className={styles.headings}>
+        <div className={styles.text}>
           <Content />
         </div>
-        <div className={styles.mailingList}>
-          <h2>Connect with us!</h2>
-          <p>
-            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!
-          </p>
-          <SocialLinks color="gradient" size="big" />
-          <p>Send feedback through our Feedback Form </p>
-          <h2>Join our Mailing List!</h2>
-          <form action="">
-            <div>
-              <input type="text" placeholder="Full Name*" required />
-            </div>
-            <div>
-              <input type="text" placeholder="Email*" required />
-            </div>
-            <Button>Subscribe</Button>
-          </form>
-        </div>
       </div>
-    </MDXProvider>
+      <div className={styles.mailingList}>
+        <h2>Connect with us!</h2>
+        <p>
+          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!
+        </p>
+        <SocialLinks color="gradient" size="big" />
+        <p>Send feedback through our Feedback Form </p>
+        <h2>Join our Mailing List!</h2>
+        <form action="">
+          <div>
+            <input type="text" placeholder="Full Name*" required />
+          </div>
+          <div>
+            <input type="text" placeholder="Email*" required />
+          </div>
+          <Button>Subscribe</Button>
+        </form>
+      </div>
+    </DefaultLayout>
   );
 }
 
-/*to be replaced by css rules in about-us.module.css*/
+function DefaultLayout(props: { children: React.ReactNode }) {
-function H2(props: HTMLAttributes<HTMLHeadingElement>) {
+  return <div>{props.children}</div>;
-  return <h2 {...props} className={styles.headings} />;
-}
-
-function Text(props: HTMLAttributes<HTMLParagraphElement>) {
-  return <p {...props} className={styles.text} />;
-}
-
-function Div(props: HTMLAttributes<HTMLHeadingElement>) {
-  return <div {...props} className={styles.divs} />;
 }