From ba274c262e45ea615ca4c3df28e679db3c4e5470 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Tue, 17 Aug 2021 21:24:18 -0400
Subject: [PATCH 1/3] Add decoration to the bubble component

---
 components/Bubble.module.css        | 68 ++++++++++++++++++++++++++++-
 components/Bubble.tsx               | 15 ++++++-
 public/images/bubble-decoration.svg |  5 +++
 3 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 public/images/bubble-decoration.svg

diff --git a/components/Bubble.module.css b/components/Bubble.module.css
index a7f3b645..638c93b7 100644
--- a/components/Bubble.module.css
+++ b/components/Bubble.module.css
@@ -1,7 +1,71 @@
-.bubble {
+.container {
+  position: relative;
   padding: calc(36rem / 16) 0;
+  overflow-x: clip;
 }
 
-.bubble:nth-child(odd) {
+.bubble {
+  --border-radius: calc(5000rem / 16);
+
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.bar {
+  height: 100%;
+  width: 100%;
+}
+
+.decoration {
+  display: none;
+  width: calc(128rem / 16);
+}
+
+.margin {
+  display: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.container:nth-child(odd) .bar {
   background-color: var(--primary-accent-light);
 }
+
+@media only screen and (min-width: calc(1350rem / 16)) {
+  .container:nth-child(odd) .decoration {
+    display: block;
+    position: absolute;
+  }
+
+  .container:nth-child(4n + 1) .bar {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    transform: translateX(-12.5vw);
+  }
+
+  .container:nth-child(4n + 1) .decoration {
+    top: calc(-50rem / 16);
+    right: 8vw;
+  }
+
+  .container:nth-child(4n + 3) .bar {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    transform: translateX(12.5vw);
+  }
+
+  .container:nth-child(4n + 3) .decoration {
+    top: calc(-50rem / 16);
+    left: 8vw;
+    transform: rotateY(180deg);
+  }
+}
diff --git a/components/Bubble.tsx b/components/Bubble.tsx
index 746ee896..da86dc3d 100644
--- a/components/Bubble.tsx
+++ b/components/Bubble.tsx
@@ -1,13 +1,24 @@
 import React from "react";
 
+import { Image } from "@/components/Image";
+
 import { DefaultLayout } from "./DefaultLayout";
 
 import styles from "./Bubble.module.css";
 
 export default function Bubble(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.bubble}>
-      <DefaultLayout>{props.children}</DefaultLayout>
+    <div className={styles.container}>
+      <div className={styles.bubble} aria-hidden>
+        <div className={styles.bar} />
+        <Image
+          className={styles.decoration}
+          src="/images/bubble-decoration.svg"
+        />
+      </div>
+      <div className={styles.content}>
+        <DefaultLayout>{props.children}</DefaultLayout>
+      </div>
     </div>
   );
 }
diff --git a/public/images/bubble-decoration.svg b/public/images/bubble-decoration.svg
new file mode 100644
index 00000000..4c3efe69
--- /dev/null
+++ b/public/images/bubble-decoration.svg
@@ -0,0 +1,5 @@
+<svg width="136" height="119" viewBox="0 0 136 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.633 70.4629L62.6378 89.7796C61.16 90.5309 60.5525 92.3076 61.2489 93.8417C61.9204 95.321 63.5892 96.0941 65.1289 95.6392L106.18 83.5105C110.497 82.2349 112.41 77.2853 110.111 73.3418C108.178 70.027 103.991 68.7553 100.633 70.4629Z" fill="#4ED4B2"/>
+<path d="M69.9891 34.2566L48.8912 70.4297C48.0553 71.8629 48.4831 73.6881 49.8763 74.6322C51.2564 75.5674 53.1323 75.3313 54.2147 74.0862L81.7904 42.3626C84.7415 38.9676 83.7557 33.7673 79.7502 31.6005C76.2877 29.7275 71.9409 30.9103 69.9891 34.2566Z" fill="#4ED4B2"/>
+<path d="M27.5418 21.2602L26.2398 63.2351C26.1879 64.9074 27.4166 66.346 29.075 66.5545C30.7312 66.7628 32.2719 65.6758 32.6325 64.0449L41.6944 23.0529C42.6692 18.6432 39.3768 14.4344 34.8658 14.3238C30.9335 14.2274 27.6639 17.3239 27.5418 21.2602Z" fill="#4ED4B2"/>
+</svg>
-- 
2.39.2


From 792476421eec867d9c80e18635db90fe4b70d979 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Sun, 22 Aug 2021 22:26:54 -0400
Subject: [PATCH 2/3] added padding to bottom of page

---
 pages/about/index.module.css |  4 ++++
 pages/about/index.tsx        | 10 ++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/pages/about/index.module.css b/pages/about/index.module.css
index c3fc0309..18fcff9d 100644
--- a/pages/about/index.module.css
+++ b/pages/about/index.module.css
@@ -35,6 +35,10 @@
   height: calc(400rem / 16);
 }
 
+.connectWithUs {
+  padding-bottom: calc(96rem / 16);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .titleContainer {
     display: flex;
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index ad641899..4eb2bbef 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -19,10 +19,12 @@ export default function AboutUs() {
       <div className={styles.content}>
         <Content />
       </div>
-      <DefaultLayout>
-        <ConnectWithUs />
-        <EmailSignup />
-      </DefaultLayout>
+      <div className={styles.connectWithUs}>
+        <DefaultLayout>
+          <ConnectWithUs />
+          <EmailSignup />
+        </DefaultLayout>
+      </div>
     </>
   );
 }
-- 
2.39.2


From 4c2c6f3da78ffd705b1052111ce4b3511694eb89 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Sun, 22 Aug 2021 22:36:16 -0400
Subject: [PATCH 3/3] increased bottom margin value of page

---
 pages/about/index.module.css |  6 +-----
 pages/about/index.tsx        | 10 ++++------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/pages/about/index.module.css b/pages/about/index.module.css
index 18fcff9d..2bcd8b39 100644
--- a/pages/about/index.module.css
+++ b/pages/about/index.module.css
@@ -1,5 +1,5 @@
 .page {
-  margin-bottom: calc(20rem / 16);
+  margin-bottom: calc(60rem / 16);
 }
 
 .title {
@@ -35,10 +35,6 @@
   height: calc(400rem / 16);
 }
 
-.connectWithUs {
-  padding-bottom: calc(96rem / 16);
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
   .titleContainer {
     display: flex;
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index 4eb2bbef..ad641899 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -19,12 +19,10 @@ export default function AboutUs() {
       <div className={styles.content}>
         <Content />
       </div>
-      <div className={styles.connectWithUs}>
-        <DefaultLayout>
-          <ConnectWithUs />
-          <EmailSignup />
-        </DefaultLayout>
-      </div>
+      <DefaultLayout>
+        <ConnectWithUs />
+        <EmailSignup />
+      </DefaultLayout>
     </>
   );
 }
-- 
2.39.2