replace zinc color with configurable gray color

This commit is contained in:
Inhji 2023-03-13 05:44:12 +01:00
parent 9280cba900
commit 917c97ad61
9 changed files with 53 additions and 53 deletions

View file

@ -15,7 +15,8 @@ module.exports = {
theme: {
extend: {
colors: {
code: colors.emerald
code: colors.emerald,
gray: colors.zinc
}
},
},

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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