Deployment and lifecycle management for Nix
server/ui: dark mode support, likely with gaps
+44
-26
+21
-17
lib/sower_web/components/core_components.ex
+21
-17
lib/sower_web/components/core_components.ex
···
225
225
<button
226
226
type={@type}
227
227
class={[
228
-
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
228
+
"phx-submit-loading:opacity-75 bg-zinc-900 dark:bg-zinc-50 hover:bg-zinc-700 dark:hover:bg-zinc-300 py-2 px-3",
229
229
"text-sm font-semibold leading-6 text-white active:text-white/80",
230
230
@class
231
231
]}
···
301
301
302
302
~H"""
303
303
<div phx-feedback-for={@name}>
304
-
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
304
+
<label class="flex items-center gap-4 text-sm leading-6">
305
305
<input type="hidden" name={@name} value="false" />
306
306
<input
307
307
type="checkbox"
···
309
309
name={@name}
310
310
value="true"
311
311
checked={@checked}
312
-
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
312
+
class="rounded border-zinc-300 dark:border-zinc-700 focus:ring-0"
313
313
{@rest}
314
314
/>
315
315
<%= @label %>
···
389
389
390
390
def label(assigns) do
391
391
~H"""
392
-
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
392
+
<label for={@for} class="block text-sm font-semibold leading-6">
393
393
<%= render_slot(@inner_block) %>
394
394
</label>
395
395
"""
···
422
422
~H"""
423
423
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
424
424
<div>
425
-
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
425
+
<h1 class="text-lg font-semibold leading-8">
426
426
<%= render_slot(@inner_block) %>
427
427
</h1>
428
-
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
428
+
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
429
429
<%= render_slot(@subtitle) %>
430
430
</p>
431
431
</div>
···
468
468
~H"""
469
469
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
470
470
<table class="w-[40rem] mt-11 sm:w-full">
471
-
<thead class="text-sm text-left leading-6 text-zinc-500">
471
+
<thead class="text-sm text-left leading-6 text-zinc-500 dark:text-zinc-400">
472
472
<tr>
473
473
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
474
474
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
···
477
477
<tbody
478
478
id={@id}
479
479
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
480
-
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
480
+
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6"
481
481
>
482
-
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
482
+
<tr
483
+
:for={row <- @rows}
484
+
id={@row_id && @row_id.(row)}
485
+
class="group hover:bg-zinc-50 dark:hover:bg-zinc-800"
486
+
>
483
487
<td
484
488
:for={{col, i} <- Enum.with_index(@col)}
485
489
phx-click={@row_click && @row_click.(row)}
486
490
class={["relative p-0", @row_click && "hover:cursor-pointer"]}
487
491
>
488
492
<div class="block py-4 pr-6">
489
-
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
490
-
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
493
+
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800" />
494
+
<span class={["relative", i == 0 && "font-semibold"]}>
491
495
<%= render_slot(col, @row_item.(row)) %>
492
496
</span>
493
497
</div>
494
498
</td>
495
499
<td :if={@action != []} class="relative w-14 p-0">
496
500
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
497
-
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
501
+
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800" />
498
502
<span
499
503
:for={action <- @action}
500
-
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
504
+
class="relative ml-4 font-semibold leading-6 hover:text-zinc-700 dark:hover:text-zinc-300"
501
505
>
502
506
<%= render_slot(action, @row_item.(row)) %>
503
507
</span>
···
527
531
def list(assigns) do
528
532
~H"""
529
533
<div class="mt-14">
530
-
<dl class="-my-4 divide-y divide-zinc-100">
534
+
<dl class="-my-4 divide-y divide-zinc-100 dark:divide-zinc-800">
531
535
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
532
-
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
533
-
<dd class="text-zinc-700"><%= render_slot(item) %></dd>
536
+
<dt class="w-1/4 flex-none"><%= item.title %></dt>
537
+
<dd class="text-zinc-700 dark:text-zinc-300"><%= render_slot(item) %></dd>
534
538
</div>
535
539
</dl>
536
540
</div>
···
552
556
<div class="mt-16">
553
557
<.link
554
558
navigate={@navigate}
555
-
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
559
+
class="text-sm font-semibold leading-6 hover:text-zinc-700 dark:hover:text-zinc-300"
556
560
>
557
561
<.icon name="hero-arrow-left-solid" class="h-3 w-3" />
558
562
<%= render_slot(@inner_block) %>
+20
-5
lib/sower_web/components/layouts/app.html.heex
+20
-5
lib/sower_web/components/layouts/app.html.heex
···
1
1
<header class="px-4 sm:px-6 lg:px-8">
2
-
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm font-semibold">
2
+
<div class="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-700 py-3 text-sm font-semibold">
3
3
<div class="flex items-center gap-4">
4
-
<a href="/" class="hover:text-zinc-700">
4
+
<a href="/" class="hover:text-zinc-700 dark:hover:text-zinc-50 dark:hover:underline">
5
5
Sower
6
6
</a>
7
-
<.link navigate={~p"/seeds"}>Seeds</.link>
8
-
<.link navigate={~p"/trees"}>Trees</.link>
9
-
<.link navigate={~p"/inputs/repos"}>Repos</.link>
7
+
<.link
8
+
navigate={~p"/seeds"}
9
+
class="hover:text-zinc-700 dark:hover:text-zinc-50 dark:hover:underline"
10
+
>
11
+
Seeds
12
+
</.link>
13
+
<.link
14
+
navigate={~p"/trees"}
15
+
class="hover:text-zinc-700 dark:hover:text-zinc-50 dark:hover:underline"
16
+
>
17
+
Trees
18
+
</.link>
19
+
<.link
20
+
navigate={~p"/inputs/repos"}
21
+
class="hover:text-zinc-700 dark:hover:text-zinc-50 dark:hover:underline"
22
+
>
23
+
Repos
24
+
</.link>
10
25
</div>
11
26
</div>
12
27
</header>
+1
-1
lib/sower_web/components/layouts/root.html.heex
+1
-1
lib/sower_web/components/layouts/root.html.heex
+2
-3
lib/sower_web/live/seed_live/show.html.heex
+2
-3
lib/sower_web/live/seed_live/show.html.heex
···
1
1
<.header>
2
-
<%= @seed.type %>/<%= @seed.name %>@<%= @seed.id %>
2
+
<%= @seed.name %> @ <%= @seed.id %>
3
+
<:subtitle><%= @seed.type %></:subtitle>
3
4
</.header>
4
5
5
6
<.list>
6
-
<:item title="name"><%= @seed.name %></:item>
7
-
<:item title="type"><%= @seed.type %></:item>
8
7
<:item title="branch"><%= @seed.branch %></:item>
9
8
<:item title="repository">
10
9
<.link navigate={~p"/inputs/repos/#{@seed.repository.id}"}><%= @seed.repository.url %></.link>