dark theme icons & refactor minieventcard

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")
           }

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;

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}>

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;

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={

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 {

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",
 

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;

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}
+                {...event.metadata}
-                date={new Date(metadata.date)}
+                date={new Date(event.metadata.date)}
-                description={<MDXRemote {...content} />}
+                description={<MDXRemote {...event.content} />}
-                key={metadata.name + metadata.date.toString()}
+                key={event.metadata.name + event.metadata.date.toString()}
+                background={key % 2 === 0 ? "dark-bg" : "normal-bg"}
               />
             ))}
           </div>