refactor: consolidate event editor styles

apps/client/src/features/editors/editor-utils/EditorUtils.module.scss

@@ -20,3 +20,20 @@
     outline: 2px solid $gray-1000;
   }
 }
+
+.header {
+  font-size: 1.5rem;
+}
+
+.title {
+  font-size: 1rem;
+  color: $label-gray;
+}
+
+.label {
+  display: block;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  margin-bottom: 0.25rem;
+  max-width: max-content; // prevent label from taking entire row
+}

apps/client/src/features/editors/editor-utils/EditorUtils.tsx

@@ -1,3 +1,4 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { type IconBaseProps } from '@react-icons/all-files/lib';
 
@@ -8,3 +9,16 @@ import style from './EditorUtils.module.scss';
 export function Corner({ className, ...elementProps }: IconBaseProps) {
   return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
 }
+
+export function Title({ children }: { children: ReactNode }) {
+  return <h3 className={style.title}>{children}</h3>;
+}
+
+export function Label({ children, className, ...elementProps }: LabelHTMLAttributes<HTMLLabelElement>) {
+  const classes = cx([style.label, className]);
+  return (
+    <label className={classes} {...elementProps}>
+      {children}
+    </label>
+  );
+}