From 917c97ad61006e05292848670d1eae9baf22cf71 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Mon, 13 Mar 2023 05:44:12 +0100
Subject: [PATCH] replace zinc color with configurable gray color

---
 assets/tailwind.config.js                     |  3 +-
 lib/chiya_web/components/core_components.ex   | 64 +++++++++----------
 .../components/layouts/app.html.heex          | 10 +--
 .../components/layouts/public.html.heex       |  2 +-
 .../components/layouts/root.html.heex         | 12 ++--
 lib/chiya_web/controllers/page_controller.ex  |  1 -
 .../controllers/page_html/channel.html.heex   |  4 +-
 .../controllers/page_html/home.html.heex      |  8 +--
 lib/chiya_web/live/note_show_live.ex          |  2 +-
 9 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index e9cc27b..b22fe5b 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -15,7 +15,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        code: colors.emerald
+        code: colors.emerald,
+        gray: colors.zinc
       }
     },
   },
diff --git a/lib/chiya_web/components/core_components.ex b/lib/chiya_web/components/core_components.ex
index 8359d76..ac2873d 100644
--- a/lib/chiya_web/components/core_components.ex
+++ b/lib/chiya_web/components/core_components.ex
@@ -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) %>
diff --git a/lib/chiya_web/components/layouts/app.html.heex b/lib/chiya_web/components/layouts/app.html.heex
index 28ca73c..44bcf70 100644
--- a/lib/chiya_web/components/layouts/app.html.heex
+++ b/lib/chiya_web/components/layouts/app.html.heex
@@ -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>
diff --git a/lib/chiya_web/components/layouts/public.html.heex b/lib/chiya_web/components/layouts/public.html.heex
index ef86d76..f2daefe 100644
--- a/lib/chiya_web/components/layouts/public.html.heex
+++ b/lib/chiya_web/components/layouts/public.html.heex
@@ -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">
diff --git a/lib/chiya_web/components/layouts/root.html.heex b/lib/chiya_web/components/layouts/root.html.heex
index d0223a2..817a0a3 100644
--- a/lib/chiya_web/components/layouts/root.html.heex
+++ b/lib/chiya_web/components/layouts/root.html.heex
@@ -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>
diff --git a/lib/chiya_web/controllers/page_controller.ex b/lib/chiya_web/controllers/page_controller.ex
index 922a85f..3000dd3 100644
--- a/lib/chiya_web/controllers/page_controller.ex
+++ b/lib/chiya_web/controllers/page_controller.ex
@@ -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
diff --git a/lib/chiya_web/controllers/page_html/channel.html.heex b/lib/chiya_web/controllers/page_html/channel.html.heex
index 2f3c171..c16a3d5 100644
--- a/lib/chiya_web/controllers/page_html/channel.html.heex
+++ b/lib/chiya_web/controllers/page_html/channel.html.heex
@@ -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>
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index ecdd612..77bc933 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -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 %>
diff --git a/lib/chiya_web/live/note_show_live.ex b/lib/chiya_web/live/note_show_live.ex
index 4bf8412..c83fd57 100644
--- a/lib/chiya_web/live/note_show_live.ex
+++ b/lib/chiya_web/live/note_show_live.ex
@@ -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"