From a18e87f5bc0b124b60d87c651c5ff25530c913bc Mon Sep 17 00:00:00 2001
From: Amy Wang <a258wang@csclub.uwaterloo.ca>
Date: Wed, 10 Aug 2022 02:22:18 -0400
Subject: [PATCH] Add quotation marks

---
 components/QuotationCarousel.module.css | 32 +++++++++++++++++++++++--
 components/QuotationCarousel.tsx        |  9 ++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/components/QuotationCarousel.module.css b/components/QuotationCarousel.module.css
index 8c5dc04..1c15204 100644
--- a/components/QuotationCarousel.module.css
+++ b/components/QuotationCarousel.module.css
@@ -5,6 +5,7 @@
   gap: calc(8rem / 16);
 
   width: calc(600rem / 16);
+  min-height: calc(100rem / 16);
 }
 
 .carouselButton {
@@ -30,11 +31,15 @@
 }
 
 .card {
-  min-height: calc(100rem / 16);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+
+  min-height: inherit;
   height: 100%;
   width: 100%;
   padding: calc(30rem / 16);
-  box-sizing: border-box;
 
   background-color: var(--primary-accent);
   border: calc(2rem / 16) solid var(--primary-accent-lighter);
@@ -44,3 +49,26 @@
 .card:not(.active) {
   display: none;
 }
+
+.card p {
+  margin: 0 calc(16rem / 16);
+
+  font-weight: bold;
+}
+
+.quotationMark {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+
+  height: calc(50rem / 16);
+
+  font-size: calc(50rem / 16);
+  font-weight: bold;
+  line-height: 0;
+}
+
+.right.quotationMark {
+  justify-content: end;
+  align-items: end;
+}
diff --git a/components/QuotationCarousel.tsx b/components/QuotationCarousel.tsx
index f1ab626..fc5a621 100644
--- a/components/QuotationCarousel.tsx
+++ b/components/QuotationCarousel.tsx
@@ -46,7 +46,14 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
 function QuotationCard({ quote, isActive }: QuotationCardProps) {
   const className = isActive ? `${styles.active} ${styles.card}` : styles.card;
 
-  return <div className={className}>{quote}</div>;
+  return (
+    <div className={className}>
+      {/* TODO: improve quotation mark alignment - maybe use images? */}
+      <div className={styles.quotationMark}>“</div>
+      <p>{quote}</p>
+      <div className={`${styles.right} ${styles.quotationMark}`}>”</div>
+    </div>
+  );
 }
 
 function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {