replace zinc color with configurable gray color
This commit is contained in:
parent
9280cba900
commit
917c97ad61
9 changed files with 53 additions and 53 deletions
|
@ -15,7 +15,8 @@ module.exports = {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
code: colors.emerald
|
||||
code: colors.emerald,
|
||||
gray: colors.zinc
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
@ -110,7 +110,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
phx-remove={hide_modal(@id)}
|
||||
class="relative z-50 hidden"
|
||||
>
|
||||
<div id={"#{@id}-bg"} class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true" />
|
||||
<div id={"#{@id}-bg"} class="fixed inset-0 bg-gray-50/90 transition-opacity" aria-hidden="true" />
|
||||
<div
|
||||
class="fixed inset-0 overflow-y-auto"
|
||||
aria-labelledby={"#{@id}-title"}
|
||||
|
@ -127,7 +127,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
phx-window-keydown={hide_modal(@on_cancel, @id)}
|
||||
phx-key="escape"
|
||||
phx-click-away={hide_modal(@on_cancel, @id)}
|
||||
class="hidden relative rounded-2xl bg-white p-14 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition"
|
||||
class="hidden relative rounded-2xl bg-white p-14 shadow-lg shadow-gray-700/10 ring-1 ring-gray-700/10 transition"
|
||||
>
|
||||
<div class="absolute top-6 right-5">
|
||||
<button
|
||||
|
@ -141,13 +141,13 @@ defmodule ChiyaWeb.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-gray-800">
|
||||
<%= render_slot(@title) %>
|
||||
</h1>
|
||||
<p
|
||||
:if={@subtitle != []}
|
||||
id={"#{@id}-description"}
|
||||
class="mt-2 text-sm leading-6 text-zinc-600"
|
||||
class="mt-2 text-sm leading-6 text-gray-600"
|
||||
>
|
||||
<%= render_slot(@subtitle) %>
|
||||
</p>
|
||||
|
@ -166,7 +166,7 @@ defmodule ChiyaWeb.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-gray-900 hover:text-gray-700"
|
||||
>
|
||||
<%= render_slot(cancel) %>
|
||||
</.link>
|
||||
|
@ -207,7 +207,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
|
||||
role="alert"
|
||||
class={[
|
||||
"fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-zinc-900/5 ring-1",
|
||||
"fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-gray-900/5 ring-1",
|
||||
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
|
||||
@kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
|
||||
]}
|
||||
|
@ -313,7 +313,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
<button
|
||||
type={@type}
|
||||
class={[
|
||||
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
|
||||
"phx-submit-loading:opacity-75 rounded-lg bg-gray-900 hover:bg-gray-700 py-2 px-3",
|
||||
"text-sm font-semibold leading-6 text-white active:text-white/80",
|
||||
@class
|
||||
]}
|
||||
|
@ -373,7 +373,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
|
||||
~H"""
|
||||
<div phx-feedback-for={@name}>
|
||||
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
|
||||
<label class="flex items-center gap-4 text-sm leading-6 text-gray-600">
|
||||
<input type="hidden" name={@name} value="false" />
|
||||
<input
|
||||
type="checkbox"
|
||||
|
@ -381,7 +381,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
name={@name}
|
||||
value="true"
|
||||
checked={@checked}
|
||||
class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
|
||||
class="rounded border-gray-300 text-gray-900 focus:ring-gray-900"
|
||||
{@rest}
|
||||
/>
|
||||
<%= @label %>
|
||||
|
@ -398,7 +398,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
<select
|
||||
id={@id}
|
||||
name={@name}
|
||||
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
|
||||
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
|
||||
multiple={@multiple}
|
||||
{@rest}
|
||||
>
|
||||
|
@ -418,10 +418,10 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
id={@id || @name}
|
||||
name={@name}
|
||||
class={[
|
||||
"mt-2 block min-h-[6rem] w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
|
||||
"text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-4 focus:ring-zinc-800/5 sm:text-sm sm:leading-6",
|
||||
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
|
||||
"border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5",
|
||||
"mt-2 block min-h-[6rem] w-full rounded-lg border-gray-300 py-[7px] px-[11px]",
|
||||
"text-gray-900 focus:border-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-800/5 sm:text-sm sm:leading-6",
|
||||
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
|
||||
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
|
||||
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
|
||||
]}
|
||||
{@rest}
|
||||
|
@ -441,10 +441,10 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
id={@id || @name}
|
||||
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
|
||||
class={[
|
||||
"mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
|
||||
"text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
|
||||
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
|
||||
"border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5",
|
||||
"mt-2 block w-full rounded-lg border-gray-300 py-[7px] px-[11px]",
|
||||
"text-gray-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
|
||||
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
|
||||
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
|
||||
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
|
||||
]}
|
||||
{@rest}
|
||||
|
@ -462,7 +462,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
|
||||
def label(assigns) do
|
||||
~H"""
|
||||
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
|
||||
<label for={@for} class="block text-sm font-semibold leading-6 text-gray-800">
|
||||
<%= render_slot(@inner_block) %>
|
||||
</label>
|
||||
"""
|
||||
|
@ -495,10 +495,10 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
~H"""
|
||||
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
|
||||
<h1 class="text-lg font-semibold leading-8 text-gray-800">
|
||||
<%= render_slot(@inner_block) %>
|
||||
</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-gray-600">
|
||||
<%= render_slot(@subtitle) %>
|
||||
</p>
|
||||
</div>
|
||||
|
@ -541,7 +541,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
~H"""
|
||||
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
|
||||
<table class="mt-11 w-[40rem] sm:w-full">
|
||||
<thead class="text-left text-[0.8125rem] leading-6 text-zinc-500">
|
||||
<thead class="text-left text-[0.8125rem] leading-6 text-gray-500">
|
||||
<tr>
|
||||
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
|
||||
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
|
||||
|
@ -550,27 +550,27 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
<tbody
|
||||
id={@id}
|
||||
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
|
||||
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
|
||||
class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700"
|
||||
>
|
||||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
|
||||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50">
|
||||
<td
|
||||
:for={{col, i} <- Enum.with_index(@col)}
|
||||
phx-click={@row_click && @row_click.(row)}
|
||||
class={["relative p-0", @row_click && "hover:cursor-pointer"]}
|
||||
>
|
||||
<div class="block py-4 pr-6">
|
||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
|
||||
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
|
||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-gray-50 sm:rounded-l-xl" />
|
||||
<span class={["relative", i == 0 && "font-semibold text-gray-900"]}>
|
||||
<%= render_slot(col, @row_item.(row)) %>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :if={@action != []} class="relative p-0 w-14">
|
||||
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
|
||||
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
|
||||
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-gray-50 sm:rounded-r-xl" />
|
||||
<span
|
||||
:for={action <- @action}
|
||||
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="relative ml-4 font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
<%= render_slot(action, @row_item.(row)) %>
|
||||
</span>
|
||||
|
@ -600,10 +600,10 @@ defmodule ChiyaWeb.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-gray-100">
|
||||
<div :for={item <- @item} class="flex gap-4 py-4 sm:gap-8">
|
||||
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-zinc-500"><%= item.title %></dt>
|
||||
<dd class="text-sm leading-6 text-zinc-700"><%= render_slot(item) %></dd>
|
||||
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500"><%= item.title %></dt>
|
||||
<dd class="text-sm leading-6 text-gray-700"><%= render_slot(item) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
@ -625,7 +625,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
<div class="mt-16">
|
||||
<.link
|
||||
navigate={@navigate}
|
||||
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
<.icon name="hero-arrow-left-solid" class="w-3 h-3" />
|
||||
<%= render_slot(@inner_block) %>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between border-b border-zinc-100 py-3">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 py-3">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/">Chiya</a>
|
||||
<p class="rounded-full bg-brand/5 px-2 text-[0.8125rem] font-medium leading-6 text-brand">
|
||||
|
@ -9,25 +9,25 @@
|
|||
<div class="flex items-center gap-4">
|
||||
<.link
|
||||
href={~p"/admin/notes"}
|
||||
class="text-xs font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
Notes
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/channels"}
|
||||
class="text-xs font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
Channels
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/identities"}
|
||||
class="text-xs font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
Identities
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/settings"}
|
||||
class="text-xs font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
||||
>
|
||||
Settings
|
||||
</.link>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between border-b border-zinc-100 py-3">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 py-3">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/">Chiya</a>
|
||||
<p class="rounded-full bg-brand/5 px-2 text-[0.8125rem] font-medium leading-6 text-brand">
|
||||
|
|
|
@ -14,13 +14,13 @@
|
|||
<body class="bg-white antialiased">
|
||||
<ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end bg-black">
|
||||
<%= if @current_user do %>
|
||||
<li class="text-xs leading-6 text-zinc-100">
|
||||
<li class="text-xs leading-6 text-gray-100">
|
||||
<%= @current_user.email %>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/user"}
|
||||
class="text-xs leading-6 text-zinc-100 font-semibold hover:text-zinc-300"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Profile
|
||||
</.link>
|
||||
|
@ -28,7 +28,7 @@
|
|||
<li>
|
||||
<.link
|
||||
href={~p"/admin"}
|
||||
class="text-xs leading-6 text-zinc-100 font-semibold hover:text-zinc-300"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Admin
|
||||
</.link>
|
||||
|
@ -37,7 +37,7 @@
|
|||
<.link
|
||||
href={~p"/user/log_out"}
|
||||
method="delete"
|
||||
class="text-xs leading-6 text-zinc-100 font-semibold hover:text-zinc-300"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Log out
|
||||
</.link>
|
||||
|
@ -46,7 +46,7 @@
|
|||
<li>
|
||||
<.link
|
||||
href={~p"/user/register"}
|
||||
class="text-xs leading-6 text-zinc-100 font-semibold hover:text-zinc-300"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Register
|
||||
</.link>
|
||||
|
@ -54,7 +54,7 @@
|
|||
<li>
|
||||
<.link
|
||||
href={~p"/user/log_in"}
|
||||
class="text-xs leading-6 text-zinc-100 font-semibold hover:text-zinc-300"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Log in
|
||||
</.link>
|
||||
|
|
|
@ -8,7 +8,6 @@ defmodule ChiyaWeb.PageController do
|
|||
|
||||
channel =
|
||||
if settings.home_channel_id != nil do
|
||||
IO.inspect(settings)
|
||||
Chiya.Channels.get_channel_preloaded!(settings.home_channel_id)
|
||||
else
|
||||
nil
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
|
||||
<div class="mx-auto max-w-xl lg:mx-0">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-zinc-900">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-gray-900">
|
||||
<%= @channel.name %>
|
||||
</h1>
|
||||
<p class="mt-4 text-base leading-7 text-zinc-600">
|
||||
<p class="mt-4 text-base leading-7 text-gray-600">
|
||||
<%= @channel.content %>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
|
||||
<div class="mx-auto max-w-xl lg:mx-0">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-zinc-900">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-gray-900">
|
||||
<%= @settings.title %>
|
||||
</h1>
|
||||
<p class="mt-4 text-base leading-7 text-zinc-600">
|
||||
<p class="mt-4 text-base leading-7 text-gray-600">
|
||||
<%= @settings.subtitle %>
|
||||
</p>
|
||||
<div class="w-full mt-6 sm:w-auto">
|
||||
<div class="flex gap-4 text-sm leading-6 text-zinc-700">
|
||||
<div class="flex gap-4 text-sm leading-6 text-gray-700">
|
||||
<%= for identity <- @identities do %>
|
||||
<div>
|
||||
<a
|
||||
rel={identity.rel}
|
||||
href={identity.url}
|
||||
target="_blank"
|
||||
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
|
||||
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-gray-50 hover:text-gray-900"
|
||||
>
|
||||
<.icon name="hero-cube" />
|
||||
<%= identity.name %>
|
||||
|
|
|
@ -41,7 +41,7 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
src={Chiya.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
|
||||
/>
|
||||
</a>
|
||||
<p class="text-center text-xs text-zinc-700">
|
||||
<p class="text-center text-xs text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
phx-click="delete_image"
|
||||
|
|
Loading…
Reference in a new issue