refactor: improve section style and composition

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

@@ -8,7 +8,7 @@
   color: $ui-white;
   transition-property: color;
   transition-duration: $transition-time-action;
-  border-radius: 99px;
+  border-radius: $component-border-radius-full;
 
   // similar styles to ontime-button-subtle
   background-color: $gray-1050;
@@ -27,13 +27,16 @@
 
 .title {
   font-size: 1rem;
-  color: $ui-white;
+  color: $title-gray;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .label {
   display: block;
-  font-size: calc(1rem - 3px);
+  font-size: $aux-text-size;
   color: $label-gray;
-  margin-bottom: 0.25rem;
+  margin-bottom: $element-inner-spacing;
   max-width: max-content; // prevent label from taking entire row
 }

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

@@ -1,4 +1,4 @@
-import type { LabelHTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { type IconBaseProps } from '@react-icons/all-files/lib';
 
@@ -10,8 +10,13 @@ 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 Title({ children, className, ...elementProps }: HTMLAttributes<HTMLHeadingElement>) {
+  const classes = cx([style.title, className]);
+  return (
+    <h3 className={classes} {...elementProps}>
+      {children}
+    </h3>
+  );
 }
 
 export function Label({ children, className, ...elementProps }: LabelHTMLAttributes<HTMLLabelElement>) {