Migrate more CSS classes to components

assets/css/components.css

@@ -67,12 +67,6 @@
     @apply rounded-full border-2;
   }
 
-  /* Links */
-
-  .link {
-    @apply font-medium underline text-gray-900 hover:no-underline;
-  }
-
   /* Form fields */
 
   .input {
@@ -104,43 +98,6 @@
     @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
   }
 
-  select.input {
-    appearance: none;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljk5OTg5IDQuOTc2NzFMMTAuMTI0OSAwLjg1MTcwOEwxMS4zMDMyIDIuMDMwMDRMNS45OTk4OSA3LjMzMzM3TDAuNjk2NTU1IDIuMDMwMDRMMS44NzQ4OSAwLjg1MTcwOEw1Ljk5OTg5IDQuOTc2NzFaIiBmaWxsPSIjNjE3NThBIi8+Cjwvc3ZnPgo=");
-    background-repeat: no-repeat;
-    background-position: center right 10px;
-    background-size: 10px;
-    padding-right: 28px;
-  }
-
-  .radio {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%23CAD5E0' fill='white' /%3e%3c/svg%3e");
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  .radio:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%233E64FF' fill='white' /%3e%3ccircle cx='10' cy='10' r='6' fill='%233E64FF' /%3e%3c/svg%3e");
-  }
-
-  .checkbox {
-    @apply h-5 w-5 appearance-none border border-gray-300 rounded text-blue-600 cursor-pointer;
-  }
-
-  .checkbox:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-    border-color: transparent;
-    background-color: currentColor;
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
   /* Custom scrollbars */
 
   .tiny-scrollbar::-webkit-scrollbar {

lib/livebook_web/components/confirm.ex

@@ -108,12 +108,16 @@ defmodule LivebookWeb.Confirm do
             />
           </div>
         </div>
-        <label :if={@opt_out_id} class="mt-6 text-gray-700 flex items-center">
+        <div :if={@opt_out_id} class="mt-6">
-          <input class="checkbox mr-3" type="checkbox" name="opt_out_id" value={@opt_out_id} />
+          <.checkbox_field
-          <span class="text-sm">
+            name="opt_out_id"
-            Don't show this message again
+            value={nil}
-          </span>
+            checked_value={@opt_out_id}
-        </label>
+            unchecked_value={nil}
+            label="Don't show this message again"
+            small
+          />
+        </div>
         <div class="mt-8 flex justify-end">
           <div class={["flex gap-2", @danger && "flex-row-reverse"]}>
             <button class="button-base button-outlined-gray" type="button" phx-click={hide_modal(@id)}>

lib/livebook_web/components/form_components.ex

@@ -236,6 +236,8 @@ defmodule LivebookWeb.FormComponents do
     default: "false",
     doc: "when set to `nil`, unchecked value is not sent"
 
+  attr :small, :boolean, default: false
+
   attr :rest, :global
 
   def checkbox_field(assigns) do
@@ -247,14 +249,19 @@ defmodule LivebookWeb.FormComponents do
         <input :if={@unchecked_value} type="hidden" value={@unchecked_value} name={@name} />
         <input
           type="checkbox"
-          class="checkbox shrink-0"
+          class="peer hidden"
           value={@checked_value}
           name={@name}
           id={@id || @name}
           checked={to_string(@value) == @checked_value}
           {@rest}
         />
-        <span :if={@label} class="text-gray-700 flex gap-1 items-center">
+        <div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded">
+          <svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" />
+          </svg>
+        </div>
+        <span :if={@label} class={["text-gray-700 flex gap-1 items-center", @small && "text-sm"]}>
           <%= @label %>
           <.help :if={@help} text={@help} />
         </span>
@@ -289,12 +296,15 @@ defmodule LivebookWeb.FormComponents do
         <label :for={{value, description} <- @options} class="flex items-center gap-2 cursor-pointer">
           <input
             type="radio"
-            class="radio"
+            class="peer hidden"
             name={@name}
             value={value}
             checked={to_string(@value) == value}
             {@rest}
           />
+          <div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-blue-600 text-white peer-checked:text-blue-600 bg-white rounded-full">
+            <div class="w-3 h-3 rounded-full bg-current"></div>
+          </div>
           <span><%= description %></span>
         </label>
       </div>
@@ -423,10 +433,23 @@ defmodule LivebookWeb.FormComponents do
 
     ~H"""
     <.field_wrapper id={@id} name={@name} label={@label} errors={@errors} help={@help}>
-      <select id={@id} name={@name} class={["input", @class]} {@rest}>
+      <div class="block relative">
+        <select
+          id={@id}
+          name={@name}
+          class={[
+            "w-full px-3 py-2 pr-7 appearance-none bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600 phx-form-error:border-red-300",
+            @class
+          ]}
+          {@rest}
+        >
           <option :if={@prompt} value=""><%= @prompt %></option>
           <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
         </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
+          <.remix_icon icon="arrow-down-s-line" />
+        </div>
+      </div>
     </.field_wrapper>
     """
   end

lib/livebook_web/live/home_live/session_list_component.ex

@@ -112,16 +112,17 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
         data-test-session-id={session.id}
       >
         <div id={"#{session.id}-checkbox"} phx-update="ignore">
-          <input
+          <div class="hidden mr-3" data-el-bulk-edit-member>
-            type="checkbox"
+            <.checkbox_field
               name="session_ids[]"
-            value={session.id}
+              value={nil}
+              checked_value={session.id}
+              unchecked_value={nil}
               aria-label={session.notebook_name}
-            class="checkbox hidden mr-3"
-            data-el-bulk-edit-member
               phx-click={JS.dispatch("lb:session_list:on_selection_change")}
             />
           </div>
+        </div>
         <div class="grow flex flex-col items-start">
           <.link
             navigate={~p"/sessions/#{session.id}"}

lib/livebook_web/live/output/input_component.ex

@@ -147,15 +147,14 @@ defmodule LivebookWeb.Output.InputComponent do
 
   defp input_output(%{attrs: %{type: :select}} = assigns) do
     ~H"""
-    <select data-el-input class="input w-60" name="html_value">
+    <div class="w-60">
-      <option
+      <.select_field
-        :for={{{key, label}, idx} <- Enum.with_index(@attrs.options)}
+        name="html_value"
-        value={idx}
+        value={Enum.find_index(@attrs.options, fn {key, _label} -> key == @value end)}
-        selected={@value == key}
+        options={Enum.with_index(@attrs.options, fn {_key, label}, idx -> {label, idx} end)}
-      >
+        data-el-input
-        <%= label %>
+      />
-      </option>
+    </div>
-    </select>
     """
   end