Update persistence and app forms (#1840)

lib/livebook_web/components/form_components.ex

@@ -91,6 +91,7 @@ defmodule LivebookWeb.FormComponents do
   attr :value, :any
   attr :errors, :list, default: []
   attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form"
+  attr :class, :string, default: nil
 
   attr :rest, :global, include: ~w(autocomplete readonly disabled)
 
@@ -105,7 +106,7 @@ defmodule LivebookWeb.FormComponents do
           name={@name}
           id={@id || @name}
           value={Phoenix.HTML.Form.normalize_value("text", @value)}
-          class="input pr-8"
+          class={["input pr-8", @class]}
           {@rest}
         />
       </.with_password_toggle>
@@ -249,7 +250,7 @@ defmodule LivebookWeb.FormComponents do
           checked={to_string(@value) == @checked_value}
           {@rest}
         />
-        <span :if={@label}><%= @label %></span>
+        <span :if={@label} class="text-gray-700"><%= @label %></span>
       </label>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>

lib/livebook_web/live/session_live/app_info_component.ex

@@ -70,7 +70,13 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
               autocomplete="off"
             >
               <div class="flex flex-col space-y-4">
-                <.text_field field={f[:slug]} label="Slug" spellcheck="false" phx-debounce />
+                <.text_field
+                  field={f[:slug]}
+                  label="Slug"
+                  spellcheck="false"
+                  phx-debounce
+                  class="bg-gray-100"
+                />
                 <div class="flex flex-col space-y-1">
                   <.checkbox_field
                     field={f[:access_type]}
@@ -79,7 +85,12 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
                     unchecked_value="public"
                   />
                   <%= if Ecto.Changeset.get_field(@changeset, :access_type) == :protected do %>
-                    <.password_field field={f[:password]} spellcheck="false" phx-debounce />
+                    <.password_field
+                      field={f[:password]}
+                      spellcheck="false"
+                      phx-debounce
+                      class="bg-gray-100"
+                    />
                   <% end %>
                 </div>
                 <.checkbox_field field={f[:show_source]} label="Show source" />

lib/livebook_web/live/session_live/persistence_component.ex

@@ -83,36 +83,37 @@ defmodule LivebookWeb.SessionLive.PersistenceComponent do
             target={{__MODULE__, @id}}
           />
         </div>
+        <div>
+          <.label>File</.label>
+          <div class="whitespace-nowrap text-gray-700 leading-4">
+            <%= normalize_file(@draft_file).path %>
+          </div>
+        </div>
         <form
           phx-change="set_options"
           phx-target={@myself}
           phx-nosubmit
-          class="flex flex-col space-y-4 items-start max-w-full"
+          class="flex flex-col items-start max-w-full"
         >
-          <div class="flex flex-col space-y-4">
-            <.switch_field
+          <div class="flex flex-col space-y-6">
+            <.select_field
+              name="autosave_interval_s"
+              label="Autosave"
+              value={@new_attrs.autosave_interval_s || ""}
+              options={[
+                {"every 5 seconds", "5"},
+                {"every 30 seconds", "30"},
+                {"every minute", "60"},
+                {"every 10 minutes", "600"},
+                {"never", ""}
+              ]}
+            />
+            <.checkbox_field
               name="persist_outputs"
               label="Persist outputs"
               value={@new_attrs.persist_outputs}
             />
-            <div class="flex space-x-2 items-center">
-              <span class="text-gray-700 whitespace-nowrap">Autosave</span>
-              <.select_field
-                name="autosave_interval_s"
-                value={@new_attrs.autosave_interval_s || ""}
-                options={[
-                  {"every 5 seconds", "5"},
-                  {"every 30 seconds", "30"},
-                  {"every minute", "60"},
-                  {"every 10 minutes", "600"},
-                  {"never", ""}
-                ]}
-              />
-            </div>
           </div>
-          <span class="text-gray-700 whitespace-nowrap pt-2">
-            File: <%= normalize_file(@draft_file).path %>
-          </span>
         </form>
       </div>
       <div class="flex justify-between">