form input style changes
This commit is contained in:
parent
2771a7bcb2
commit
1a21bce0d2
8 changed files with 45 additions and 24 deletions
|
@ -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:
|
||||
//
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue