Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alt theme (temporary) #46

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Alt theme (temporary) #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f954069
Update map image
abdelaz3r Jan 19, 2024
e974f7a
Update gray shade
abdelaz3r Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 27 additions & 25 deletions lib/forbidden_lands_web/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
def modal(assigns) do
~H"""
<div id={@id} phx-mounted={@show && show_modal(@id)} class="hidden relative z-50">
<div id={"#{@id}-bg"} class="fixed inset-0 transition-opacity bg-zinc-50/90" aria-hidden="true" />
<div id={"#{@id}-bg"} class="fixed inset-0 transition-opacity bg-stone-50/90" aria-hidden="true" />
<div
class="overflow-y-auto fixed inset-0"
aria-labelledby={"#{@id}-title"}
Expand All @@ -65,7 +65,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
phx-window-keydown={hide_modal(@on_cancel, @id)}
phx-key="escape"
phx-click-away={hide_modal(@on_cancel, @id)}
class="hidden relative p-14 bg-white rounded-2xl ring-1 shadow-lg transition shadow-zinc-700/10 ring-zinc-700/10"
class="hidden relative p-14 bg-white rounded-2xl ring-1 shadow-lg transition shadow-stone-700/10 ring-stone-700/10"
>
<div class="absolute right-5 top-6">
<button
Expand All @@ -78,10 +78,10 @@ defmodule ForbiddenLandsWeb.CoreComponents do
</div>
<div id={"#{@id}-content"}>
<header :if={@title != []}>
<h1 id={"#{@id}-title"} class="text-lg font-semibold leading-8 text-zinc-800">
<h1 id={"#{@id}-title"} class="text-lg font-semibold leading-8 text-stone-800">
<%= render_slot(@title) %>
</h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-stone-600">
<%= render_slot(@subtitle) %>
</p>
</header>
Expand All @@ -99,7 +99,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
<.link
:for={cancel <- @cancel}
phx-click={hide_modal(@on_cancel, @id)}
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
class="text-sm font-semibold leading-6 text-stone-900 hover:text-stone-700"
>
<%= render_slot(cancel) %>
</.link>
Expand Down Expand Up @@ -220,7 +220,9 @@ defmodule ForbiddenLandsWeb.CoreComponents do

defp color(:blue), do: "bg-sky-400 hover:bg-sky-500 border-sky-800 hover:border-sky-900 text-sky-900"
defp color(:red), do: "bg-red-400 hover:bg-red-500 border-red-800 hover:border-red-900 text-red-900"
defp color(:gray), do: "bg-slate-200 hover:bg-slate-300 border-slate-400 hover:border-slate-500 text-slate-700"

defp color(:gray),
do: "bg-stone-200 hover:bg-stone-300 border-stone-400 hover:border-stone-500 text-stone-700"

@doc """
Renders an input with label and error messages.
Expand Down Expand Up @@ -272,15 +274,15 @@ defmodule ForbiddenLandsWeb.CoreComponents do
assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end)

~H"""
<label phx-feedback-for={@name} class="flex gap-4 items-center text-sm leading-6 text-slate-600">
<label phx-feedback-for={@name} class="flex gap-4 items-center text-sm leading-6 text-stone-600">
<input type="hidden" name={@name} value="false" />
<input
type="checkbox"
id={@id || @name}
name={@name}
value="true"
checked={@checked}
class="rounded border-sky-300 text-slate-900 focus:ring-sky-900"
class="rounded border-sky-300 text-stone-900 focus:ring-sky-900"
{@rest}
/>
<%= @label %>
Expand All @@ -297,7 +299,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
name={@name}
class={[
"block mt-0.5 p-2 py-2.5 pr-8 w-full bg-white rounded border-2 shadow-sm sm:text-sm focus:ring-4",
"text-slate-900 focus:outline-none focus:border-sky-500 focus:ring-sky-500/20",
"text-stone-900 focus:outline-none focus:border-sky-500 focus:ring-sky-500/20",
input_border(@errors)
]}
multiple={@multiple}
Expand All @@ -320,7 +322,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
name={@name}
class={[
"mt-0.5 block h-40 w-full rounded border-2 p-2",
"text-slate-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
"text-stone-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
"phx-no-feedback:border-sky-500 phx-no-feedback:focus:border-sky-500",
input_border(@errors)
]}
Expand All @@ -343,7 +345,7 @@ defmodule ForbiddenLandsWeb.CoreComponents do
value={@value}
class={[
"mt-0.5 block w-full rounded border-2 p-2",
"text-slate-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
"text-stone-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
"phx-no-feedback:border-sky-500 phx-no-feedback:focus:border-grey-500",
input_border(@errors)
]}
Expand Down Expand Up @@ -410,32 +412,32 @@ defmodule ForbiddenLandsWeb.CoreComponents do
~H"""
<div id={@id} class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
<table class="mt-11 sm:w-full w-[40rem]">
<thead class="leading-6 text-left text-[0.8125rem] text-zinc-500">
<thead class="leading-6 text-left text-[0.8125rem] text-stone-500">
<tr>
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
</tr>
</thead>
<tbody class="relative text-sm leading-6 border-t divide-y divide-zinc-100 border-zinc-200 text-zinc-700">
<tr :for={row <- @rows} id={"#{@id}-#{Phoenix.Param.to_param(row)}"} class="relative group hover:bg-zinc-50">
<tbody class="relative text-sm leading-6 border-t divide-y divide-stone-100 border-stone-200 text-stone-700">
<tr :for={row <- @rows} id={"#{@id}-#{Phoenix.Param.to_param(row)}"} class="relative group hover:bg-stone-50">
<td
:for={{col, i} <- Enum.with_index(@col)}
phx-click={@row_click && @row_click.(row)}
class={["p-0", @row_click && "hover:cursor-pointer"]}
>
<div :if={i == 0}>
<span class="absolute top-0 -left-4 w-4 h-full sm:rounded-l-xl group-hover:bg-zinc-50" />
<span class="absolute top-0 -right-4 w-4 h-full sm:rounded-r-xl group-hover:bg-zinc-50" />
<span class="absolute top-0 -left-4 w-4 h-full sm:rounded-l-xl group-hover:bg-stone-50" />
<span class="absolute top-0 -right-4 w-4 h-full sm:rounded-r-xl group-hover:bg-stone-50" />
</div>
<div class="block py-4 pr-6">
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<span class={["relative", i == 0 && "font-semibold text-stone-900"]}>
<%= render_slot(col, row) %>
</span>
</div>
</td>
<td :if={@action != []} class="p-0 w-14">
<div class="relative py-4 text-sm font-medium text-right whitespace-nowrap">
<span :for={action <- @action} class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
<span :for={action <- @action} class="relative ml-4 font-semibold leading-6 text-stone-900 hover:text-stone-700">
<%= render_slot(action, row) %>
</span>
</div>
Expand Down Expand Up @@ -464,10 +466,10 @@ defmodule ForbiddenLandsWeb.CoreComponents do
def list(assigns) do
~H"""
<div class="mt-14">
<dl class="-my-4 divide-y divide-zinc-100">
<dl class="-my-4 divide-y divide-stone-100">
<div :for={item <- @item} class="flex gap-4 py-4 sm:gap-8">
<dt class="flex-none w-1/4 leading-6 text-[0.8125rem] text-zinc-500"><%= item.title %></dt>
<dd class="text-sm leading-6 text-zinc-700"><%= render_slot(item) %></dd>
<dt class="flex-none w-1/4 leading-6 text-[0.8125rem] text-stone-500"><%= item.title %></dt>
<dd class="text-sm leading-6 text-stone-700"><%= render_slot(item) %></dd>
</div>
</dl>
</div>
Expand Down Expand Up @@ -497,8 +499,8 @@ defmodule ForbiddenLandsWeb.CoreComponents do
JS.show(js,
to: selector,
transition:
{"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100"}
{"transition-all transform ease-out duration-300", "opacity-0 trangray-y-4 sm:trangray-y-0 sm:scale-95",
"opacity-100 trangray-y-0 sm:scale-100"}
)
end

Expand All @@ -507,8 +509,8 @@ defmodule ForbiddenLandsWeb.CoreComponents do
to: selector,
time: 200,
transition:
{"transition-all transform ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
{"transition-all transform ease-in duration-200", "opacity-100 trangray-y-0 sm:scale-100",
"opacity-0 trangray-y-4 sm:trangray-y-0 sm:scale-95"}
)
end

Expand Down
2 changes: 1 addition & 1 deletion lib/forbidden_lands_web/components/generic/icon.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ defmodule ForbiddenLandsWeb.Components.Generic.Icon do

Example:

<.icon name={:arrow_right} class="w-5 h-5 text-gray-600 dark:text-gray-400" />
<.icon name={:arrow_right} class="w-5 h-5 text-stone-600 dark:text-stone-400" />
"""
@spec icon(assigns :: map()) :: Phoenix.LiveView.Rendered.t()
def icon(assigns) do
Expand Down
4 changes: 2 additions & 2 deletions lib/forbidden_lands_web/components/navbar.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ defmodule ForbiddenLandsWeb.Components.Navbar do
@spec navbar(assigns :: map()) :: Phoenix.LiveView.Rendered.t()
def navbar(assigns) do
~H"""
<header class="bg-white text-slate-900 border-b md:border-none py-3 px-2 shadow-md flex justify-between print:hidden">
<header class="bg-white text-stone-900 border-b md:border-none py-3 px-2 shadow-md flex justify-between print:hidden">
<nav class="flex gap-2">
<h1 class="font-bold py-2 px-3 pr-4 border-r text-brand">
<span class="hidden md:inline">
Expand Down Expand Up @@ -51,5 +51,5 @@ defmodule ForbiddenLandsWeb.Components.Navbar do
"""
end

defp link_classes(), do: "py-2 px-2 hover:bg-slate-100 rounded"
defp link_classes(), do: "py-2 px-2 hover:bg-stone-100 rounded"
end
2 changes: 1 addition & 1 deletion lib/forbidden_lands_web/layouts/root.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<%= assigns[:page_title] || "ForbiddenLands" %>
</.live_title>
</head>
<body class="bg-gray-100 text-slate-100 antialiased">
<body class="bg-stone-100 text-stone-100 antialiased">
<%= @inner_content %>
</body>
</html>
2 changes: 1 addition & 1 deletion lib/forbidden_lands_web/live/about.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ defmodule ForbiddenLandsWeb.Live.About do
~H"""
<.navbar />

<section class="bg-white text-slate-900 max-w-screen-md mx-auto md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-2">
<section class="bg-white text-stone-900 max-w-screen-md mx-auto md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-2">
<h1 class="text-brand font-bold text-xl">
<%= dgettext("app", "Welcome!") %>
</h1>
Expand Down
10 changes: 5 additions & 5 deletions lib/forbidden_lands_web/live/admin.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,28 @@ defmodule ForbiddenLandsWeb.Live.Admin do
~H"""
<.navbar />

<div class="bg-white text-slate-900 max-w-screen-md mx-auto min-h-screen md:min-h-fit md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-5">
<div class="bg-white text-stone-900 max-w-screen-md mx-auto min-h-screen md:min-h-fit md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-5">
<div class="grid grid-cols-2 gap-5">
<.link
navigate={~p"/#{Gettext.get_locale()}/start-a-new-adventure"}
class="block p-5 border border-slate-200 rounded hover:bg-slate-100 transition-all"
class="block p-5 border border-stone-200 rounded hover:bg-stone-100 transition-all"
>
<h2 class="font-bold text-xl pb-2">
<%= dgettext("app", "Starting a fresh adventure") %>
</h2>
<p class="text-slate-900/70">
<p class="text-stone-900/70">
<%= dgettext("app", "Create a new adventure with a start date and a name.") %>
</p>
</.link>

<.link
navigate={~p"/#{Gettext.get_locale()}/import-adventure"}
class="block p-5 border border-slate-200 rounded hover:bg-slate-100 transition-all"
class="block p-5 border border-stone-200 rounded hover:bg-stone-100 transition-all"
>
<h2 class="font-bold text-xl pb-2">
<%= dgettext("app", "Import an adventure") %>
</h2>
<p class="text-slate-900/70">
<p class="text-stone-900/70">
<%= dgettext("app", "Import an adventure from the .json export file of another adventure.") %>
</p>
</.link>
Expand Down
2 changes: 1 addition & 1 deletion lib/forbidden_lands_web/live/create_instance.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ defmodule ForbiddenLandsWeb.Live.CreateInstance do
~H"""
<.navbar />

<div class="bg-white text-slate-900 max-w-screen-md mx-auto min-h-screen md:min-h-fit md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-5">
<div class="bg-white text-stone-900 max-w-screen-md mx-auto min-h-screen md:min-h-fit md:my-10 md:shadow-md md:rounded overflow-hidden p-5 space-y-5">
<h1 class="text-2xl font-bold">
<%= dgettext("app", "Create an adventure") %>
</h1>
Expand Down
12 changes: 6 additions & 6 deletions lib/forbidden_lands_web/live/dashboard.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ defmodule ForbiddenLandsWeb.Live.Dashboard do
@impl Phoenix.LiveView
def render(assigns) do
~H"""
<div class="md:grid md:grid-cols-[1fr_400px] font-serif h-screen bg-slate-700 overflow-hidden relative">
<div class="md:grid md:grid-cols-[1fr_400px] font-serif h-screen bg-stone-700 overflow-hidden relative">
<div class="hidden md:block relative overflow-hidden">
<div class="w-full h-full overflow-hidden">
<.image path="map.jpg" alt={dgettext("app", "Map of Forbiddens Land")} class="object-cover h-full w-full" />
<.image path="map-alt.jpg" alt={dgettext("app", "Map of Forbiddens Land")} class="object-cover h-full w-full" />
</div>
<div class={[layer_classes(), layer_classes(@luminosity)]}></div>
<h1 class="flex items-center gap-3 absolute top-4 left-3 py-1 px-2 pr-5 font-bold text-xl drop-shadow-[0_0_5px_rgba(0,0,0,1)]">
Expand All @@ -76,7 +76,7 @@ defmodule ForbiddenLandsWeb.Live.Dashboard do
</div>

<div class="h-screen relative">
<div class="absolute inset-0 flex flex-col bg-slate-800 border-l border-slate-900 shadow-2xl shadow-black/50 z-10">
<div class="absolute inset-0 flex flex-col bg-stone-800 border-l border-stone-900 shadow-2xl shadow-black/50 z-10">
<.header date={@calendar} quarter_shift={@quarter_shift} />
<.timeline instance_id={@instance.id} events={@instance.events} />
<.stronghold stronghold={@instance.stronghold} open?={@stronghold_open?} />
Expand All @@ -90,9 +90,9 @@ defmodule ForbiddenLandsWeb.Live.Dashboard do

defp layer_classes(), do: "backdrop-hue-rotate-[15deg] transition-all duration-500 absolute inset-0"
defp layer_classes(:daylight), do: "shadow-daylight"
defp layer_classes(:ligthish), do: "shadow-ligthish backdrop-contrast-125 bg-slate-900/20"
defp layer_classes(:darkish), do: "shadow-darkish backdrop-contrast-125 bg-slate-900/40"
defp layer_classes(:dark), do: "shadow-dark backdrop-contrast-200 bg-slate-900/70"
defp layer_classes(:ligthish), do: "shadow-ligthish bg-stone-900/20"
defp layer_classes(:darkish), do: "shadow-darkish bg-stone-900/40"
defp layer_classes(:dark), do: "shadow-dark bg-stone-900/70"

@impl Phoenix.LiveView
def handle_event("toggle_stronghold", _params, socket) do
Expand Down
4 changes: 2 additions & 2 deletions lib/forbidden_lands_web/live/dashboard/audio_player.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@ defmodule ForbiddenLandsWeb.Live.Dashboard.AudioPlayer do
<button
phx-click={if(@playing?, do: "pause", else: "play")}
phx-target={@myself}
class="peer transition-all text-slate-100/60 hover:text-slate-100 rounded-full bg-black/20 shadow-2xl shadow-white"
class="peer transition-all text-stone-100/60 hover:text-stone-100 rounded-full bg-black/20 shadow-2xl shadow-white"
>
<.icon name={if(@playing?, do: :pause_circle, else: :play_circle)} class="w-8 h-8" />
</button>

<div
:if={@playing? && @current_music != ""}
class="px-2 py-1 bg-slate-900/60 text-sm rounded transition-all opacity-0 peer-hover:opacity-100 font-sans"
class="px-2 py-1 bg-stone-900/60 text-sm rounded transition-all opacity-0 peer-hover:opacity-100 font-sans"
>
<%= @current_music %>
</div>
Expand Down
8 changes: 4 additions & 4 deletions lib/forbidden_lands_web/live/dashboard/description.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ defmodule ForbiddenLandsWeb.Live.Dashboard.Description do
def description(assigns) do
~H"""
<div class={[
"grid grid-cols-3 absolute w-[1000px] bottom-0 top-0 transition-all duration-500 divide-x divide-slate-900",
"grid grid-cols-3 absolute w-[1000px] bottom-0 top-0 transition-all duration-500 divide-x divide-stone-900",
if(@open?, do: "right-[400px] opacity-100", else: "right-[-1000px] opacity-50")
]}>
<.column partial?={true}>
Expand Down Expand Up @@ -58,9 +58,9 @@ defmodule ForbiddenLandsWeb.Live.Dashboard.Description do

defp column(assigns) do
~H"""
<div class={["h-screen", not @partial? && "overflow-y-scroll bg-slate-800 shadow-2xl shadow-black/50"]}>
<div class={["h-screen", not @partial? && "overflow-y-scroll bg-stone-800 shadow-2xl shadow-black/50"]}>
<div class="flex flex-col justify-end min-h-screen">
<div class={["py-4", @partial? && "bg-slate-800 border-l border-t border-slate-900 shadow-2xl shadow-black/50"]}>
<div class={["py-4", @partial? && "bg-stone-800 border-l border-t border-stone-900 shadow-2xl shadow-black/50"]}>
<%= render_slot(@inner_block) %>
</div>
</div>
Expand All @@ -77,7 +77,7 @@ defmodule ForbiddenLandsWeb.Live.Dashboard.Description do
<h2 :if={render_slot(@inner_block) != []} class="flex items-center gap-2 pt-4 text-xl first-letter:text-2xl font-bold">
<%= render_slot(@inner_block) %>
</h2>
<div class="text-sm font-sans divide-y divide-slate-900/50 text-slate-100/80">
<div class="text-sm font-sans divide-y divide-stone-900/50 text-stone-100/80">
<%= Helper.text_to_raw_html(@content, "py-3") %>
</div>
</div>
Expand Down
Loading