Clean Up Forms Everywhere

brimdata · Jan 24, 2024 · c698a71 · c698a71
1 parent 4631ef8
commit c698a71
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 52 deletions.
diff --git 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
@@ -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
@@ -57,24 +57,24 @@ 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"
             readOnly
             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
@@ -43,16 +43,16 @@ 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"
             {...form.register("timeField")}
             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
@@ -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
@@ -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>
   )
 }