Style the new create-group-form

A few general things about JSX and Preact components:

For historical reasons, JSX conventionally uses different names than HTML for some attributes: className instead of class and htmlFor instead of for. Both the JSX and HTML names work in Preact, but the JSX ones are standard
Empty elements should self-close in JSX, like XML but unlike HTML: <div className="foo"/> instead of <div className="foo"></div>
To generate element IDs that are globally unique, use the useId hook:

import { useId } from 'preact/hooks';

function Widget() {
  const fooId = useId();
  return <>
    <label htmlFor={fooId}>Some field</label>
    <input id={fooId}/>
  </>
}

Components are cheap in Preact, both in terms of runtime overhead and boilerplate in the code. Creating small "helper" components to avoid duplication is common practice. For example, the character counter could be extracted like so:

function CharCounter({ value, limit }: { value: number; limit: number }) {
  return (
    <div className="flex">
      <div className="grow" />
      <span className="text-grey-6">
        {value}/{limit}
      </span>
    </div>
  );
}
...
<CharCounter value={0} limit={250}/>

Some notes about styling:

Flexbox will automatically wrap inline children (text, spans etc.) in boxes, so you can omit the unstyled divs around the right-aligned elements.
I think we can "snap" the colors to nearby colors from our palette quite easily: text-brand for red, text-grey-6 for labels / counter / footnote and also the bottom divider, text-grey-7 for the heading. The component library uses more variety for heading sizes and colors than I think it should, so we'll need to tweak that.
For font sizes, I think our existing body fonts have tended to feel a little small. I would suggest text-sm for all the body text and text-xl for the heading. text-sm works out to be 14px by default, which is also GitHub's standard body text size. This is one pixel larger than the 13px that hypothes.is currently uses.

hypothesis / h

Style the new create-group-form #8797