From c698a71c3dba8f6e99b8f5dfe79c07638b4e6abc Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Wed, 24 Jan 2024 15:28:08 -0800
Subject: [PATCH] Clean Up Forms Everywhere

---
 apps/zui/src/components/forms.module.css      |  5 --
 .../src/js/components/LakeModals/LakeForm.tsx |  6 +-
 .../components/LakeModals/ViewLakeModal.tsx   | 10 +--
 .../views/histogram-pane/settings-form.tsx    |  6 +-
 .../src/views/session-page/pins/dialog.tsx    |  2 +-
 .../session-page/pins/generic-pin-form.tsx    | 63 +++++++++----------
 6 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/apps/zui/src/components/forms.module.css b/apps/zui/src/components/forms.module.css
index 39f802376c..c2d137b132 100644
--- a/apps/zui/src/components/forms.module.css
+++ b/apps/zui/src/components/forms.module.css
@@ -197,8 +197,3 @@
   flex-direction: column;
   gap: 10px;
 }
-
-.form input[readonly] {
-  border: none;
-  padding: 0 var(--form-border-radius);
-}
diff --git a/apps/zui/src/js/components/LakeModals/LakeForm.tsx b/apps/zui/src/js/components/LakeModals/LakeForm.tsx
index 1b010a1d4c..179cfca654 100644
--- a/apps/zui/src/js/components/LakeModals/LakeForm.tsx
+++ b/apps/zui/src/js/components/LakeModals/LakeForm.tsx
@@ -147,8 +147,8 @@ const LakeForm = ({onClose, lake}: Props) => {
 
   return (
     <form ref={setFormRef} className={forms.form}>
-      <section className={modals.fields}>
-        <div>
+      <section className="stack-1">
+        <div className="field">
           <label>{config.name.label}</label>
           <input
             type="text"
@@ -158,7 +158,7 @@ const LakeForm = ({onClose, lake}: Props) => {
             autoFocus
           />
         </div>
-        <div>
+        <div className="field">
           <label>{config.host.label}</label>
           <input
             type="text"
diff --git a/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx b/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
index b88a3317b6..6cf24c9fa7 100644
--- a/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
+++ b/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
@@ -57,8 +57,8 @@ const ViewLake = ({onClose, onEdit}) => {
     <div className={classNames(forms.form, modals.form)}>
       <H1 className={modals.title}>{name}</H1>
 
-      <section className={forms.fields}>
-        <div>
+      <section className="stack-1">
+        <div className="field">
           <label>Lake URL</label>
           <input
             type="text"
@@ -66,15 +66,15 @@ const ViewLake = ({onClose, onEdit}) => {
             value={port ? [host, port].join(":") : host}
           />
         </div>
-        <div>
+        <div className="field">
           <label>Status</label>
           <input type="text" readOnly value={capitalize(status)} />
         </div>
-        <div>
+        <div className="field">
           <label>Zed Version</label>
           <input type="text" readOnly value={version} />
         </div>
-        <div>
+        <div className="field">
           <label>Pool Count</label>
           <input type="text" readOnly value={poolCount.toString()} />
         </div>
diff --git a/apps/zui/src/views/histogram-pane/settings-form.tsx b/apps/zui/src/views/histogram-pane/settings-form.tsx
index 406b72e342..f26369e7c9 100644
--- a/apps/zui/src/views/histogram-pane/settings-form.tsx
+++ b/apps/zui/src/views/histogram-pane/settings-form.tsx
@@ -43,8 +43,8 @@ export function SettingsForm(props: Props) {
       onSubmit={form.handleSubmit(onSubmit)}
       className={classNames(styles.settingsForm, forms.form)}
     >
-      <section className={forms.fields}>
-        <div>
+      <section className="stack-1">
+        <div className="field">
           <label>Time Field</label>
           <input
             type="text"
@@ -52,7 +52,7 @@ export function SettingsForm(props: Props) {
             placeholder={defaults.timeField}
           />
         </div>
-        <div>
+        <div className="field">
           <label>Color Field</label>
           <input
             type="text"
diff --git a/apps/zui/src/views/session-page/pins/dialog.tsx b/apps/zui/src/views/session-page/pins/dialog.tsx
index 83a75daed1..7271cee854 100644
--- a/apps/zui/src/views/session-page/pins/dialog.tsx
+++ b/apps/zui/src/views/session-page/pins/dialog.tsx
@@ -23,7 +23,7 @@ export type DialogProps = {
 
 const BG = styled.dialog`
   border: none;
-  box-shadow: var(--shadow-medium);
+  box-shadow: var(--shadow-elevation-medium);
   border-radius: 6px;
   background: var(--bg-color);
   color: var(--fg-color);
diff --git a/apps/zui/src/views/session-page/pins/generic-pin-form.tsx b/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
index bdcccd1a72..aabb88f163 100644
--- a/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
+++ b/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
@@ -1,16 +1,7 @@
 import React from "react"
 import {GenericQueryPin} from "src/js/state/Editor/types"
 import {PinFormProps} from "./base-pin"
-import {
-  Actions,
-  Field,
-  getFormData,
-  Input,
-  Label,
-  TextArea,
-  RedLink,
-  ActionsGroup,
-} from "./form-helpers"
+import {getFormData, TextArea, RedLink} from "./form-helpers"
 import forms from "src/components/forms.module.css"
 
 export function GenericPinForm(props: PinFormProps<GenericQueryPin>) {
@@ -21,33 +12,35 @@ export function GenericPinForm(props: PinFormProps<GenericQueryPin>) {
       onSubmit={(e) => props.onSubmit(getFormData(e))}
       onReset={props.onReset}
     >
-      <Field>
-        <Label htmlFor="value">Zed Snippet</Label>
-        <TextArea autoFocus name="value" defaultValue={props.pin.value} />
-      </Field>
-      <Field>
-        <Label htmlFor="label">Label</Label>
-        <Input
-          name="label"
-          placeholder="Same as Zed Snippet text"
-          defaultValue={props.pin.label}
-          style={{width: "66%"}}
-        />
-      </Field>
-      <Actions>
-        <ActionsGroup>
+      <div className="stack-1">
+        <div className="field">
+          <label htmlFor="value">Zed Snippet</label>
+          <TextArea autoFocus name="value" defaultValue={props.pin.value} />
+        </div>
+        <div className="field">
+          <label htmlFor="label">Label</label>
+          <input
+            type="text"
+            name="label"
+            placeholder="Same as Zed Snippet text"
+            defaultValue={props.pin.label}
+            style={{width: "66%"}}
+          />
+        </div>
+
+        <div className="cluster-1 justify:between">
           <RedLink onClick={props.onDelete}>Delete</RedLink>
-        </ActionsGroup>
 
-        <ActionsGroup>
-          <button className={forms.button} type="reset">
-            Cancel
-          </button>
-          <button className={forms.submit} type="submit">
-            OK
-          </button>
-        </ActionsGroup>
-      </Actions>
+          <div className="cluster">
+            <button className={forms.button} type="reset">
+              Cancel
+            </button>
+            <button className={forms.submit} type="submit">
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
     </form>
   )
 }