From 4d84ff9b61c518e9f3866f7d682d9916f8823fa6 Mon Sep 17 00:00:00 2001
From: Miniapple8888 <miniapple8888@gmail.com>
Date: Sun, 3 Apr 2022 14:47:36 -0400
Subject: [PATCH] dark theme icons & refactor minieventcard

---
 components/Footer.tsx                |  2 +-
 components/MiniEventCard.module.css  | 40 +++++++++++++++------
 components/MiniEventCard.tsx         |  5 ++-
 components/Navbar.module.css         |  8 +++++
 components/Navbar.tsx                | 53 ++++++++++++++++++++++++++--
 components/Table.module.css          |  2 +-
 components/Theme.tsx                 |  3 ++
 pages/_app.css                       |  9 ++++-
 pages/events/[year]/[term]/index.tsx | 11 +++---
 9 files changed, 112 insertions(+), 21 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index c9a941be..e519a625 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -22,7 +22,7 @@ export function Footer() {
         <Button
           size="small"
           onClick={() =>
-            themeContext?.theme.name == "dark"
+            themeContext?.theme.name === "dark"
               ? themeContext?.setTheme("light")
               : themeContext?.setTheme("dark")
           }
diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index 35de02b9..60b77d48 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -10,6 +10,21 @@
   color: var(--primary-subtitle);
 }
 
+.darkBg {
+  box-sizing: border-box;
+  position: relative;
+  padding: calc(20rem / 16);
+  background-color: var(--sectioning-light);
+  color: var(--primary-subtitle);
+}
+
+.darkBg:nth-child(odd) h1,
+.darkBg:nth-child(odd) h2,
+.darkBg:nth-child(odd) h3,
+.darkBg:nth-child(odd) h4 {
+  color: var(--primary-subtitle);
+}
+
 .name {
   display: flex;
   font-size: calc(18rem / 16);
@@ -25,7 +40,7 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.card:nth-child(odd) .info {
+.darkBg .info {
   color: var(--primary-subtitle);
 }
 
@@ -39,7 +54,7 @@
   font-size: calc(14rem / 16);
 }
 
-.card:nth-child(odd) .details {
+.darkBg .details {
   color: var(--primary-subtitle);
 }
 
@@ -55,19 +70,31 @@
   list-style: none;
 }
 
+.darkBg > summary {
+  list-style: none;
+}
+
 .card > summary::marker {
   display: none;
 }
 
+.darkBg > summary::marker {
+  display: none;
+}
+
 .card > summary::-webkit-details-marker {
   display: none;
 }
 
+.darkBg > summary::-webkit-details-marker {
+  display: none;
+}
+
 .dropDownIcon {
   fill: var(--primary-accent);
 }
 
-.card:nth-child(odd) .dropDownIcon {
+.darkBg .dropDownIcon {
   fill: var(--primary-subtitle);
 }
 
@@ -81,13 +108,6 @@
   color: var(--mini-event-card-text);
 }
 
-.card:nth-child(odd) h1,
-.card:nth-child(odd) h2,
-.card:nth-child(odd) h3,
-.card:nth-child(odd) h4 {
-  color: var(--primary-subtitle);
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
   .details {
     bottom: 0;
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index be2c7928..b90113e3 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -11,6 +11,7 @@ interface Props {
   online: boolean;
   location: string;
   date: Date;
+  background: string;
 }
 
 export const MiniEventCard: React.FC<Props> = ({
@@ -20,9 +21,11 @@ export const MiniEventCard: React.FC<Props> = ({
   location,
   date,
   online,
+  background,
 }) => {
+  const cardBackground = background === "dark-bg" ? styles.darkBg : styles.card;
   return (
-    <details className={styles.card}>
+    <details className={cardBackground}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
diff --git a/components/Navbar.module.css b/components/Navbar.module.css
index 6923089a..2b2a0eee 100644
--- a/components/Navbar.module.css
+++ b/components/Navbar.module.css
@@ -219,6 +219,14 @@
     cursor: pointer;
   }
 
+  .icon line {
+    stroke: var(--icon);
+  }
+
+  .icon path {
+    fill: var(--icon);
+  }
+
   .navMobileBackground {
     position: fixed;
     visibility: hidden;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6fecceea..28f5fe69 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -120,7 +120,44 @@ export function Navbar() {
           className={styles.hamburger}
           onClick={() => dispatch({ type: "open", route: router.pathname })}
         >
-          <Image src="/images/hamburger.svg" alt="Menu" />
+          <svg
+            width="30"
+            height="23"
+            viewBox="0 0 30 23"
+            className={styles.icon}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="28"
+              y1="2"
+              x2="2"
+              y2="2"
+              stroke="#2A2A62"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <line
+              x1="28"
+              y1="11.375"
+              x2="2"
+              y2="11.375"
+              stroke="#2A2A62"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <line
+              x1="28"
+              y1="20.75"
+              x2="2"
+              y2="20.75"
+              stroke="#2A2A62"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
         </button>
         <div
           className={
@@ -263,7 +300,19 @@ function NavItem(props: NavItemProps) {
             }
             onClick={() => props.onToggle(props.route)}
           >
-            <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
+            <svg
+              width="14"
+              height="9"
+              viewBox="0 0 14 9"
+              fill="none"
+              className={styles.icon}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
+                fill="#2A2A62"
+              />
+            </svg>
           </button>
           <ul
             className={
diff --git a/components/Table.module.css b/components/Table.module.css
index c2a3cfa0..70ee46e8 100644
--- a/components/Table.module.css
+++ b/components/Table.module.css
@@ -16,7 +16,7 @@
 }
 
 .table tbody tr:nth-child(odd) {
-  background: var(--primary-accent-lightest);
+  background: var(--table-section);
 }
 
 .table th {
diff --git a/components/Theme.tsx b/components/Theme.tsx
index c52fb83f..43c26653 100644
--- a/components/Theme.tsx
+++ b/components/Theme.tsx
@@ -50,12 +50,15 @@ export const PALETTE_NAMES = [
   "--input-placeholder-text",
   "--input-text",
 
+  "--icon",
+
   "--code-background",
   "--button-background",
   "--footer-background",
   "--card-background",
   "--sectioning-light",
   "--table-header",
+  "--table-section",
 
   "--navbar-page-overlay",
 
diff --git a/pages/_app.css b/pages/_app.css
index 51b58d4d..15422e27 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -41,6 +41,8 @@ body {
   --input-placeholder-text: #bbbbbb;
   --input-text: #6b6b6b;
 
+  --icon: #2A2A62;
+
   --code-background: #f0f0f0;
 
   --button-background: #1482e3;
@@ -48,6 +50,7 @@ body {
   --card-background: #ffffff;
   --sectioning-light: #dcf6f0;
   --table-header: #4ed4b2;
+  --table-section: #f7fbff;
 
   --blue-gradient: #1481E3;
   --border: #2a2a62;
@@ -75,7 +78,8 @@ input {
   --primary-accent: #5CAFF9;
   --primary-accent-soft: #5cb0f9;
   --primary-accent-light: #252542;
-  --primary-accent-lightest: #525284;
+  --primary-accent-lightest: #464671;
+  --primary-accent-lighter: #171729;
 
   --secondary-accent: #4ed3b2;
   --secondary-accent-light: #525284;
@@ -103,6 +107,8 @@ input {
   --input-placeholder-text: #bbbbbb;
   --input-text: #6b6b6b;
 
+  --icon: white;
+
   --primary-title: #5CAFF9;
   --primary-subtitle: #C5C5F0;
   --secondary-subtitle: #ABABF2;
@@ -114,6 +120,7 @@ input {
   --card-background: #3A3A61;
   --sectioning-light: rgba(82, 82, 132, 0.2);
   --table-header: #252542;
+  --table-section: #202037;
 
   --blue-gradient: #5CAFF9;
   --border: #2A2A62;
diff --git a/pages/events/[year]/[term]/index.tsx b/pages/events/[year]/[term]/index.tsx
index 8830d624..7a2505e9 100644
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@@ -95,12 +95,13 @@ export default function TermPage(props: Props) {
             </h1>
           )}
           <div className={styles.miniEventCards}>
-            {props.pastEvents.map(({ content, metadata }) => (
+            {props.pastEvents.map((event, key) => (
               <MiniEventCard
-                {...metadata}
-                date={new Date(metadata.date)}
-                description={<MDXRemote {...content} />}
-                key={metadata.name + metadata.date.toString()}
+                {...event.metadata}
+                date={new Date(event.metadata.date)}
+                description={<MDXRemote {...event.content} />}
+                key={event.metadata.name + event.metadata.date.toString()}
+                background={key % 2 === 0 ? "dark-bg" : "normal-bg"}
               />
             ))}
           </div>