Field icons

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">
         <DashboardShareButton title={title} code={code} />

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,11 +103,12 @@ 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" />
+            <TriangleAlertIcon className="text-error h-4 w-4" strokeWidth={2} />
           )}
         </label>
         <input

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";
@@ -9,6 +13,7 @@ import DateRangeDrawer from "@/features/event/editor/date-range/drawer";
 import EventTypeSelect from "@/features/event/editor/date-range/event-type-select";
 import DateRangePopover from "@/features/event/editor/date-range/popover";
 import useCheckMobile from "@/lib/hooks/use-check-mobile";
+import { cn } from "@/lib/utils/classname";
 
 export default function DateRangeSelection({
   editing = false,
@@ -21,20 +26,28 @@ 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">
-          Type
+        <label
+          htmlFor="event-type-select"
+          className="flex items-center gap-2 font-bold"
+        >
+          <CalendarsIcon className="h-4 w-4" strokeWidth={2} />
+          Event Type
         </label>
         <EventTypeSelect id="event-type-select" disabled={editing} />
       </div>
-      <div className="flex w-fit flex-col gap-1">
-        <p
-          className={`flex items-center gap-2 font-bold ${errors.dateRange || errors.weekdayRange ? "text-error" : ""}`}
+      <div className="flex w-fit flex-col justify-center gap-1">
+        <div
+          className={cn(
+            "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" />
+            <TriangleAlertIcon className="h-4 w-4" strokeWidth={2} />
           )}
-        </p>
+        </div>
 
         {eventRange?.type === "specific" ? (
           <SpecificDateRangeDisplay

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";
@@ -155,12 +155,15 @@ 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>
+            {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">
               <TimeSelector