From 4915466f345b64de6a4ab3223a0b068cc2decbc5 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Thu, 1 Sep 2022 01:28:24 -0400
Subject: [PATCH 1/4] Add about

---
 components/About.module.css | 55 +++++++++++++++++++++++++++++++
 components/About.tsx        | 65 +++++++++++++++++++++++++++++++++++++
 pages/_app.css              |  2 ++
 pages/playground.tsx        |  7 ++++
 4 files changed, 129 insertions(+)
 create mode 100644 components/About.module.css
 create mode 100644 components/About.tsx

diff --git a/components/About.module.css b/components/About.module.css
new file mode 100644
index 0000000..7af558c
--- /dev/null
+++ b/components/About.module.css
@@ -0,0 +1,55 @@
+.aboutWrapper {
+  position: relative;
+  flex-direction: column;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.about {
+  width: 90%;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--primary-background);
+  padding: calc(45rem / 16);
+}
+
+.about aside {
+  flex: 1;
+  margin-right: 40px;
+}
+
+.about h1 {
+  margin: 0;
+}
+
+.about article {
+  flex: 3;
+}
+
+.about h4 {
+  margin: 0;
+}
+
+.about p {
+  color: var(--secondary-text)
+}
+
+.angle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(70rem / 16);
+  height: calc(70rem / 16);
+}
+
+.anglePath {
+  stroke: var(--primary-text)
+}
+
+.left.angle {
+  transform: rotate(180deg);
+  top: unset;
+  left: unset;
+  bottom: 0;
+  right: 0;
+}
diff --git a/components/About.tsx b/components/About.tsx
new file mode 100644
index 0000000..d176012
--- /dev/null
+++ b/components/About.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+import styles from "./About.module.css";
+
+export default function About() {
+  return (
+    <div className={styles.aboutWrapper}>
+      <AngleDecoration isBottom={false} />
+      <section className={styles.about}>
+        <aside>
+          <h1>About the Programs</h1>
+          <p>Getting an overview of the CS programs in UW</p>
+        </aside>
+        <article>
+          <h4>Computer Science</h4>
+          <p>
+            Offered from the Faculty of Mathematics as most commonly a co-op
+            program, students usually attend 8 school and 6 co-op terms in their
+            degree. However, CS is very flexible, as many students historically
+            have dropped co-ops, taking terms off, and messing with their
+            schedule to fit their desires.
+          </p>
+          <h4>Computing and Financial Management</h4>
+          <p>
+            Computing and Financial Management (CFM) combines the core CS
+            courses with electives from areas such as accounting, economics, and
+            financial management. This is a joint offer from the Faculty of
+            Mathematics and the School of Accounting and Finance, and has the
+            same schedule (and flexibility) as CS.
+          </p>
+          <h4>CS/BBA</h4>
+          <p>
+            Joint with Wilfrid Laurier University, the Business Administration
+            and Computer Science Double Degree (CS/BBA) is an exclusive offering
+            that allows students to get experience in CS as well as many
+            subfields of business. There are 10 school terms and either 4 or 5
+            co-op terms in the usual schedule, so it’s a bit more work than CS
+            or CFM.
+          </p>
+        </article>
+      </section>
+      <AngleDecoration isBottom={true} />
+    </div>
+  );
+}
+
+interface AngleDecorationProps {
+  isBottom: boolean;
+}
+
+function AngleDecoration({ isBottom }: AngleDecorationProps) {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
+    >
+      <path
+        d="M100,2 L2,2 L2,100"
+        fill="none"
+        strokeWidth="10"
+        className={styles.anglePath}
+      />
+    </svg>
+  );
+}
diff --git a/pages/_app.css b/pages/_app.css
index 0c34108..c132a99 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -59,6 +59,7 @@ body {
   --link: var(--dark--link);
   --link-hover: var(--dark--link-hover);
   --primary-text: var(--dark--primary-text);
+  --secondary-text: var(--dark--secondary-text);
   --card-background: var(--dark--card-background);
   --label: var(--dark--label);
 
@@ -106,6 +107,7 @@ a:hover {
     --link: var(--dark--link);
     --link-hover: var(--dark--link-hover);
     --primary-text: var(--dark--primary-text);
+    --secondary-text: var(--dark--secondary-text);
     --card-background: var(--dark--card-background);
     --label: var(--dark--label);
   }
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 5707edb..523be55 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -2,6 +2,8 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 
+import About from "@/components/About";
+
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -59,6 +61,11 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
+      <h2>
+        <code>{"<About />"}</code>
+        <About />
+      </h2>
     </div>
   );
 }
-- 
2.39.2


From 22769fd3914bba93337bcb012cf42ee0c4a35199 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 23:08:53 -0400
Subject: [PATCH 2/4] Remove margin: 0 auto

---
 components/About.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/About.module.css b/components/About.module.css
index 7af558c..31e42f1 100644
--- a/components/About.module.css
+++ b/components/About.module.css
@@ -2,7 +2,6 @@
   position: relative;
   flex-direction: column;
   width: 90%;
-  margin: 0 auto;
 }
 
 .about {
-- 
2.39.2


From d3f1f08ff715715338d8406d20bc6e431a4136a6 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 23:15:26 -0400
Subject: [PATCH 3/4] Code review fixes

---
 components/About.module.css | 13 +++++++------
 pages/_app.css              |  3 ---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/About.module.css b/components/About.module.css
index 31e42f1..7b08e34 100644
--- a/components/About.module.css
+++ b/components/About.module.css
@@ -1,14 +1,11 @@
 .aboutWrapper {
   position: relative;
-  flex-direction: column;
   width: 90%;
 }
 
 .about {
-  width: 90%;
   display: flex;
   flex-direction: row;
-  background-color: var(--primary-background);
   padding: calc(45rem / 16);
 }
 
@@ -29,8 +26,12 @@
   margin: 0;
 }
 
-.about p {
-  color: var(--secondary-text)
+.about aside p {
+  color: var(--primary-accent-light)
+}
+
+.about article p {
+  color: var(--primary-text);
 }
 
 .angle {
@@ -42,7 +43,7 @@
 }
 
 .anglePath {
-  stroke: var(--primary-text)
+  stroke: var(--primary-accent)
 }
 
 .left.angle {
diff --git a/pages/_app.css b/pages/_app.css
index c132a99..d6ba190 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -23,7 +23,6 @@ body {
   --light--secondary-accent-light: #FEA0C8;
   --light--primary-heading: #D02B53;
   --light--primary-text: #483B35;
-  --light--secondary-text: var(--pink);
   --light--link: var(--orange);
   --light--link-hover: #FFBC9F;
   --light--card-background: #FFFFFF;
@@ -59,7 +58,6 @@ body {
   --link: var(--dark--link);
   --link-hover: var(--dark--link-hover);
   --primary-text: var(--dark--primary-text);
-  --secondary-text: var(--dark--secondary-text);
   --card-background: var(--dark--card-background);
   --label: var(--dark--label);
 
@@ -107,7 +105,6 @@ a:hover {
     --link: var(--dark--link);
     --link-hover: var(--dark--link-hover);
     --primary-text: var(--dark--primary-text);
-    --secondary-text: var(--dark--secondary-text);
     --card-background: var(--dark--card-background);
     --label: var(--dark--label);
   }
-- 
2.39.2


From 565741403608b4092dd92ce0eb3a2e0060bce3d8 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Mon, 12 Sep 2022 10:13:40 -0400
Subject: [PATCH 4/4] Change colors

---
 components/About.module.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/About.module.css b/components/About.module.css
index 7b08e34..3a82b92 100644
--- a/components/About.module.css
+++ b/components/About.module.css
@@ -9,25 +9,29 @@
   padding: calc(45rem / 16);
 }
 
-.about aside {
-  flex: 1;
-  margin-right: 40px;
-}
-
 .about h1 {
   margin: 0;
 }
 
-.about article {
-  flex: 3;
-}
-
 .about h4 {
   margin: 0;
 }
 
+.about aside {
+  flex: 1;
+  margin-right: calc(40rem / 16);
+}
+
+.about aside h1 {
+  color: var(--secondary-accent)
+}
+
 .about aside p {
-  color: var(--primary-accent-light)
+  color: var(--primary-accent-lighter)
+}
+
+.about article {
+  flex: 3;
 }
 
 .about article p {
@@ -43,7 +47,7 @@
 }
 
 .anglePath {
-  stroke: var(--primary-accent)
+  stroke: var(--primary-accent-light)
 }
 
 .left.angle {
-- 
2.39.2