Fix dashboard dark mode readability by using theme-aware text colors
- Use and instead of hardcoded zinc colors in EditorDashboardLive - Apply same fix to MicroprintsLive description paragraph - All titles now respect the active theme and remain readable in both light and dark modes
This commit is contained in:
@@ -39,7 +39,7 @@ defmodule FirehoseWeb.EditorDashboardLive do
|
||||
"pb-2 px-1 text-sm font-medium transition-colors",
|
||||
if(@active_tab == :drafts,
|
||||
do: "border-b-2 border-zinc-900 text-zinc-900",
|
||||
else: "text-zinc-500 hover:text-zinc-700"
|
||||
else: "text-base-content/70 hover:text-base-content"
|
||||
)
|
||||
]}
|
||||
>
|
||||
@@ -52,7 +52,7 @@ defmodule FirehoseWeb.EditorDashboardLive do
|
||||
"pb-2 px-1 text-sm font-medium transition-colors",
|
||||
if(@active_tab == :scheduled,
|
||||
do: "border-b-2 border-zinc-900 text-zinc-900",
|
||||
else: "text-zinc-500 hover:text-zinc-700"
|
||||
else: "text-base-content/70 hover:text-base-content"
|
||||
)
|
||||
]}
|
||||
>
|
||||
@@ -61,17 +61,17 @@ defmodule FirehoseWeb.EditorDashboardLive do
|
||||
</div>
|
||||
|
||||
<div id="drafts-tab" class={if(@active_tab != :drafts, do: "hidden")}>
|
||||
<div :if={@drafts == []} class="text-zinc-500 text-sm">No drafts</div>
|
||||
<div :if={@drafts == []} class="text-base-content/70 text-sm">No drafts</div>
|
||||
<div :for={post <- @drafts} class="py-4 border-b border-zinc-100 last:border-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<.link
|
||||
navigate={post_path(post)}
|
||||
class="text-base font-medium text-zinc-900 hover:underline"
|
||||
class="text-base font-medium text-base-content hover:underline"
|
||||
>
|
||||
{post.title}
|
||||
</.link>
|
||||
<div class="text-sm text-zinc-500 mt-1">
|
||||
<div class="text-sm text-base-content/70 mt-1">
|
||||
{post.author} · {Calendar.strftime(post.date, "%b %d, %Y")} ·
|
||||
<span class="text-amber-600 font-medium">Draft</span>
|
||||
</div>
|
||||
@@ -81,17 +81,17 @@ defmodule FirehoseWeb.EditorDashboardLive do
|
||||
</div>
|
||||
|
||||
<div id="scheduled-tab" class={if(@active_tab != :scheduled, do: "hidden")}>
|
||||
<div :if={@scheduled == []} class="text-zinc-500 text-sm">No scheduled posts</div>
|
||||
<div :if={@scheduled == []} class="text-base-content/70 text-sm">No scheduled posts</div>
|
||||
<div :for={post <- @scheduled} class="py-4 border-b border-zinc-100 last:border-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<.link
|
||||
navigate={post_path(post)}
|
||||
class="text-base font-medium text-zinc-900 hover:underline"
|
||||
class="text-base font-medium text-base-content hover:underline"
|
||||
>
|
||||
{post.title}
|
||||
</.link>
|
||||
<div class="text-sm text-zinc-500 mt-1">
|
||||
<div class="text-sm text-base-content/70 mt-1">
|
||||
{post.author} · {Calendar.strftime(post.date, "%b %d, %Y")} ·
|
||||
<span class="text-blue-600 font-medium">
|
||||
{Post.days_until_live(post)} days until live
|
||||
|
||||
@@ -42,7 +42,7 @@ defmodule FirehoseWeb.MicroprintsLive do
|
||||
~H"""
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h1 class="text-2xl font-bold mb-2">Microprints</h1>
|
||||
<p class="text-sm text-zinc-500 mb-6">
|
||||
<p class="text-sm text-base-content/70 mb-6">
|
||||
Visual fingerprints of source code files. Click a line to highlight it.
|
||||
Click a card to expand and view the source.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user