From bfed5e057e0649f1f1f93db66d5ec75dccafb87e Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Tue, 23 Jun 2026 14:04:20 -0400
Subject: [PATCH 1/4] Add icons to event editor

---
 .../features/event/editor/advanced-options.tsx  | 16 +++++++++++++---
 .../event/editor/date-range/selector.tsx        | 17 +++++++++++++----
 frontend/src/features/event/editor/editor.tsx   |  7 ++++---
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/features/event/editor/advanced-options.tsx b/frontend/src/features/event/editor/advanced-options.tsx
index a29dfb05..8ec2bdde 100644
--- a/frontend/src/features/event/editor/advanced-options.tsx
+++ b/frontend/src/features/event/editor/advanced-options.tsx
@@ -1,7 +1,12 @@
 import React, { useState } from "react";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronRightIcon, TriangleAlertIcon } from "lucide-react";
+import {
+  ChevronRightIcon,
+  GlobeIcon,
+  LinkIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
 import { useDebouncedCallback } from "use-debounce";
 
 import { useEventContext } from "@/core/event/context";
@@ -79,7 +84,11 @@ function Options({ isEditing = false, errors }: AdvancedOptionsProps) {
   return (
     <>
       <div className="flex flex-col gap-1">
-        <label htmlFor="timezone-select" className="font-bold">
+        <label
+          htmlFor="timezone-select"
+          className="flex items-center gap-2 font-bold"
+        >
+          <GlobeIcon className="h-4 w-4" strokeWidth={2} />
           Timezone
         </label>
         <div>
@@ -94,8 +103,9 @@ function Options({ isEditing = false, errors }: AdvancedOptionsProps) {
       <div className="flex flex-col gap-1">
         <label
           htmlFor="custom-code-input"
-          className="flex justify-between font-bold"
+          className="flex items-center gap-2 font-bold"
         >
+          <LinkIcon className="h-4 w-4" strokeWidth={2} />
           {!isEditing && "Custom"} Event Code
           {errors.customCode && (
             <TriangleAlertIcon className="text-error h-4 w-4" />
diff --git a/frontend/src/features/event/editor/date-range/selector.tsx b/frontend/src/features/event/editor/date-range/selector.tsx
index 9b758edb..adea950e 100644
--- a/frontend/src/features/event/editor/date-range/selector.tsx
+++ b/frontend/src/features/event/editor/date-range/selector.tsx
@@ -1,5 +1,9 @@
 import { parseISO } from "date-fns";
-import { TriangleAlertIcon } from "lucide-react";
+import {
+  CalendarRangeIcon,
+  CalendarsIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
 
 import { useEventContext } from "@/core/event/context";
 import { SpecificDateRange } from "@/core/event/types";
@@ -21,20 +25,25 @@ export default function DateRangeSelection({
   return (
     <div className="contents">
       <div className="flex w-fit flex-col gap-1">
-        <label htmlFor="event-type-select" className="font-bold">
+        <label
+          htmlFor="event-type-select"
+          className="flex items-center gap-2 font-bold"
+        >
+          <CalendarsIcon className="h-4 w-4" strokeWidth={2} />
           Type
         </label>
         <EventTypeSelect id="event-type-select" disabled={editing} />
       </div>
       <div className="flex w-full flex-col justify-center gap-1">
-        <p
+        <div
           className={`flex items-center gap-2 font-bold ${errors.dateRange || errors.weekdayRange ? "text-error" : ""}`}
         >
+          <CalendarRangeIcon className="h-4 w-4" strokeWidth={2} />
           {rangeType === "specific" ? "Possible Dates" : "Possible Days"}
           {(errors.dateRange || errors.weekdayRange) && (
             <TriangleAlertIcon className="text-error h-4 w-4" />
           )}
-        </p>
+        </div>
 
         {eventRange?.type === "specific" ? (
           <SpecificDateRangeDisplay
diff --git a/frontend/src/features/event/editor/editor.tsx b/frontend/src/features/event/editor/editor.tsx
index e75d31af..2a953178 100644
--- a/frontend/src/features/event/editor/editor.tsx
+++ b/frontend/src/features/event/editor/editor.tsx
@@ -2,7 +2,7 @@
 
 import { memo, useState } from "react";
 
-import { TriangleAlertIcon } from "lucide-react";
+import { ClockIcon, TriangleAlertIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import MobileFooterIsland from "@/components/mobile-footer-island";
@@ -141,12 +141,13 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
         <DateRangeSelection editing={type === "edit"} />
 
         <div className="flex flex-col gap-1">
-          <p
+          <div
             className={`flex items-center gap-2 font-bold md:col-start-1 md:row-start-2 ${errors.timeRange ? "text-error" : ""}`}
           >
+            <ClockIcon className="h-4 w-4" strokeWidth={2} />
             Possible Times
             {errors.timeRange && <TriangleAlertIcon className="h-4 w-4" />}
-          </p>
+          </div>
           <div className="flex flex-col gap-2 md:col-start-1 md:row-span-8 md:row-start-3">
             <FormSelectorField label="FROM" htmlFor="from-time-dropdown">
               <TimeSelector

From 31a9bcbd646acab47c2356099cc64b7f2c18d0ef Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Tue, 23 Jun 2026 14:06:36 -0400
Subject: [PATCH 2/4] Change event type label

---
 frontend/src/features/event/editor/date-range/selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/event/editor/date-range/selector.tsx b/frontend/src/features/event/editor/date-range/selector.tsx
index adea950e..db472239 100644
--- a/frontend/src/features/event/editor/date-range/selector.tsx
+++ b/frontend/src/features/event/editor/date-range/selector.tsx
@@ -30,7 +30,7 @@ export default function DateRangeSelection({
           className="flex items-center gap-2 font-bold"
         >
           <CalendarsIcon className="h-4 w-4" strokeWidth={2} />
-          Type
+          Event Type
         </label>
         <EventTypeSelect id="event-type-select" disabled={editing} />
       </div>

From e869f53eb3de3fe8065ef62beda75ca9638fec84 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Tue, 23 Jun 2026 14:08:56 -0400
Subject: [PATCH 3/4] Update warning icon stroke width

---
 frontend/src/features/event/editor/advanced-options.tsx    | 2 +-
 frontend/src/features/event/editor/date-range/selector.tsx | 2 +-
 frontend/src/features/event/editor/editor.tsx              | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/event/editor/advanced-options.tsx b/frontend/src/features/event/editor/advanced-options.tsx
index 8ec2bdde..257adf5e 100644
--- a/frontend/src/features/event/editor/advanced-options.tsx
+++ b/frontend/src/features/event/editor/advanced-options.tsx
@@ -108,7 +108,7 @@ function Options({ isEditing = false, errors }: AdvancedOptionsProps) {
           <LinkIcon className="h-4 w-4" strokeWidth={2} />
           {!isEditing && "Custom"} Event Code
           {errors.customCode && (
-            <TriangleAlertIcon className="text-error h-4 w-4" />
+            <TriangleAlertIcon className="text-error h-4 w-4" strokeWidth={2} />
           )}
         </label>
         <input
diff --git a/frontend/src/features/event/editor/date-range/selector.tsx b/frontend/src/features/event/editor/date-range/selector.tsx
index db472239..470bde88 100644
--- a/frontend/src/features/event/editor/date-range/selector.tsx
+++ b/frontend/src/features/event/editor/date-range/selector.tsx
@@ -41,7 +41,7 @@ export default function DateRangeSelection({
           <CalendarRangeIcon className="h-4 w-4" strokeWidth={2} />
           {rangeType === "specific" ? "Possible Dates" : "Possible Days"}
           {(errors.dateRange || errors.weekdayRange) && (
-            <TriangleAlertIcon className="text-error h-4 w-4" />
+            <TriangleAlertIcon className="text-error h-4 w-4" strokeWidth={2} />
           )}
         </div>
 
diff --git a/frontend/src/features/event/editor/editor.tsx b/frontend/src/features/event/editor/editor.tsx
index 2a953178..6b514fdc 100644
--- a/frontend/src/features/event/editor/editor.tsx
+++ b/frontend/src/features/event/editor/editor.tsx
@@ -146,7 +146,9 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
           >
             <ClockIcon className="h-4 w-4" strokeWidth={2} />
             Possible Times
-            {errors.timeRange && <TriangleAlertIcon className="h-4 w-4" />}
+            {errors.timeRange && (
+              <TriangleAlertIcon className="h-4 w-4" strokeWidth={2} />
+            )}
           </div>
           <div className="flex flex-col gap-2 md:col-start-1 md:row-span-8 md:row-start-3">
             <FormSelectorField label="FROM" htmlFor="from-time-dropdown">

From 82f0c4d1f21ec39822496b2127f62a7d20971851 Mon Sep 17 00:00:00 2001
From: jzgom067 <jzgombic3@gmail.com>
Date: Tue, 23 Jun 2026 14:18:01 -0400
Subject: [PATCH 4/4] Add icons to dashboard event fields

---
 .../features/dashboard/components/event.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/dashboard/components/event.tsx b/frontend/src/features/dashboard/components/event.tsx
index a180ef55..5ac4430e 100644
--- a/frontend/src/features/dashboard/components/event.tsx
+++ b/frontend/src/features/dashboard/components/event.tsx
@@ -1,6 +1,12 @@
 import { MouseEvent, useEffect, useMemo, useRef, useState } from "react";
 
-import { ClockIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import {
+  CalendarRangeIcon,
+  ClockIcon,
+  PencilIcon,
+  Trash2Icon,
+  UsersIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
@@ -103,7 +109,8 @@ export default function DashboardEvent({
     >
       <div className="text-lg font-bold leading-tight">{title}</div>
       <div className="text-sm opacity-50">{code}</div>
-      <div className="mb-2 mt-1">
+      <div className="mb-2 mt-1 flex items-center gap-2">
+        <CalendarRangeIcon className="h-5 w-5" />
         {type === "specific" && (
           <DateRangeRow startDate={start.date} endDate={end.date} />
         )}
@@ -115,8 +122,11 @@ export default function DashboardEvent({
         <ClockIcon className="h-5 w-5" />
         {formatTimeRange(start.time, end.time)}
       </div>
-      <div className="mt-1.5 bg-inherit" ref={participantRowRef}>
-        <ParticipantRow participants={participants} numIcons={numIcons} />
+      <div className="mt-1.5 flex w-full items-center gap-2 bg-inherit">
+        <UsersIcon className="h-5 w-5 shrink-0" />
+        <div className="w-full bg-inherit" ref={participantRowRef}>
+          <ParticipantRow participants={participants} numIcons={numIcons} />
+        </div>
       </div>
       <div data-actions className="mt-2.5 flex items-center gap-2">
         <DashboardCopyButton code={code} />