From 2435648bdd7a1aacf4447a1668b959d9bf5ecde8 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Wed, 7 Jul 2021 21:35:09 -0400
Subject: [PATCH] created DefaultLayout component

---
 components/Bubble.module.css        |  5 ++++-
 components/Bubble.tsx               | 13 +++++++------
 components/DefaultLayout.module.css |  6 ++++++
 components/DefaultLayout.tsx        |  6 ++++++
 content/about/index.mdx             |  8 ++++----
 pages/_app.module.css               |  7 -------
 pages/_app.tsx                      |  5 +----
 pages/about/index.module.css        |  6 +-----
 8 files changed, 29 insertions(+), 27 deletions(-)
 create mode 100644 components/DefaultLayout.module.css
 create mode 100644 components/DefaultLayout.tsx

diff --git a/components/Bubble.module.css b/components/Bubble.module.css
index 4bea90a8..f6d094b6 100644
--- a/components/Bubble.module.css
+++ b/components/Bubble.module.css
@@ -1,11 +1,14 @@
 .bubble {
   padding: calc(36rem / 16) 0;
   margin: calc(64rem / 16) 0;
+}
+
+.bubble:nth-child(odd) {
   background-color: var(--blue-1-20);
-  max-width: 5000px !important;
 }
 
 .bubble > * {
   margin: 2rem auto;
   max-width: calc(800rem / 16);
+  padding: 0 calc(24rem / 16);
 }
diff --git a/components/Bubble.tsx b/components/Bubble.tsx
index 5327859c..39d7094b 100644
--- a/components/Bubble.tsx
+++ b/components/Bubble.tsx
@@ -1,10 +1,11 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import { DefaultLayout } from "./DefaultLayout";
 import styles from "./Bubble.module.css";
 
 export default function Bubble(props: { children: React.ReactNode }) {
-  return <DefaultLayout> {props.children} </DefaultLayout>;
-}
-
-function DefaultLayout(props: { children: React.ReactNode }) {
-  return <div className={styles.bubble}>{props.children}</div>;
+  return (
+    <div className={styles.bubble}>
+      <DefaultLayout>{props.children}</DefaultLayout>
+    </div>
+  );
 }
diff --git a/components/DefaultLayout.module.css b/components/DefaultLayout.module.css
new file mode 100644
index 00000000..31cadd0b
--- /dev/null
+++ b/components/DefaultLayout.module.css
@@ -0,0 +1,6 @@
+.defaultLayout {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: 0 calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}
diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
new file mode 100644
index 00000000..1cc4fb4f
--- /dev/null
+++ b/components/DefaultLayout.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./DefaultLayout.module.css";
+
+export function DefaultLayout(props: { children: React.ReactNode }) {
+  return <div className={styles.defaultLayout}>{props.children}</div>;
+}
diff --git a/content/about/index.mdx b/content/about/index.mdx
index 3851b8c4..a1e16f39 100644
--- a/content/about/index.mdx
+++ b/content/about/index.mdx
@@ -6,7 +6,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
 
 </Bubble>
 
-<div>
+<Bubble>
 
 ## Our Vision
 
@@ -16,7 +16,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
 
 3. Community: Encouraging interpersonal relationships through community building and social events for all computing students.
 
-</div>
+</Bubble>
 
 <Bubble>
 
@@ -28,13 +28,13 @@ By recreating what CS Club means for our community, we're passionate about helpi
 
 </Bubble>
 
-<div>
+<Bubble>
 
 ## Our Mission
 
 The CS Club team is devoted to providing you with all the resources you could need as a student. We want to create a community that members can call home, to make it a place where you can reach out for career advice, for academic help, or even just to socialize. To fulfil this mission, we'll be running events and initiatives throughout the term, so please check out our Events page to stay updated!
 
-</div>
+</Bubble>
 
 <Bubble>
 
diff --git a/pages/_app.module.css b/pages/_app.module.css
index c545d6e9..a9bb4d65 100644
--- a/pages/_app.module.css
+++ b/pages/_app.module.css
@@ -10,10 +10,3 @@
 .contentContainer {
   flex-grow: 1;
 }
-
-.defaultLayout {
-  margin: 0 auto;
-  max-width: calc(800rem / 16);
-  padding: 0 calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
-}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f897db09..4d14cc39 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,6 +6,7 @@ import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { Link } from "../components/Link";
+import { DefaultLayout } from "../components/DefaultLayout";
 import styles from "./_app.module.css";
 
 import "./_app.css";
@@ -32,10 +33,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   );
 }
 
-function DefaultLayout(props: { children: React.ReactNode }) {
-  return <div className={styles.defaultLayout}>{props.children}</div>;
-}
-
 type PageComponent = NextComponentType<
   NextPageContext,
   unknown,
diff --git a/pages/about/index.module.css b/pages/about/index.module.css
index 2ba35dfb..9155b935 100644
--- a/pages/about/index.module.css
+++ b/pages/about/index.module.css
@@ -20,11 +20,6 @@
   color: black;
 }
 
-.text > * {
-  margin: 2rem auto;
-  max-width: calc(806rem / 16);
-}
-
 .flexBox {
   margin: 2rem auto;
   max-width: calc(806rem / 16);
@@ -74,6 +69,7 @@
   color: var(--blue-2);
   font-size: 24px;
 }
+/*for temp mailing list components*/
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .bubble:nth-child(odd) {