Adapt core_components table() to dark mode

This commit is contained in:
Thelonius Kort
2023-03-04 23:46:39 +01:00
parent 8a513b1452
commit bacb61252f

View File

@ -464,11 +464,11 @@ defmodule OutlookWeb.CoreComponents do
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th> <th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
</tr> </tr>
</thead> </thead>
<tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"> <tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 dark:border-zinc-500 text-sm leading-6 text-zinc-700 dark:text-zinc-400">
<tr <tr
:for={row <- @rows} :for={row <- @rows}
id={"#{@id}-#{Phoenix.Param.to_param(row)}"} id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
class="relative group hover:bg-zinc-50" class="relative group hover:bg-zinc-50 dark:hover:bg-zinc-800 "
> >
<td <td
:for={{col, i} <- Enum.with_index(@col)} :for={{col, i} <- Enum.with_index(@col)}
@ -476,11 +476,11 @@ defmodule OutlookWeb.CoreComponents do
class={["p-0", @row_click && "hover:cursor-pointer"]} class={["p-0", @row_click && "hover:cursor-pointer"]}
> >
<div :if={i == 0}> <div :if={i == 0}>
<span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" /> <span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800 sm:rounded-l-xl" />
<span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" /> <span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800 sm:rounded-r-xl" />
</div> </div>
<div class="block py-4 pr-6"> <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-zinc-900 dark:text-zinc-300"]}>
<%= render_slot(col, row) %> <%= render_slot(col, row) %>
</span> </span>
</div> </div>
@ -489,7 +489,7 @@ defmodule OutlookWeb.CoreComponents do
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium"> <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
<span <span
:for={action <- @action} :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-zinc-900 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-400"
> >
<%= render_slot(action, row) %> <%= render_slot(action, row) %>
</span> </span>