jasterv/spazio-solazzo
1
0
Fork 0
mirror of https://codeberg.org/JasterV/spazio-solazzo.git synced 2026-04-26 18:20:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: simplify styles

Browse source
This commit is contained in:
JasterV 2026-01-17 22:03:50 +01:00
parent e9cd4472f6
commit 8476050c41
9 changed files with 128 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
assets/css/app.css
View file

@ -47,6 +47,11 @@
--color-warning-content: #1a1a1a;
--color-error: oklch(65% 0.22 25);
--color-error-content: #ffffff;
--color-background-dark: #2b1220;
--color-card-dark: #1a3c34;
--color-text-primary-dark: #ffffff;
--color-text-secondary-dark: #d4c5b0;
--color-border-dark: #5e503f;
--radius-selector: 1rem;
--radius-field: 1rem;
--radius-box: 1.5rem;
@ -82,6 +87,11 @@
--color-warning-content: oklch(20% 0.02 45);
--color-error: oklch(58% 0.2 20);
--color-error-content: oklch(96% 0.01 20);
--color-background-light: #ffffff;
--color-card-light: #ffffff;
--color-text-primary-light: #2b1220;
--color-text-secondary-light: #5e503f;
--color-border-light: #f3f4f6;
--radius-selector: 1rem;
--radius-field: 1rem;
--radius-box: 1.5rem;
@ -110,48 +120,9 @@
/* New Design Color Palette - Spazio Solazzo Theme */
@theme {
/* Primary - Spazio Blue from logo */
--color-plum: #ac485a;
--color-plum-light: #b16788;
--color-plum-dark: #2b1220;
--color-sky-accent: #63a5c9;
--color-sky-accent-light: #7fafc9;
/* Supporting Colors */
--color-forest: #1a3c34;
--color-cream: #ffffff;
--color-oak: #d4c5b0;
--color-ash: #f3f4f6;
--color-earth: #5e503f;
/* Light Mode Colors */
--color-background-light: #ffffff;
--color-card-light: #ffffff;
--color-text-primary-light: #2b1220;
--color-text-secondary-light: #5e503f;
--color-border-light: #f3f4f6;
/* Dark Mode Colors */
--color-background-dark: #2b1220;
--color-card-dark: #1a3c34;
--color-text-primary-dark: #ffffff;
--color-text-secondary-dark: #d4c5b0;
--color-border-dark: #5e503f;
/* Typography */
--font-display: "Montserrat", sans-serif;
--font-brand: "Montserrat", sans-serif;
/* Tailwind Color Classes */
--color-plum*: #ac485a;
--color-plum-light*: #b16788;
--color-plum-dark*: #2b1220;
--color-sky-accent*: #63a5c9;
--color-sky-accent-light*: #7fafc9;
--color-earth*: #5e503f;
--color-oak*: #d4c5b0;
--color-forest*: #1a3c34;
--color-ash*: #f3f4f6;
}
/* Global Typography & Styles */
@ -179,28 +150,6 @@ h6 {
font-family: var(--font-display);
}
/* Carousel Styles */
.carousel-container {
width: 100%;
height: 650px;
overflow: hidden;
position: relative;
background-color: white;
}
.carousel-track {
display: flex;
width: 100%;
height: 100%;
}
.carousel-item {
flex: 0 0 100%;
height: 100%;
background-size: cover;
background-position: center;
}
/* Logo Styles */
.hero-logo-img {
max-width: 100%;

4
lib/spazio_solazzo_web/components/core_components.ex
View file

@ -256,7 +256,7 @@ defmodule SpazioSolazzoWeb.CoreComponents do
~H"""
<div class="fieldset mb-2">
<label>
<span :if={@label} class="label mb-1 text-base-content">{@label}</span>
<span :if={@label} class="block text-sm font-medium text-base-content mb-2">{@label}</span>
<textarea
id={@id}
name={@name}
@ -310,7 +310,7 @@ defmodule SpazioSolazzoWeb.CoreComponents do
~H"""
<div class="fieldset mb-2">
<label>
<span :if={@label} class="label mb-1 text-base-content">{@label}</span>
<span :if={@label} class="block text-sm font-medium text-base-content mb-2">{@label}</span>
<input
type={@type}
name={@name}

9
lib/spazio_solazzo_web/components/layouts.ex
View file

@ -39,7 +39,7 @@ defmodule SpazioSolazzoWeb.Layouts do
def app(assigns) do
~H"""
<.app_header current_user={@current_user} title="Spazio Solazzo" icon="hero-sun-solid" />
<.app_header current_user={@current_user} />
<main class="bg-base-100 flex-1 relative transition-colors duration-300">
{render_slot(@inner_block)}
@ -116,9 +116,6 @@ defmodule SpazioSolazzoWeb.Layouts do
"""
end
attr :title, :string, default: nil, doc: "the title shown on the top left of the header"
attr :icon, :string, default: nil, doc: "The icon shown on the top left of the header"
attr :current_user, :map,
default: nil,
doc: "the current authenticated user"
@ -138,14 +135,14 @@ defmodule SpazioSolazzoWeb.Layouts do
<div class="hidden md:flex items-center gap-3">
<.link
navigate={~p"/profile"}
class="btn btn-circle btn-ghost text-primary hover:bg-accent/10"
class="btn btn-circle btn-outline text-primary hover:bg-info/10"
>
<.icon name="hero-user" class="size-6" />
</.link>
<.link
href={~p"/sign-out"}
id="sign-out-link"
class="btn btn-ghost btn-sm text-error hover:bg-error/10"
class="btn btn-outline btn-error btn-sm hover:text-error hover:bg-error/10"
>
Sign Out
</.link>

25
lib/spazio_solazzo_web/live/auth/auth_callback_live.ex
View file

@ -15,6 +15,7 @@ defmodule SpazioSolazzoWeb.AuthCallbackLive do
|> assign(:email, nil)
|> assign(:existing_user?, false)
|> assign(:token, nil)
|> assign(:form, to_form(%{}))
{:ok, socket}
end
@ -46,10 +47,17 @@ defmodule SpazioSolazzoWeb.AuthCallbackLive do
_ -> false
end
form_params = %{
"name" => "",
"phone_number" => "",
"remember_me" => "false"
}
socket
|> assign(:token, token)
|> assign(:email, email)
|> assign(:existing_user?, existing_user?)
|> assign(:form, to_form(form_params))
{:error, _reason} ->
socket
@ -59,23 +67,20 @@ defmodule SpazioSolazzoWeb.AuthCallbackLive do
end
@impl true
def handle_event("sign_in", args, %{assigns: %{token: token}} = socket) do
remember_me = Map.get(args, "remember_me") == "on"
def handle_event("sign_in", user_params, %{assigns: %{token: token}} = socket) do
remember_me = user_params["remember_me"] == "true"
{:noreply,
redirect(socket, to: ~p"/auth/magic/sign-in?token=#{token}&remember_me=#{remember_me}")}
end
@impl true
def handle_event(
"register",
%{"name" => name, "phone_number" => phone_number} = args,
socket
) do
def handle_event("register", user_params, socket) do
%{token: token} = socket.assigns
remember_me = Map.get(args, "remember_me") == "on"
name = String.trim(name)
phone_number = String.trim(phone_number)
name = String.trim(user_params["name"] || "")
phone_number = String.trim(user_params["phone_number"] || "")
remember_me = user_params["remember_me"] == "true"
url =
if phone_number == "" do

112
lib/spazio_solazzo_web/live/auth/auth_callback_live.html.heex
View file

@ -17,7 +17,7 @@
</p>
</div>
<form id="sign-in-form" phx-submit="sign_in" class="space-y-5">
<.form :let={f} for={@form} id="sign-in-form" phx-submit="sign_in" class="space-y-5">
<div class="flex items-center gap-3 p-4 bg-secondary/5 rounded-xl border border-base-200">
<div class="flex-shrink-0">
<.icon name="hero-envelope" class="size-5 text-secondary" />
@ -27,26 +27,21 @@
</span>
</div>
<label class="flex items-start gap-3 cursor-pointer group p-3 rounded-lg hover:bg-base-200 transition-colors">
<input
type="checkbox"
name="remember_me"
id="remember_me"
class="checkbox checkbox-primary"
/>
<span class="text-sm text-base-content leading-tight">
Remember me on this device for 30 days
</span>
</label>
<.input
field={f[:remember_me]}
type="checkbox"
label="Remember me on this device for 30 days"
class="checkbox-primary"
/>
<button
<.button
type="submit"
id="sign-in-button"
class="btn btn-secondary w-full rounded-xl text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
class="btn btn-secondary w-full rounded-xl text-white"
>
Sign In to Your Account
</button>
</form>
</.button>
</.form>
<% else %>
<%!-- New User Registration --%>
<div class="text-center mb-6">
@ -61,7 +56,13 @@
</p>
</div>
<form id="registration-form" phx-submit="register" class="space-y-5">
<.form
:let={f}
for={@form}
id="registration-form"
phx-submit="register"
class="space-y-5"
>
<div class="flex items-center gap-3 p-4 bg-secondary/5 rounded-xl border border-base-200">
<div class="flex-shrink-0">
<.icon name="hero-envelope" class="size-5 text-secondary" />
@ -71,72 +72,41 @@
</span>
</div>
<div>
<label
for="name"
class="block text-sm font-medium text-base-content mb-2"
>
Full Name <span class="text-error">*</span>
</label>
<div class="relative">
<input
type="text"
name="name"
id="name"
required
class="input input-bordered w-full pl-11 pr-4 py-3 rounded-xl focus:border-secondary !outline-none text-base-content"
placeholder="John Doe"
/>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
<.icon name="hero-user" class="size-5 text-base-content/60" />
</div>
</div>
</div>
<.input
field={f[:name]}
type="text"
label="Full Name *"
placeholder="John Doe"
required
/>
<div>
<label
for="phone_number"
class="block text-sm font-medium text-base-content mb-2"
>
Phone Number (Optional)
</label>
<div class="relative">
<input
type="tel"
name="phone_number"
id="phone_number"
class="input input-bordered w-full pl-11 pr-4 py-3 rounded-xl focus:border-secondary !outline-none text-base-content"
placeholder="+39 123456789"
/>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
<.icon name="hero-phone" class="size-5 text-base-content/60" />
</div>
</div>
<.input
field={f[:phone_number]}
type="tel"
label="Phone Number (Optional)"
placeholder="+39 123456789"
/>
<p class="mt-2 text-xs text-neutral">
Your number will only be used to contact you personally about booking issues, never for marketing.
</p>
</div>
<label class="flex items-start gap-3 cursor-pointer group p-3 rounded-lg hover:bg-base-200 transition-colors">
<input
type="checkbox"
name="remember_me"
id="remember_me"
class="checkbox checkbox-primary"
/>
<span class="text-sm text-base-content leading-tight">
Remember me on this device for 30 days
</span>
</label>
<.input
field={f[:remember_me]}
type="checkbox"
label="Remember me on this device for 30 days"
class="checkbox-primary"
/>
<button
<.button
type="submit"
id="register-button"
class="btn btn-secondary w-full rounded-xl text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
class="btn btn-secondary w-full rounded-xl text-white"
>
Create Account
</button>
</form>
</.button>
</.form>
<% end %>
</div>

33
lib/spazio_solazzo_web/live/auth/sign_in_live.html.heex
View file

@ -10,33 +10,20 @@
<div class="bg-base-100 rounded-2xl shadow-2xl border border-base-200 overflow-hidden">
<div class="p-8">
<form phx-submit="request_magic_link" class="space-y-5">
<div>
<label
for="email"
class="block text-sm font-medium text-base-content mb-2"
>
Email Address
</label>
<div class="relative">
<input
type="email"
name="email"
id="email"
value={@email}
required
class="input input-bordered w-full pl-11 pr-4 py-3 rounded-xl focus:border-secondary !outline-none text-base-content"
placeholder="you@example.com"
/>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
<.icon name="hero-envelope" class="size-5 text-base-content/60" />
</div>
</div>
</div>
<.input
type="email"
name="email"
id="email"
label="Email Address"
value={@email}
required
placeholder="you@example.com"
/>
<button
type="submit"
disabled={@loading}
class="btn btn-secondary w-full rounded-xl text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 disabled:cursor-not-allowed disabled:transform-none"
class="btn btn-secondary mt-2 w-full rounded-xl text-white"
>
<%= if @loading do %>
Sending...

84
lib/spazio_solazzo_web/live/booking/booking_form_live_component.ex
View file

@ -59,28 +59,14 @@ defmodule SpazioSolazzoWeb.BookingFormLiveComponent do
phx-target={@myself}
>
<div class="mt-6 space-y-4">
<div>
<label
for="customer_name"
class="block text-sm font-medium text-base-content mb-2"
>
Name <span class="text-error">*</span>
</label>
<div class="relative">
<input
type="text"
name="customer_name"
id="customer_name"
value={@form[:customer_name].value}
required
class="input input-bordered w-full pl-11 pr-4 py-3 rounded-xl focus:border-secondary !outline-none text-base-content"
placeholder="Your full name"
/>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
<.icon name="hero-user" class="size-5 text-base-content/60" />
</div>
</div>
</div>
<.input
name="customer_name"
id="customer_name"
label="Name *"
value={@form[:customer_name].value}
required
placeholder="Your full name"
/>
<div>
<label class="block text-sm font-medium text-base-content mb-2">
@ -96,43 +82,23 @@ defmodule SpazioSolazzoWeb.BookingFormLiveComponent do
</div>
</div>
<div>
<label
for="customer_phone"
class="block text-sm font-medium text-base-content mb-2"
>
Phone (Optional)
</label>
<div class="relative">
<input
type="tel"
name="customer_phone"
id="customer_phone"
value={@form[:customer_phone].value}
class="input input-bordered w-full pl-11 pr-4 py-3 rounded-xl focus:border-secondary !outline-none text-base-content"
placeholder="+39 123456789"
/>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
<.icon name="hero-phone" class="size-5 text-base-content/60" />
</div>
</div>
</div>
<.input
name="customer_phone"
id="customer_phone"
label="Phone (Optional)"
value={@form[:customer_phone].value}
placeholder="+39 123456789"
/>
<div>
<label
for="customer_comment"
class="block text-sm font-medium text-base-content mb-2"
>
Comments (Optional)
</label>
<textarea
name="customer_comment"
id="customer_comment"
placeholder="Any special requests or notes..."
rows="4"
class="textarea textarea-bordered w-full rounded-xl focus:border-secondary resize-none"
>{@form[:customer_comment].value}</textarea>
</div>
<.input
type="textarea"
name="customer_comment"
label="Comments (Optional)"
id="customer_comment"
placeholder="Any special requests or notes..."
value={@form[:customer_comment].value}
rows="4"
/>
</div>
<div class="mt-6 p-4 bg-info/5 border border-info/20 rounded-xl">
@ -159,7 +125,7 @@ defmodule SpazioSolazzoWeb.BookingFormLiveComponent do
<button
type="button"
phx-click={@on_cancel}
class="btn btn-ghost flex-1 rounded-2xl"
class="btn btn-ghost btn-secondary dark:text-white flex-1 rounded-2xl"
>
Cancel
</button>

50
lib/spazio_solazzo_web/live/landing/carousel_live_component.ex
View file

@ -39,43 +39,37 @@ defmodule SpazioSolazzoWeb.CarouselLiveComponent do
def render(assigns) do
~H"""
<div
class={[
"relative w-full overflow-hidden",
@rounded == "2xl" && "rounded-2xl",
@rounded == "3xl" && "rounded-3xl"
]}
class="relative carousel w-full max-h-160"
style={"height: #{@height};"}
>
<div
class="flex h-full transition-transform duration-500 ease-in-out"
style={"transform: translateX(-#{@carousel_index * 100}%);"}
>
<div
:for={image <- @images}
class="w-full flex-shrink-0 bg-cover bg-center"
style={"background-image: url('#{image}');"}
>
<div :for={image <- @images} class="carousel-item w-full">
<img
src={image}
class="w-full object-cover"
/>
</div>
</div>
<%= if length(@images) > 1 do %>
<button
phx-click="carousel_prev"
phx-target={@myself}
aria-label="Previous image"
class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-sm p-2 rounded-full text-white transition-colors"
>
<.icon name="hero-chevron-left" class="w-6 h-6" />
</button>
<button
phx-click="carousel_next"
phx-target={@myself}
aria-label="Next image"
class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-sm p-2 rounded-full text-white transition-colors"
>
<.icon name="hero-chevron-right" class="w-6 h-6" />
</button>
<% end %>
<button
phx-click="carousel_prev"
phx-target={@myself}
aria-label="Previous image"
class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-sm p-2 rounded-full text-white transition-colors"
>
<.icon name="hero-chevron-left" class="w-6 h-6" />
</button>
<button
phx-click="carousel_next"
phx-target={@myself}
aria-label="Next image"
class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-sm p-2 rounded-full text-white transition-colors"
>
<.icon name="hero-chevron-right" class="w-6 h-6" />
</button>
</div>
"""
end

2
lib/spazio_solazzo_web/live/user/profile_live.html.heex
View file

@ -33,7 +33,6 @@
label="Full Name *"
required
placeholder="Enter your full name"
class="input input-bordered w-full rounded-xl focus:border-primary !outline-none text-base-content"
/>
</div>
@ -65,7 +64,6 @@
type="tel"
label="Phone Number"
placeholder="+39 123456789"
class="input input-bordered w-full rounded-xl focus:border-primary !outline-none text-base-content"
/>
</div>
</div>