graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revert: remove custom color palette, restore standard Tailwind v4 colors

Browse source
This commit is contained in:
Graham McIntire 2026-06-23 12:29:46 -05:00
parent 253657280b
commit 4bd444f147
17 changed files with 97 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
assets/css/app.css
View file

@ -6,74 +6,6 @@
@source "../js"; @source "../js";
@source "../../lib/towerops_web"; @source "../../lib/towerops_web";
/* ── Custom color palette ── */
@theme {
--color-sweet-salmon-50: #ffe7e6;
--color-sweet-salmon-100: #fed0cd;
--color-sweet-salmon-200: #fea19a;
--color-sweet-salmon-300: #fd7268;
--color-sweet-salmon-400: #fd4235;
--color-sweet-salmon-500: #fc1303;
--color-sweet-salmon-600: #ca0f02;
--color-sweet-salmon-700: #970c02;
--color-sweet-salmon-800: #650801;
--color-sweet-salmon-900: #320401;
--color-sweet-salmon-950: #230300;
--color-desert-sand-50: #faf0eb;
--color-desert-sand-100: #f5e2d6;
--color-desert-sand-200: #ebc5ad;
--color-desert-sand-300: #e0a885;
--color-desert-sand-400: #d68b5c;
--color-desert-sand-500: #cc6e33;
--color-desert-sand-600: #a35829;
--color-desert-sand-700: #7a421f;
--color-desert-sand-800: #522c14;
--color-desert-sand-900: #29160a;
--color-desert-sand-950: #1d0f07;
--color-wheat-50: #faf4eb;
--color-wheat-100: #f5e9d6;
--color-wheat-200: #ebd3ad;
--color-wheat-300: #e0bd85;
--color-wheat-400: #d6a75c;
--color-wheat-500: #cc9133;
--color-wheat-600: #a37429;
--color-wheat-700: #7a571f;
--color-wheat-800: #523a14;
--color-wheat-900: #291d0a;
--color-wheat-950: #1d1407;
--color-cool-steel-50: #f0f3f4;
--color-cool-steel-100: #e1e7ea;
--color-cool-steel-200: #c4cfd4;
--color-cool-steel-300: #a6b7bf;
--color-cool-steel-400: #89a0a9;
--color-cool-steel-500: #6b8894;
--color-cool-steel-600: #566d76;
--color-cool-steel-700: #405159;
--color-cool-steel-800: #2b363b;
--color-cool-steel-900: #151b1e;
--color-cool-steel-950: #0f1315;
--color-cerulean-50: #edf4f8;
--color-cerulean-100: #dbe9f0;
--color-cerulean-200: #b6d3e2;
--color-cerulean-300: #92bcd3;
--color-cerulean-400: #6da6c5;
--color-cerulean-500: #4990b6;
--color-cerulean-600: #3a7392;
--color-cerulean-700: #2c566d;
--color-cerulean-800: #1d3a49;
--color-cerulean-900: #0f1d24;
--color-cerulean-950: #0a141a;
/* Design tokens (replaces daisyUI semantic variables) */
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
}
/* Heroicons plugin */ /* Heroicons plugin */
@plugin "../vendor/heroicons"; @plugin "../vendor/heroicons";
@ -89,14 +21,14 @@
/* Card — replaces daisyUI `card card-body bg-base-100 border-base-200` */ /* Card — replaces daisyUI `card card-body bg-base-100 border-base-200` */
@utility card { @utility card {
border-radius: var(--radius-box); border-radius: 0.5rem;
border: 1px solid var(--color-cool-steel-200); border: 1px solid #e5e7eb;
background: var(--color-cool-steel-50); background: #f9fafb;
padding: 1.5rem; padding: 1.5rem;
} }
[data-theme="dark"] .card { [data-theme="dark"] .card {
border-color: var(--color-cool-steel-700); border-color: #374151;
background: var(--color-cool-steel-900); background: #111827;
} }
/* Badge — replaces daisyUI `badge` */ /* Badge — replaces daisyUI `badge` */
@ -116,7 +48,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
border-radius: var(--radius-field); border-radius: 0.25rem;
padding-inline: 1rem; padding-inline: 1rem;
padding-block: 0.5rem; padding-block: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
@ -124,13 +56,13 @@
line-height: 1.25rem; line-height: 1.25rem;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
background: var(--color-cool-steel-200); background: #e5e7eb;
color: var(--color-cool-steel-900); color: #111827;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
} }
[data-theme="dark"] .btn { [data-theme="dark"] .btn {
background: var(--color-cool-steel-700); background: #374151;
color: var(--color-cool-steel-50); color: #f9fafb;
} }
/* ── Base element styles (replaces daisyUI resets) ── */ /* ── Base element styles (replaces daisyUI resets) ── */
@ -238,12 +170,12 @@ html.sidebar-collapsed [data-sidebar-tooltip]:hover::after {
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }
/* Table row hover highlight */ /* Table row hover highlight */
tbody tr:hover td { background-color: rgba(73, 144, 182, 0.06); } tbody tr:hover td { background-color: rgba(59, 130, 246, 0.04); }
[data-theme="dark"] tbody tr:hover td { background-color: rgba(73, 144, 182, 0.12); } [data-theme="dark"] tbody tr:hover td { background-color: rgba(59, 130, 246, 0.08); }
/* Focus ring styling */ /* Focus ring styling */
:focus-visible { :focus-visible {
outline: 2px solid var(--color-cerulean-500); outline: 2px solid #3b82f6;
outline-offset: 2px; outline-offset: 2px;
} }
@ -253,7 +185,7 @@ a, button, input, select, textarea {
} }
/* Password strength indicator (JS-driven via classes) */ /* Password strength indicator (JS-driven via classes) */
.password-strength-bar.strength-weak { background-color: var(--color-sweet-salmon-500); } .password-strength-bar.strength-weak { background-color: #ef4444; }
.password-strength-bar.strength-fair { background-color: var(--color-wheat-500); } .password-strength-bar.strength-fair { background-color: #eab308; }
.password-strength-bar.strength-good { background-color: #22c55e; } .password-strength-bar.strength-good { background-color: #22c55e; }
.password-strength-bar.strength-strong { background-color: #16a34a; } .password-strength-bar.strength-strong { background-color: #16a34a; }

2
lib/towerops_web/components/breadcrumbs.ex
View file

@ -25,7 +25,7 @@ defmodule ToweropsWeb.Components.Breadcrumbs do
def breadcrumb(assigns) do def breadcrumb(assigns) do
~H""" ~H"""
<div class="flex items-center gap-2 text-sm mb-4 text-cool-steel-600 dark:text-cool-steel-400"> <div class="flex items-center gap-2 text-sm mb-4 text-gray-600 dark:text-gray-400">
<ul> <ul>
<%= for {item, idx} <- Enum.with_index(@items) do %> <%= for {item, idx} <- Enum.with_index(@items) do %>
<li> <li>

4
lib/towerops_web/controllers/user_settings_html/edit.html.heex
View file

@ -20,7 +20,7 @@
</.button> </.button>
</.form> </.form>
<div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" /> <div class="my-4 border-t border-gray-200 dark:border-gray-700" />
<.form :let={f} for={@password_changeset} action={~p"/users/settings"} id="update_password"> <.form :let={f} for={@password_changeset} action={~p"/users/settings"} id="update_password">
<input type="hidden" name="action" value="update_password" /> <input type="hidden" name="action" value="update_password" />
@ -44,7 +44,7 @@
</.button> </.button>
</.form> </.form>
<div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" /> <div class="my-4 border-t border-gray-200 dark:border-gray-700" />
<div> <div>
<h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"> <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">

6
lib/towerops_web/live/activity_feed_live.html.heex
View file

@ -32,7 +32,7 @@
value={@search} value={@search}
placeholder={t("Search by device name, IP, site, or keyword...")} placeholder={t("Search by device name, IP, site, or keyword...")}
phx-debounce="300" phx-debounce="300"
class="w-full pl-10 pr-10 rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500" class="w-full pl-10 pr-10 rounded-field border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
/> />
<button <button
:if={@search != ""} :if={@search != ""}
@ -108,7 +108,7 @@
<button <button
type="button" type="button"
phx-click="clear_search" phx-click="clear_search"
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-2" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
> >
<.icon name="hero-x-mark" class="h-4 w-4" /> Clear search <.icon name="hero-x-mark" class="h-4 w-4" /> Clear search
</button> </button>
@ -285,7 +285,7 @@
<button <button
type="button" type="button"
phx-click="load_more" phx-click="load_more"
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-2" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
> >
<.icon name="hero-arrow-down" class="h-4 w-4" /> Load more events <.icon name="hero-arrow-down" class="h-4 w-4" /> Load more events
</button> </button>

10
lib/towerops_web/live/changelog_live.ex
View file

@ -19,25 +19,25 @@ defmodule ToweropsWeb.ChangelogLive do
> >
<div class="mx-auto max-w-3xl px-4 py-8"> <div class="mx-auto max-w-3xl px-4 py-8">
<h1 class="text-3xl font-bold mb-2">What's New</h1> <h1 class="text-3xl font-bold mb-2">What's New</h1>
<p class="text-cool-steel-900/60 dark:text-cool-steel-100/60 mb-8"> <p class="text-gray-900/60 dark:text-gray-100/60 mb-8">
Latest updates and improvements to TowerOps. Latest updates and improvements to TowerOps.
</p> </p>
<div class="space-y-8"> <div class="space-y-8">
<div <div
:for={entry <- @entries} :for={entry <- @entries}
class="relative pl-8 border-l-2 border-sweet-salmon-500/20 dark:border-sweet-salmon-600/20" class="relative pl-8 border-l-2 border-red-500/20 dark:border-red-600/20"
> >
<div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-sweet-salmon-500 dark:bg-sweet-salmon-600 border-2 border-cool-steel-50 dark:border-cool-steel-900" /> <div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-red-500 dark:bg-red-600 border-2 border-gray-50 dark:border-gray-900" />
<div class="mb-1"> <div class="mb-1">
<span class="badge text-cool-steel-700 dark:text-cool-steel-300 font-mono"> <span class="badge text-gray-700 dark:text-gray-300 font-mono">
{Calendar.strftime(entry.date, "%b %d, %Y")} {Calendar.strftime(entry.date, "%b %d, %Y")}
</span> </span>
</div> </div>
<h2 :if={entry.title} class="text-lg font-semibold mb-2">{entry.title}</h2> <h2 :if={entry.title} class="text-lg font-semibold mb-2">{entry.title}</h2>
<ul <ul
:if={entry.items != []} :if={entry.items != []}
class="list-disc list-inside space-y-1 text-cool-steel-900/80 dark:text-cool-steel-100/80 text-sm" class="list-disc list-inside space-y-1 text-gray-900/80 dark:text-gray-100/80 text-sm"
> >
<li :for={item <- entry.items}>{item}</li> <li :for={item <- entry.items}>{item}</li>
</ul> </ul>

38
lib/towerops_web/live/config_timeline_live.ex
View file

@ -89,10 +89,10 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold">Config Timeline</h1> <h1 class="text-2xl font-bold">Config Timeline</h1>
<p class="text-cool-steel-900/60 dark:text-cool-steel-100/60"> <p class="text-gray-900/60 dark:text-gray-100/60">
<.link <.link
navigate={~p"/devices/#{@device.id}?tab=overview"} navigate={~p"/devices/#{@device.id}?tab=overview"}
class="text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300" class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
> >
{@device.name} {@device.name}
</.link> </.link>
@ -102,7 +102,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<div class="inline-flex"> <div class="inline-flex">
<button <button
:for={r <- ["24h", "7d", "30d"]} :for={r <- ["24h", "7d", "30d"]}
class={"btn text-sm !py-1 !px-3 #{if @range == r, do: "bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700", else: "bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"}"} class={"btn text-sm !py-1 !px-3 #{if @range == r, do: "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700", else: "bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"}"}
phx-click="select_range" phx-click="select_range"
phx-value-range={r} phx-value-range={r}
> >
@ -125,7 +125,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
data-checks={Jason.encode!(@check_data)} data-checks={Jason.encode!(@check_data)}
class="h-64 w-full" class="h-64 w-full"
> >
<div class="flex items-center justify-center h-full text-cool-steel-900/40 dark:text-cool-steel-100/40"> <div class="flex items-center justify-center h-full text-gray-900/40 dark:text-gray-100/40">
Loading chart... Loading chart...
</div> </div>
</div> </div>
@ -138,7 +138,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<h2 class="text-lg font-semibold">Config Changes ({length(@change_events)})</h2> <h2 class="text-lg font-semibold">Config Changes ({length(@change_events)})</h2>
<%= if Enum.empty?(@change_events) do %> <%= if Enum.empty?(@change_events) do %>
<p class="text-cool-steel-900/50 dark:text-cool-steel-100/50 py-4"> <p class="text-gray-900/50 dark:text-gray-100/50 py-4">
No config changes in this period. No config changes in this period.
</p> </p>
<% else %> <% else %>
@ -155,7 +155,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<tbody> <tbody>
<tr <tr
:for={event <- @change_events} :for={event <- @change_events}
class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 cursor-pointer" class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50 cursor-pointer"
phx-click="select_event" phx-click="select_event"
phx-value-id={event.id} phx-value-id={event.id}
> >
@ -165,13 +165,13 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<td> <td>
<span <span
:for={section <- event.sections_changed} :for={section <- event.sections_changed}
class="badge text-cool-steel-700 dark:text-cool-steel-300 mr-1" class="badge text-gray-700 dark:text-gray-300 mr-1"
> >
{section} {section}
</span> </span>
</td> </td>
<td> <td>
<span class={"badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300 #{change_size_class(event.change_size)}"}> <span class={"badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300 #{change_size_class(event.change_size)}"}>
{event.change_size} lines {event.change_size} lines
</span> </span>
</td> </td>
@ -180,7 +180,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
navigate={ navigate={
~p"/devices/#{@device.id}/backups/compare?before=#{event.backup_before_id}&after=#{event.backup_after_id}" ~p"/devices/#{@device.id}/backups/compare?before=#{event.backup_before_id}&after=#{event.backup_after_id}"
} }
class="btn text-xs !py-0.5 !px-2 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700" class="btn text-xs !py-0.5 !px-2 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
> >
View Diff View Diff
</.link> </.link>
@ -195,14 +195,14 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<%!-- Selected event detail modal --%> <%!-- Selected event detail modal --%>
<%= if @selected_event do %> <%= if @selected_event do %>
<div class="card shadow-sm border border-sweet-salmon-500/20 dark:border-sweet-salmon-600/20"> <div class="card shadow-sm border border-red-500/20 dark:border-red-600/20">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="text-lg font-semibold"> <h2 class="text-lg font-semibold">
Change Details — {Calendar.strftime(@selected_event.changed_at, "%b %d, %H:%M UTC")} Change Details — {Calendar.strftime(@selected_event.changed_at, "%b %d, %H:%M UTC")}
</h2> </h2>
<button <button
class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700" class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
phx-click="close_event" phx-click="close_event"
> >
✕ ✕
@ -211,26 +211,26 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
<div> <div>
<span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60"> <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
Sections Changed Sections Changed
</span> </span>
<div class="mt-1"> <div class="mt-1">
<span <span
:for={s <- @selected_event.sections_changed} :for={s <- @selected_event.sections_changed}
class="badge border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 mr-1" class="badge border border-gray-300 bg-transparent dark:border-gray-600 mr-1"
> >
{s} {s}
</span> </span>
<span <span
:if={Enum.empty?(@selected_event.sections_changed)} :if={Enum.empty?(@selected_event.sections_changed)}
class="text-cool-steel-900/40 dark:text-cool-steel-100/40" class="text-gray-900/40 dark:text-gray-100/40"
> >
Unknown Unknown
</span> </span>
</div> </div>
</div> </div>
<div> <div>
<span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60"> <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
Lines Changed Lines Changed
</span> </span>
<p class="font-mono">{@selected_event.change_size}</p> <p class="font-mono">{@selected_event.change_size}</p>
@ -240,7 +240,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
navigate={ navigate={
~p"/devices/#{@device.id}/backups/compare?before=#{@selected_event.backup_before_id}&after=#{@selected_event.backup_after_id}" ~p"/devices/#{@device.id}/backups/compare?before=#{@selected_event.backup_before_id}&after=#{@selected_event.backup_after_id}"
} }
class="btn text-sm !py-1 !px-3 bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700" class="btn text-sm !py-1 !px-3 bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
> >
Full Diff View → Full Diff View →
</.link> </.link>
@ -249,10 +249,10 @@ defmodule ToweropsWeb.ConfigTimelineLive do
<%= if @selected_event.diff_summary do %> <%= if @selected_event.diff_summary do %>
<div class="mt-4"> <div class="mt-4">
<span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60"> <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
Diff Summary Diff Summary
</span> </span>
<pre class="bg-cool-steel-100 dark:bg-cool-steel-800 p-3 rounded-lg mt-1 text-xs overflow-x-auto max-h-48 overflow-y-auto"><code>{@selected_event.diff_summary}</code></pre> <pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg mt-1 text-xs overflow-x-auto max-h-48 overflow-y-auto"><code>{@selected_event.diff_summary}</code></pre>
</div> </div>
<% end %> <% end %>
</div> </div>
@ -284,7 +284,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
@doc false @doc false
def change_size_class(size) when is_integer(size) and size > 50, def change_size_class(size) when is_integer(size) and size > 50,
do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
def change_size_class(size) when is_integer(size) and size > 20, def change_size_class(size) when is_integer(size) and size > 20,
do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"

2
lib/towerops_web/live/coverage_live/form.html.heex
View file

@ -233,7 +233,7 @@
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<.link <.link
navigate={~p"/coverage"} navigate={~p"/coverage"}
class="btn border border-cool-steel-300 bg-transparent dark:border-cool-steel-600" class="btn border border-gray-300 bg-transparent dark:border-gray-600"
> >
{t("Cancel")} {t("Cancel")}
</.link> </.link>

2
lib/towerops_web/live/coverage_live/map.html.heex
View file

@ -12,7 +12,7 @@
<:actions> <:actions>
<.link <.link
navigate={~p"/coverage/list"} navigate={~p"/coverage/list"}
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
> >
<.icon name="hero-list-bullet" class="h-4 w-4" /> {t("List view")} <.icon name="hero-list-bullet" class="h-4 w-4" /> {t("List view")}
</.link> </.link>

4
lib/towerops_web/live/coverage_live/show.html.heex
View file

@ -33,7 +33,7 @@
<button <button
type="button" type="button"
phx-click="toggle_params" phx-click="toggle_params"
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
title={t("Toggle parameters panel")} title={t("Toggle parameters panel")}
> >
<.icon name="hero-adjustments-horizontal" class="h-4 w-4" /> <.icon name="hero-adjustments-horizontal" class="h-4 w-4" />
@ -41,7 +41,7 @@
</button> </button>
<.link <.link
navigate={~p"/coverage/#{@coverage.id}/edit"} navigate={~p"/coverage/#{@coverage.id}/edit"}
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
> >
<.icon name="hero-pencil-square" class="h-4 w-4" /> {t("Edit")} <.icon name="hero-pencil-square" class="h-4 w-4" /> {t("Edit")}
</.link> </.link>

2
lib/towerops_web/live/device_live/show.html.heex
View file

@ -770,7 +770,7 @@
</span> </span>
<span <span
:for={s <- Enum.take(event.sections_changed, 3)} :for={s <- Enum.take(event.sections_changed, 3)}
class="badge text-xs !px-2 !py-0 text-cool-steel-700 dark:text-cool-steel-300" class="badge text-xs !px-2 !py-0 text-gray-700 dark:text-gray-300"
> >
{s} {s}
</span> </span>

4
lib/towerops_web/live/insights_live/index.html.heex
View file

@ -178,7 +178,7 @@
<div class="mt-6" id="insights-list"> <div class="mt-6" id="insights-list">
<%= if @insights == [] do %> <%= if @insights == [] do %>
<div id="empty-state" class="flex items-center justify-center py-8"> <div id="empty-state" class="flex items-center justify-center py-8">
<div class="card shadow-md border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 max-w-md w-full"> <div class="card shadow-md border border-gray-200 dark:border-gray-700 dark:border-white/10 max-w-md w-full">
<div class="items-center text-center"> <div class="items-center text-center">
<div class="rounded-full bg-amber-100 dark:bg-amber-900/40 p-4 mb-2"> <div class="rounded-full bg-amber-100 dark:bg-amber-900/40 p-4 mb-2">
<.icon <.icon
@ -202,7 +202,7 @@
<% end %> <% end %>
</p> </p>
<div class="mt-4 flex gap-2 mt-2"> <div class="mt-4 flex gap-2 mt-2">
<span class="text-sm text-cool-steel-900/50 dark:text-cool-steel-100/50"> <span class="text-sm text-gray-900/50 dark:text-gray-100/50">
{t("Go to your org settings to connect an integration.")} {t("Go to your org settings to connect an integration.")}
</span> </span>
</div> </div>

4
lib/towerops_web/live/org/settings_live.html.heex
View file

@ -1098,14 +1098,14 @@
<%= if @organization.subscription_plan == "free" do %> <%= if @organization.subscription_plan == "free" do %>
<.button <.button
phx-click="upgrade_to_paid" phx-click="upgrade_to_paid"
class="bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700" class="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
> >
{t("Upgrade to Paid Plan")} {t("Upgrade to Paid Plan")}
</.button> </.button>
<% else %> <% else %>
<.button <.button
phx-click="manage_billing" phx-click="manage_billing"
class="bg-cerulean-500 text-white hover:bg-cerulean-600 dark:bg-cerulean-600 dark:hover:bg-cerulean-700" class="bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
> >
{t("Manage Billing")} {t("Manage Billing")}
</.button> </.button>

2
lib/towerops_web/live/site_live/index.html.heex
View file

@ -10,7 +10,7 @@
<:actions> <:actions>
<.link <.link
navigate={~p"/sites-map"} navigate={~p"/sites-map"}
class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5 mr-2" class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5 mr-2"
> >
<.icon name="hero-map" class="h-4 w-4" /> Map View <.icon name="hero-map" class="h-4 w-4" /> Map View
</.link> </.link>

8
lib/towerops_web/live/site_live/show.html.heex
View file

@ -290,7 +290,7 @@
<dd class="mt-0.5"> <dd class="mt-0.5">
<.link <.link
navigate={~p"/sites/#{@site.parent_site.id}"} navigate={~p"/sites/#{@site.parent_site.id}"}
class="text-sm text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300" class="text-sm text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
> >
{@site.parent_site.name} {@site.parent_site.name}
</.link> </.link>
@ -311,7 +311,7 @@
<% end %> <% end %>
</dl> </dl>
<%= if @site.child_sites != [] do %> <%= if @site.child_sites != [] do %>
<div class="mt-4 border-t border-cool-steel-300 dark:border-cool-steel-600 pt-3"> <div class="mt-4 border-t border-gray-300 dark:border-gray-600 pt-3">
<h4 class="text-sm font-semibold text-gray-900 dark:text-white"> <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
{t("Child Sites")} {t("Child Sites")}
</h4> </h4>
@ -319,7 +319,7 @@
<li :for={child <- @site.child_sites}> <li :for={child <- @site.child_sites}>
<.link <.link
navigate={~p"/sites/#{child.id}"} navigate={~p"/sites/#{child.id}"}
class="text-sm text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300" class="text-sm text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
> >
{child.name} {child.name}
</.link> </.link>
@ -396,7 +396,7 @@
</p> </p>
</div> </div>
<span class={[ <span class={[
"badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300", "badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
change_size_color(change.diff_size || 0) change_size_color(change.diff_size || 0)
]}> ]}>
{change_size_label(change.diff_size || 0)} {change_size_label(change.diff_size || 0)}

18
lib/towerops_web/live/trace_live/index.ex
View file

@ -33,7 +33,7 @@ defmodule ToweropsWeb.TraceLive.Index do
~H""" ~H"""
<div <div
:if={@issues != []} :if={@issues != []}
class="border-l-4 border-wheat-500 bg-wheat-50 p-4 text-wheat-900 shadow-sm dark:bg-wheat-900/20 dark:text-wheat-300" class="border-l-4 border-yellow-500 bg-yellow-50 p-4 text-yellow-900 shadow-sm dark:bg-yellow-900/20 dark:text-yellow-300"
> >
<.icon name="hero-exclamation-triangle" class="h-5 w-5" /> <.icon name="hero-exclamation-triangle" class="h-5 w-5" />
<div> <div>
@ -56,14 +56,14 @@ defmodule ToweropsWeb.TraceLive.Index do
:good -> "border-green-200 dark:border-green-800" :good -> "border-green-200 dark:border-green-800"
:warning -> "border-yellow-200 dark:border-yellow-800" :warning -> "border-yellow-200 dark:border-yellow-800"
:bad -> "border-red-200 dark:border-red-800" :bad -> "border-red-200 dark:border-red-800"
_ -> "border-cool-steel-200 dark:border-cool-steel-700" _ -> "border-gray-200 dark:border-gray-700"
end end
assigns = assign(assigns, :color, color) assigns = assign(assigns, :color, color)
~H""" ~H"""
<div class={"flex flex-col bg-cool-steel-50 dark:bg-cool-steel-900 rounded-xl border #{@color} p-4"}> <div class={"flex flex-col bg-gray-50 dark:bg-gray-900 rounded-xl border #{@color} p-4"}>
<div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">{@label}</div> <div class="text-xs font-medium text-gray-500 dark:text-gray-400">{@label}</div>
<div class="text-2xl font-bold">{@value}</div> <div class="text-2xl font-bold">{@value}</div>
</div> </div>
""" """
@ -136,14 +136,13 @@ defmodule ToweropsWeb.TraceLive.Index do
|> push_patch(to: ~p"/trace")} |> push_patch(to: ~p"/trace")}
end end
def type_badge_class(:account), def type_badge_class(:account), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
def type_badge_class(:inventory_item), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400" def type_badge_class(:inventory_item), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
def type_badge_class(:site), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" def type_badge_class(:site), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
def type_badge_class(:device), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400" def type_badge_class(:device), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
def type_badge_class(:access_point), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" def type_badge_class(:access_point), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
def type_badge_class(_), do: "text-cool-steel-700 dark:text-cool-steel-300" def type_badge_class(_), do: "text-gray-700 dark:text-gray-300"
def type_badge_label(:account), do: "Account" def type_badge_label(:account), do: "Account"
def type_badge_label(:inventory_item), do: "Inventory" def type_badge_label(:inventory_item), do: "Inventory"
@ -156,10 +155,9 @@ defmodule ToweropsWeb.TraceLive.Index do
def status_badge_class("active"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" def status_badge_class("active"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
def status_badge_class("suspended"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" def status_badge_class("suspended"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
def status_badge_class("cancelled"), def status_badge_class("cancelled"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
def status_badge_class(_), do: "text-cool-steel-700 dark:text-cool-steel-300" def status_badge_class(_), do: "text-gray-700 dark:text-gray-300"
@doc false @doc false
def device_status_color(:up), do: "text-green-600 dark:text-green-400" def device_status_color(:up), do: "text-green-600 dark:text-green-400"

56
lib/towerops_web/live/trace_live/index.html.heex
View file

@ -21,7 +21,7 @@
<div class="space-y-6"> <div class="space-y-6">
<%!-- Search Bar --%> <%!-- Search Bar --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<.icon name="hero-magnifying-glass" class="h-6 w-6 text-gray-400 flex-shrink-0" /> <.icon name="hero-magnifying-glass" class="h-6 w-6 text-gray-400 flex-shrink-0" />
@ -35,7 +35,7 @@
"Search by customer name, IP address, account ID, serial number, site name, or device name..." "Search by customer name, IP address, account ID, serial number, site name, or device name..."
) )
} }
class="w-full rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500 w-full dark:bg-gray-800 dark:border-white/10 dark:text-white" class="w-full rounded-field border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 w-full dark:bg-gray-800 dark:border-white/10 dark:text-white"
phx-debounce="300" phx-debounce="300"
autofocus autofocus
/> />
@ -43,7 +43,7 @@
<button <button
:if={@query != "" || @trace} :if={@query != "" || @trace}
phx-click="clear" phx-click="clear"
class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700" class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<.icon name="hero-x-mark" class="h-5 w-5" /> Clear <.icon name="hero-x-mark" class="h-5 w-5" /> Clear
</button> </button>
@ -54,19 +54,19 @@
<%!-- Search Results --%> <%!-- Search Results --%>
<div <div
:if={@results != [] && !@trace} :if={@results != [] && !@trace}
class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900" class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
> >
<div class="p-0"> <div class="p-0">
<div class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700 dark:divide-white/10"> <div class="divide-y divide-gray-200 dark:divide-gray-700 dark:divide-white/10">
<button <button
:for={result <- @results} :for={result <- @results}
phx-click="select_result" phx-click="select_result"
phx-value-type={result.type} phx-value-type={result.type}
phx-value-id={result.id} phx-value-id={result.id}
class="w-full flex items-center gap-3 px-4 sm:px-6 py-3 hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5 text-left transition-colors" class="w-full flex items-center gap-3 px-4 sm:px-6 py-3 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5 text-left transition-colors"
> >
<span class={[ <span class={[
"badge text-xs !px-2 !py-0 font-mono bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300", "badge text-xs !px-2 !py-0 font-mono bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
type_badge_class(result.type) type_badge_class(result.type)
]}> ]}>
{type_badge_label(result.type)} {type_badge_label(result.type)}
@ -98,7 +98,7 @@
<%!-- Site Trace View --%> <%!-- Site Trace View --%>
<div :if={@trace && @trace_type == :site} class="space-y-4"> <div :if={@trace && @trace_type == :site} class="space-y-4">
<%!-- Site Info --%> <%!-- Site Info --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2"> <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<.icon name="hero-building-office-2" class="h-5 w-5 text-gray-400" /> <.icon name="hero-building-office-2" class="h-5 w-5 text-gray-400" />
@ -123,7 +123,7 @@
<%!-- Devices at Site --%> <%!-- Devices at Site --%>
<div <div
:if={length(@trace.devices) > 0} :if={length(@trace.devices) > 0}
class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900" class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
> >
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"> <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
@ -141,7 +141,7 @@
<tbody> <tbody>
<tr <tr
:for={device <- @trace.devices} :for={device <- @trace.devices}
class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5" class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5"
> >
<td> <td>
<.link <.link
@ -170,7 +170,7 @@
<%!-- Recent Alerts --%> <%!-- Recent Alerts --%>
<div <div
:if={@trace.alerts != []} :if={@trace.alerts != []}
class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900" class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
> >
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"> <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
@ -179,7 +179,7 @@
<div class="space-y-2"> <div class="space-y-2">
<div <div
:for={alert <- @trace.alerts} :for={alert <- @trace.alerts}
class="flex items-start gap-3 p-2 rounded-lg hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5" class="flex items-start gap-3 p-2 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5"
> >
<span class={"mt-1.5 h-2 w-2 rounded-full flex-shrink-0 #{alert_dot(alert)}"}> <span class={"mt-1.5 h-2 w-2 rounded-full flex-shrink-0 #{alert_dot(alert)}"}>
</span> </span>
@ -219,7 +219,7 @@
<%!-- Subscriber + Connection --%> <%!-- Subscriber + Connection --%>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<%!-- Subscriber Info --%> <%!-- Subscriber Info --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-user" class="h-4 w-4 inline" /> Subscriber <.icon name="hero-user" class="h-4 w-4 inline" /> Subscriber
@ -266,7 +266,7 @@
</div> </div>
<div class="flex items-center gap-2 mt-1"> <div class="flex items-center gap-2 mt-1">
<span class={[ <span class={[
"badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300", "badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
status_badge_class(@trace.subscriber.status) status_badge_class(@trace.subscriber.status)
]}> ]}>
{@trace.subscriber.status || "unknown"} {@trace.subscriber.status || "unknown"}
@ -294,7 +294,7 @@
</div> </div>
<%!-- Connection / Device Info --%> <%!-- Connection / Device Info --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-signal" class="h-4 w-4 inline" /> Connection <.icon name="hero-signal" class="h-4 w-4 inline" /> Connection
@ -342,7 +342,7 @@
</div> </div>
<div <div
:if={@trace.access_point} :if={@trace.access_point}
class="mt-2 pt-2 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10" class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 dark:border-white/10"
> >
<div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1"> <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1">
{t("Preseem AP")} {t("Preseem AP")}
@ -368,7 +368,7 @@
<%!-- QoE Metrics + Peer Impact --%> <%!-- QoE Metrics + Peer Impact --%>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<%!-- QoE Metrics --%> <%!-- QoE Metrics --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-chart-bar" class="h-4 w-4 inline" /> QoE Metrics <.icon name="hero-chart-bar" class="h-4 w-4 inline" /> QoE Metrics
@ -398,7 +398,7 @@
/> />
</div> </div>
<%= if @trace.qoe_metrics.latest_metric do %> <%= if @trace.qoe_metrics.latest_metric do %>
<div class="mt-4 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10"> <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 dark:border-white/10">
<div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"> <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
{t("Latest Metrics")} {t("Latest Metrics")}
</div> </div>
@ -448,7 +448,7 @@
</div> </div>
<%!-- Peer Impact --%> <%!-- Peer Impact --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-users" class="h-4 w-4 inline" /> Peer Impact <.icon name="hero-users" class="h-4 w-4 inline" /> Peer Impact
@ -487,7 +487,7 @@
</div> </div>
<div <div
:if={@trace.peer_impact.peer_aps != []} :if={@trace.peer_impact.peer_aps != []}
class="mt-3 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 dark:border-white/10"
> >
<div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"> <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
{t("Peer APs")} {t("Peer APs")}
@ -523,7 +523,7 @@
</div> </div>
<%!-- Active Alerts --%> <%!-- Active Alerts --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-bell-alert" class="h-4 w-4 inline" /> Recent Alerts <.icon name="hero-bell-alert" class="h-4 w-4 inline" /> Recent Alerts
@ -534,7 +534,7 @@
<span class="text-sm font-medium">No alerts — all clear</span> <span class="text-sm font-medium">No alerts — all clear</span>
</div> </div>
<% else %> <% else %>
<div class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700 dark:divide-white/10"> <div class="divide-y divide-gray-200 dark:divide-gray-700 dark:divide-white/10">
<div <div
:for={alert <- @trace.alerts} :for={alert <- @trace.alerts}
class="py-2 first:pt-0 last:pb-0 flex items-center gap-3" class="py-2 first:pt-0 last:pb-0 flex items-center gap-3"
@ -563,7 +563,7 @@
</span> </span>
<span <span
:if={is_nil(alert.resolved_at)} :if={is_nil(alert.resolved_at)}
class="badge text-xs !px-2 !py-0 bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" class="badge text-xs !px-2 !py-0 bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
> >
active active
</span> </span>
@ -576,7 +576,7 @@
<%!-- Recent Activity: Config Changes + Insights --%> <%!-- Recent Activity: Config Changes + Insights --%>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<%!-- Config Changes — hidden, feature temporarily disabled --%> <%!-- Config Changes — hidden, feature temporarily disabled --%>
<div class="hidden card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="hidden card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-document-text" class="h-4 w-4 inline" /> Config Changes (24h) <.icon name="hero-document-text" class="h-4 w-4 inline" /> Config Changes (24h)
@ -610,7 +610,7 @@
</div> </div>
<%!-- Active Insights --%> <%!-- Active Insights --%>
<div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"> <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
<.icon name="hero-light-bulb" class="h-4 w-4 inline" /> Active Insights <.icon name="hero-light-bulb" class="h-4 w-4 inline" /> Active Insights
@ -649,7 +649,7 @@
<%!-- Inventory Items --%> <%!-- Inventory Items --%>
<div <div
:if={@trace.inventory_items != []} :if={@trace.inventory_items != []}
class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900" class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
> >
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3"> <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
@ -669,7 +669,7 @@
<tbody> <tbody>
<tr <tr
:for={item <- @trace.inventory_items} :for={item <- @trace.inventory_items}
class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50" class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
> >
<td class="font-medium text-gray-900 dark:text-white">{item.name}</td> <td class="font-medium text-gray-900 dark:text-white">{item.name}</td>
<td class="font-mono text-sm">{item.ip_address}</td> <td class="font-mono text-sm">{item.ip_address}</td>
@ -677,7 +677,7 @@
<td class="font-mono text-xs">{item.serial_number}</td> <td class="font-mono text-xs">{item.serial_number}</td>
<td> <td>
<span class={[ <span class={[
"badge text-xs !px-2 !py-0 bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300", "badge text-xs !px-2 !py-0 bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
status_badge_class(item.status) status_badge_class(item.status)
]}> ]}>
{item.status} {item.status}

4
test/towerops_web/live/config_timeline_live_helpers_test.exs
View file

@ -5,10 +5,10 @@ defmodule ToweropsWeb.ConfigTimelineLiveHelpersTest do
describe "change_size_class/1" do describe "change_size_class/1" do
test "> 50 returns error styling" do test "> 50 returns error styling" do
assert "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" == assert "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" ==
ConfigTimelineLive.change_size_class(51) ConfigTimelineLive.change_size_class(51)
assert "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" == assert "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" ==
ConfigTimelineLive.change_size_class(1_000) ConfigTimelineLive.change_size_class(1_000)
end end