nikos/dotfiles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

form input style changes

Browse source
This commit is contained in:
Nikos Papadakis 2023-12-13 17:41:46 +02:00
parent 2771a7bcb2
commit 1a21bce0d2
No known key found for this signature in database
GPG key ID: 78871F9905ADFF02
8 changed files with 45 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/tailwind.config.js
View file

@ -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:
//

39
app/lib/prymn_web/components/core_components.ex
View file

@ -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>

2
app/lib/prymn_web/live/server_live/new_server.ex
View file

@ -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>

6
app/lib/prymn_web/live/server_live/show.ex
View file

@ -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

10
app/lib/prymn_web/live/user_forgot_password_live.ex
View file

@ -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

2
app/lib/prymn_web/live/user_login_live.ex
View file

@ -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?

2
app/lib/prymn_web/live/user_registration_live.ex
View file

@ -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?

4
app/lib/prymn_web/live/user_settings_live.ex
View file

@ -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}