form input style changes

app/assets/tailwind.config.js

@@ -14,12 +14,12 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
+        brand: "#aa31f6",
       }
     },
   },
   plugins: [
-    require("@tailwindcss/forms"),
+    // require("@tailwindcss/forms"),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:
     //

app/lib/prymn_web/components/core_components.ex

@@ -189,7 +189,7 @@ defmodule PrymnWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="mt-10 space-y-8 bg-white">
+      <div class="space-y-5">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -227,6 +227,7 @@ defmodule PrymnWeb.CoreComponents do
   attr :id, :any, default: nil
   attr :name, :any
   attr :label, :string, default: nil
+  attr :placeholder, :string, default: nil
   attr :value, :any
 
   attr :type, :string,
@@ -286,18 +287,21 @@ defmodule PrymnWeb.CoreComponents do
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
-      <.label for={@id}><%= @label %></.label>
+    <div class="relative" phx-feedback-for={@name}>
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class={[
+          "peer block px-3 pt-6 pb-2 w-full rounded-xl bg-transparent border",
+          "phx-no-feedback:focus:ring-2 phx-no-feedback:focus:ring-brand"
+        ]}
         multiple={@multiple}
         {@rest}
       >
         <option :if={@prompt} value=""><%= @prompt %></option>
         <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
       </select>
+      <.label errors={@errors} for={@id}><%= @label %></.label>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -326,21 +330,23 @@ defmodule PrymnWeb.CoreComponents do
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
-      <.label for={@id}><%= @label %></.label>
+    <div class="relative" phx-feedback-for={@name}>
       <input
         type={@type}
         name={@name}
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+        placeholder={@placeholder || ""}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
-          @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400"
+          "peer block px-3 pt-6 pb-2 w-full border rounded-xl outline-none appearance-none bg-transparent",
+          "phx-no-feedback:ring-0 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-transparent phx-no-feedback:focus-visible:ring-2 phx-no-feedback:focus-visible:ring-brand",
+          @errors == [] &&
+            "border-zinc-300 focus-visible:ring-2 focus-visible:ring-brand focus-visible:border-transparent",
+          @errors != [] && "border-transparent ring-2 ring-rose-400 focus-visible:ring-rose-400"
         ]}
         {@rest}
       />
+      <.label errors={@errors} for={@id}><%= @label %></.label>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -350,11 +356,20 @@ defmodule PrymnWeb.CoreComponents do
   Renders a label.
   """
   attr :for, :string, default: nil
+  attr :errors, :list, default: []
   slot :inner_block, required: true
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label
+      for={@for}
+      class={[
+        "text-brand absolute top-0 px-3 pt-2 text-sm font-semibold sm:text-xs",
+        "phx-no-feedback:peer-focus:text-brand phx-no-feedback:peer-placeholder-shown:text-zinc-500",
+        @errors == [] && "peer-focus:text-brand peer-placeholder-shown:text-zinc-500",
+        @errors != [] && "text-rose-400 peer-focus:text-rose-400"
+      ]}
+    >
       <%= render_slot(@inner_block) %>
     </label>
     """
@@ -367,7 +382,7 @@ defmodule PrymnWeb.CoreComponents do
 
   def error(assigns) do
     ~H"""
-    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
+    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-400 phx-no-feedback:hidden">
       <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
       <%= render_slot(@inner_block) %>
     </p>

app/lib/prymn_web/live/server_live/new_server.ex

@@ -8,7 +8,7 @@ defmodule PrymnWeb.ServerLive.NewServer do
   def render(assigns) do
     ~H"""
     <div>
-      <.header>
+      <.header class="mb-10">
         Add a new server
         <:subtitle>Connect your server to Prymn!</:subtitle>
       </.header>

app/lib/prymn_web/live/server_live/show.ex

@@ -31,8 +31,8 @@ defmodule PrymnWeb.ServerLive.Show do
           </Button.tertiary>
           <.indicator message={@health.message} />
         </div>
-        <form class="hidden" id="server-name-edit" phx-submit={submit_edit_server_name()}>
-          <input class="rounded-xl" type="text" name="name" value={@server.name} required />
+        <form class="hidden items-center" id="server-name-edit" phx-submit={submit_edit_server_name()}>
+          <input class="outline-none" type="text" name="name" value={@server.name} required />
           <Button.tertiary type="submit" title="Confirm">
             <.icon name="hero-check" />
           </Button.tertiary>
@@ -204,7 +204,7 @@ defmodule PrymnWeb.ServerLive.Show do
 
   defp show_edit_server_name() do
     JS.hide(to: "#server-name")
-    |> JS.show(to: "#server-name-edit")
+    |> JS.show(to: "#server-name-edit", display: "flex")
     |> JS.focus_first(to: "#server-name-edit")
   end
 

app/lib/prymn_web/live/user_forgot_password_live.ex

@@ -7,7 +7,7 @@ defmodule PrymnWeb.UserForgotPasswordLive do
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
-      <.header class="text-center">
+      <.header class="mb-10 text-center">
         Forgot your password?
         <:subtitle>
           Enter your email that your account was registered with and we will
@@ -16,7 +16,13 @@ defmodule PrymnWeb.UserForgotPasswordLive do
       </.header>
 
       <.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
-        <.input field={@form[:email]} type="email" placeholder="Email" required />
+        <.input
+          field={@form[:email]}
+          type="email"
+          label="Email"
+          placeholder="Enter your email address"
+          required
+        />
         <:actions>
           <Button.primary phx-disable-with="Sending..." class="w-full">
             Send password reset instructions

app/lib/prymn_web/live/user_login_live.ex

@@ -5,7 +5,7 @@ defmodule PrymnWeb.UserLoginLive do
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
-      <.header class="text-center">
+      <.header class="mb-10 text-center">
         Sign in to account
         <:subtitle>
           Don't have an account?

app/lib/prymn_web/live/user_registration_live.ex

@@ -8,7 +8,7 @@ defmodule PrymnWeb.UserRegistrationLive do
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
-      <.header class="text-center">
+      <.header class="mb-10 text-center">
         Register for an account
         <:subtitle>
           Already registered?

app/lib/prymn_web/live/user_settings_live.ex

@@ -6,12 +6,12 @@ defmodule PrymnWeb.UserSettingsLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <.header class="text-center">
+    <.header class="mb-10 text-center">
       Account Settings
       <:subtitle>Manage your account email address and password settings</:subtitle>
     </.header>
 
-    <div class="space-y-12 divide-y">
+    <div class="mx-auto max-w-2xl space-y-12 divide-y">
       <div>
         <.simple_form
           for={@email_form}