From f8f551aec47e1b83e6acd48f75d99c074dfebda3 Mon Sep 17 00:00:00 2001
From: whsieh12 <williamoda@g.ucla.edu>
Date: Mon, 11 May 2026 22:04:42 -0700
Subject: [PATCH 1/2] FAQ page

---
 app/(main)/faq/FaqPage.module.css |  74 ++++++++++++++++++++
 app/(main)/faq/page.tsx           | 111 ++++++++++++++++++++++++++++++
 2 files changed, 185 insertions(+)
 create mode 100644 app/(main)/faq/FaqPage.module.css
 create mode 100644 app/(main)/faq/page.tsx

diff --git a/app/(main)/faq/FaqPage.module.css b/app/(main)/faq/FaqPage.module.css
new file mode 100644
index 00000000..4163668c
--- /dev/null
+++ b/app/(main)/faq/FaqPage.module.css
@@ -0,0 +1,74 @@
+.page {
+  max-width: 56rem;
+}
+
+.pageTitle {
+  margin: 0 0 2rem;
+  font-size: 2.75rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.offsetContent {
+  padding-left: 1.35rem;
+}
+
+.section + .section {
+  margin-top: 4.5rem;
+}
+
+.sectionTitle {
+  margin: 0 0 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.sectionDescription {
+  margin: 0 0 1.75rem;
+  max-width: 52rem;
+  color: #4f5d75;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.35;
+}
+
+.card {
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid #d8e1ec;
+  border-radius: 0.9rem;
+  background: #ffffff;
+  box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.08);
+}
+
+.cardHeader {
+  padding: 1.15rem 1.35rem 0.95rem;
+  border-bottom: 1px solid #d8e1ec;
+}
+
+.cardTitle {
+  margin: 0;
+  color: #000000;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.cardBody {
+  padding: 1rem 1.35rem 1.15rem;
+}
+
+.cardDescription {
+  margin: 0;
+  color: #4f5d75;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.35;
+}
+
+@media (max-width: 991.98px) {
+  .offsetContent {
+    padding-left: 0;
+  }
+}
diff --git a/app/(main)/faq/page.tsx b/app/(main)/faq/page.tsx
new file mode 100644
index 00000000..862e330c
--- /dev/null
+++ b/app/(main)/faq/page.tsx
@@ -0,0 +1,111 @@
+import styles from './FaqPage.module.css';
+
+const roleCards = [
+  {
+    title: 'Default User',
+    description:
+      'Assigned automatically to all new accounts. Default users can view home page and submit donation forms.',
+  },
+  {
+    title: 'Requestor',
+    description:
+      'Can browse stores and submit item requests (tickets). Requestors can view team directory and edit their own profile.',
+  },
+  {
+    title: 'Store Admin',
+    description:
+      'Manages one or more specific stores. Can handle incoming tickets and update inventory for their assigned store(s).',
+  },
+  {
+    title: 'Super Admin',
+    description:
+      'Has visibility across all stores. Can manage stores, categories, and donation records. Cannot manage other Superadmins or the Owner.',
+  },
+  {
+    title: 'Owner',
+    description:
+      'The highest privilege level. Full access to all features, all stores, and all user management including Superadmins.',
+  },
+];
+
+const statusCards = [
+  {
+    title: 'Requested',
+    description:
+      'Your request has been submitted and is waiting for a store admin to review it.',
+  },
+  {
+    title: 'Ready',
+    description:
+      'The store admin has reviewed your ticket and the items are being prepared or set aside for pickup or delivery.',
+  },
+  {
+    title: 'Fulfilled',
+    description:
+      'Your request has been fully completed. All items have been provided. No further action is needed.',
+  },
+  {
+    title: 'Rejected',
+    description:
+      'The store admin was unable to fulfill this request. This may be due to stock availability or other constraints.',
+  },
+];
+
+function FaqCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <article className={styles.card}>
+      <div className={styles.cardHeader}>
+        <h3 className={styles.cardTitle}>{title}</h3>
+      </div>
+      <div className={styles.cardBody}>
+        <p className={styles.cardDescription}>{description}</p>
+      </div>
+    </article>
+  );
+}
+
+export default function FaqPage() {
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.pageTitle}>FAQ</h1>
+
+      <div className={styles.offsetContent}>
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>Roles &amp; Permissions</h2>
+          <p className={styles.sectionDescription}>
+            Roles determine what pages you can access and what actions you can take. Higher roles inherit all permissions from roles below them.
+          </p>
+
+          <div className="row g-4">
+            {roleCards.map((card) => (
+              <div key={card.title} className="col-12 col-xl-6">
+                <FaqCard {...card} />
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>Ticket Statuses</h2>
+          <p className={styles.sectionDescription}>
+            Once a ticket is submitted, tickets move through the following statuses as store admins review and fulfill them.
+          </p>
+
+          <div className="row g-4">
+            {statusCards.map((card) => (
+              <div key={card.title} className="col-12 col-xl-6">
+                <FaqCard {...card} />
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

From 73ad3849e2a462eaae3f329b5689b4eb4d152944 Mon Sep 17 00:00:00 2001
From: whsieh12 <williamoda@g.ucla.edu>
Date: Thu, 14 May 2026 22:54:36 -0700
Subject: [PATCH 2/2] done2

---
 app/(main)/faq/FaqPage.module.css      |  74 -----------------
 app/(main)/faq/page.tsx                | 111 -------------------------
 supabase/templates/email-change.html   |  77 ++++++++++++++---
 supabase/templates/password-reset.html |  72 ++++++++++++++--
 supabase/templates/sign-up.html        |  70 ++++++++++++++--
 5 files changed, 190 insertions(+), 214 deletions(-)
 delete mode 100644 app/(main)/faq/FaqPage.module.css
 delete mode 100644 app/(main)/faq/page.tsx

diff --git a/app/(main)/faq/FaqPage.module.css b/app/(main)/faq/FaqPage.module.css
deleted file mode 100644
index 4163668c..00000000
--- a/app/(main)/faq/FaqPage.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.page {
-  max-width: 56rem;
-}
-
-.pageTitle {
-  margin: 0 0 2rem;
-  font-size: 2.75rem;
-  font-weight: 700;
-  line-height: 1.1;
-}
-
-.offsetContent {
-  padding-left: 1.35rem;
-}
-
-.section + .section {
-  margin-top: 4.5rem;
-}
-
-.sectionTitle {
-  margin: 0 0 0.75rem;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.sectionDescription {
-  margin: 0 0 1.75rem;
-  max-width: 52rem;
-  color: #4f5d75;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.35;
-}
-
-.card {
-  height: 100%;
-  overflow: hidden;
-  border: 1px solid #d8e1ec;
-  border-radius: 0.9rem;
-  background: #ffffff;
-  box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.08);
-}
-
-.cardHeader {
-  padding: 1.15rem 1.35rem 0.95rem;
-  border-bottom: 1px solid #d8e1ec;
-}
-
-.cardTitle {
-  margin: 0;
-  color: #000000;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.cardBody {
-  padding: 1rem 1.35rem 1.15rem;
-}
-
-.cardDescription {
-  margin: 0;
-  color: #4f5d75;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.35;
-}
-
-@media (max-width: 991.98px) {
-  .offsetContent {
-    padding-left: 0;
-  }
-}
diff --git a/app/(main)/faq/page.tsx b/app/(main)/faq/page.tsx
deleted file mode 100644
index 862e330c..00000000
--- a/app/(main)/faq/page.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import styles from './FaqPage.module.css';
-
-const roleCards = [
-  {
-    title: 'Default User',
-    description:
-      'Assigned automatically to all new accounts. Default users can view home page and submit donation forms.',
-  },
-  {
-    title: 'Requestor',
-    description:
-      'Can browse stores and submit item requests (tickets). Requestors can view team directory and edit their own profile.',
-  },
-  {
-    title: 'Store Admin',
-    description:
-      'Manages one or more specific stores. Can handle incoming tickets and update inventory for their assigned store(s).',
-  },
-  {
-    title: 'Super Admin',
-    description:
-      'Has visibility across all stores. Can manage stores, categories, and donation records. Cannot manage other Superadmins or the Owner.',
-  },
-  {
-    title: 'Owner',
-    description:
-      'The highest privilege level. Full access to all features, all stores, and all user management including Superadmins.',
-  },
-];
-
-const statusCards = [
-  {
-    title: 'Requested',
-    description:
-      'Your request has been submitted and is waiting for a store admin to review it.',
-  },
-  {
-    title: 'Ready',
-    description:
-      'The store admin has reviewed your ticket and the items are being prepared or set aside for pickup or delivery.',
-  },
-  {
-    title: 'Fulfilled',
-    description:
-      'Your request has been fully completed. All items have been provided. No further action is needed.',
-  },
-  {
-    title: 'Rejected',
-    description:
-      'The store admin was unable to fulfill this request. This may be due to stock availability or other constraints.',
-  },
-];
-
-function FaqCard({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <article className={styles.card}>
-      <div className={styles.cardHeader}>
-        <h3 className={styles.cardTitle}>{title}</h3>
-      </div>
-      <div className={styles.cardBody}>
-        <p className={styles.cardDescription}>{description}</p>
-      </div>
-    </article>
-  );
-}
-
-export default function FaqPage() {
-  return (
-    <div className={styles.page}>
-      <h1 className={styles.pageTitle}>FAQ</h1>
-
-      <div className={styles.offsetContent}>
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>Roles &amp; Permissions</h2>
-          <p className={styles.sectionDescription}>
-            Roles determine what pages you can access and what actions you can take. Higher roles inherit all permissions from roles below them.
-          </p>
-
-          <div className="row g-4">
-            {roleCards.map((card) => (
-              <div key={card.title} className="col-12 col-xl-6">
-                <FaqCard {...card} />
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>Ticket Statuses</h2>
-          <p className={styles.sectionDescription}>
-            Once a ticket is submitted, tickets move through the following statuses as store admins review and fulfill them.
-          </p>
-
-          <div className="row g-4">
-            {statusCards.map((card) => (
-              <div key={card.title} className="col-12 col-xl-6">
-                <FaqCard {...card} />
-              </div>
-            ))}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
diff --git a/supabase/templates/email-change.html b/supabase/templates/email-change.html
index b5622a1c..132140de 100644
--- a/supabase/templates/email-change.html
+++ b/supabase/templates/email-change.html
@@ -1,12 +1,65 @@
-<h2>Confirm email change</h2>
-
-<p>
-  Follow this link to confirm the update of your email from {{ .Email }} to {{
-  .NewEmail }}:
-</p>
-<p>
-  <a
-    href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=email_change&next=/profile"
-    >Change email</a
-  >
-</p>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        background: #f5f7fa;
+        color: #000000;
+        font-family: 'Montserrat', sans-serif;
+      }
+
+      .email-page {
+        padding: 3rem 3rem;
+        background: #f5f7fa;
+      }
+
+      .email-card {
+        max-width: 640px;
+        margin: 0 auto;
+        padding: 32px;
+        border-radius: 5px;
+        background: #ffffff;
+      }
+
+      .email-logo {
+        display: block;
+        width: 160px;
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 24px;
+      }
+
+      h2 {
+        font-weight: 700;
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-page">
+      <div class="email-card">
+        <img class="email-logo" src="{{ .SiteURL }}/path.png" alt="PATH logo" />
+        <h2>Confirm email change</h2>
+
+        <p>
+          Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:
+        </p>
+        <p>
+          <a
+            href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=email_change&next=/profile"
+            >Change email</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/supabase/templates/password-reset.html b/supabase/templates/password-reset.html
index 984a9f10..66f9f32e 100644
--- a/supabase/templates/password-reset.html
+++ b/supabase/templates/password-reset.html
@@ -1,9 +1,63 @@
-<h2>Reset password</h2>
-
-<p>Follow this link to confirm the update of your password:</p>
-<p>
-  <a
-    href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/reset-password"
-    >Reset password</a
-  >
-</p>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        background: #f5f7fa;
+        color: #000000;
+        font-family: 'Montserrat', sans-serif;
+      }
+
+      .email-page {
+        padding: 3rem 3rem;
+        background: #f5f7fa;
+      }
+
+      .email-card {
+        max-width: 640px;
+        margin: 0 auto;
+        padding: 32px;
+        border-radius: 5px;
+        background: #ffffff;
+      }
+
+      .email-logo {
+        display: block;
+        width: 160px;
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 24px;
+      }
+
+      h2 {
+        font-weight: 700;
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-page">
+      <div class="email-card">
+        <img class="email-logo" src="{{ .SiteURL }}/path.png" alt="PATH logo" />
+        <h2>Reset password</h2>
+
+        <p>Follow this link to confirm the update of your password:</p>
+        <p>
+          <a
+            href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/reset-password"
+            >Reset password</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/supabase/templates/sign-up.html b/supabase/templates/sign-up.html
index e348bc84..416f3537 100644
--- a/supabase/templates/sign-up.html
+++ b/supabase/templates/sign-up.html
@@ -1,8 +1,62 @@
-<h2>Confirm sign-up</h2>
-
-<p>Follow this link to confirm your sign-up:</p>
-<p>
-  <a href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=email"
-    >Confirm sign-up</a
-  >
-</p>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        background: #f5f7fa;
+        color: #000000;
+        font-family: 'Montserrat', sans-serif;
+      }
+
+      .email-page {
+        padding: 3rem 3rem;
+        background: #f5f7fa;
+      }
+
+      .email-card {
+        max-width: 640px;
+        margin: 0 auto;
+        padding: 32px;
+        border-radius: 5px;
+        background: #ffffff;
+      }
+
+      .email-logo {
+        display: block;
+        width: 160px;
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 24px;
+      }
+
+      h2 {
+        font-weight: 700;
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-page">
+      <div class="email-card">
+        <img class="email-logo" src="{{ .SiteURL }}/path.png" alt="PATH logo" />
+        <h2>Confirm sign-up</h2>
+
+        <p>Follow this link to confirm your sign-up:</p>
+        <p>
+          <a href="{{ .SiteURL }}/confirm?token_hash={{ .TokenHash }}&type=email"
+            >Confirm sign-up</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>