New UI tweaks (#1759)

This PR is a little hard to read due to the changes.

Included in this PR:
- Move away from mixing css and tailwind as much as possible, at least
for now (reduces confusion about what is overriding what)
- Move to using Flex instead of Grid for the app layout as the topbar
needed to move into the liveview template based on the design
- Fix a bunch of color and alignment issues when comparing to the
design.
- Change the icon in the table header based on the sort order, and use
hover to indicate which other headers can be used for sorting
- Use 'sidebar hints' for selecting the active tab (This is used by the
old UI, along with path comparisons, and is more reliable.)
- Improve sidebar hover state and gradients 
- Improvements to the devices pagination UI.
- Don't show any of the pagination buttons if there is just 1 page of
devices
  - Only show the total pages when the last page isn't next to it
- And set the next page button to invisible if page number is the same
as total pages (invisible keeps its place in the dom)

<img width="1624" alt="Screenshot 2025-01-14 at 11 37 06 AM"
src="https://github.com/user-attachments/assets/8c407043-68a2-4737-bf36-2ca3a9b1b56b"
/>

<img width="1624" alt="Screenshot 2025-01-14 at 11 37 23 AM"
src="https://github.com/user-attachments/assets/15e2d713-f77a-438b-a1e2-2fa0520c1fcb"
/>

<img width="378" alt="Screenshot 2025-01-14 at 11 39 20 AM"
src="https://github.com/user-attachments/assets/040b75b0-0d4d-40c1-9ffe-84d9f85977fc"
/>

<img width="318" alt="Screenshot 2025-01-14 at 11 39 42 AM"
src="https://github.com/user-attachments/assets/38bca32c-df69-49a9-985d-876c387347ad"
/>

assets/tailwind.config.js

@@ -12,6 +12,12 @@ export default {
       fontFamily: {
         sans: ["'Inter', sans-serif", ...defaultTheme.fontFamily.sans]
       },
+      backgroundImage: theme => ({
+        "sidebar-item-hover":
+          "linear-gradient(90deg, rgba(63, 63, 70, 0.24) 0%, rgba(63, 63, 70, 0.48) 100%)",
+        "sidebar-item-selected":
+          "linear-gradient(90deg, rgba(99, 102, 241, 0) 50%, rgba(99, 102, 241, 0.08) 100%), linear-gradient(90deg, rgba(63, 63, 70, 0.24) 0%, rgba(63, 63, 70, 0.48) 100%)"
+      }),
       colors: {
         base: {
           50: "#fafafa",
@@ -29,6 +35,10 @@ export default {
         purple: {
           600: "#6366F1"
         }
+      },
+      boxShadow: {
+        "filter-slider":
+          "-16px 0px 32px -4px #141417, 0px 4px 4px -4px #141417;"
       }
     }
   },

assets/ui-rework/app.css

@@ -1,52 +1,23 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
-@import 'highlight.js/styles/stackoverflow-light.css';
-@import 'leaflet/dist/leaflet.css';
-@import 'leaflet.markercluster/dist/MarkerCluster.css';
-@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+@import "highlight.js/styles/stackoverflow-light.css";
+@import "leaflet/dist/leaflet.css";
+@import "leaflet.markercluster/dist/MarkerCluster.css";
+@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 
 @layer components {
   body {
     overflow-x: hidden;
   }
-  .sidebar-item-selected {
-    @apply font-medium text-[#FAFAFA];
-    box-shadow: inset -1px 0 0 0 #6366f1;
-    background: linear-gradient(
-        to right,
-        rgb(39 39 42 / 30%),
-        rgb(39 39 42 / 72%)
-      ),
-      linear-gradient(to right, rgb(99 102 241 / 0%), rgb(99 102 241 / 10%));
-  }
-
-  .base-grid {
-    display: grid;
-    grid-template-columns: [start] 264px [body-start] auto [body-end] 264px [end];
-    grid-template-rows: [top] 56px [body-top] auto [body-end] 64px [bottom];
-    min-height: 100vh;
-  }
 
   .sidebar-main-content {
     @apply flex flex-col col-start-2 col-end-4 row-start-2 row-end-3;
   }
 
-  .listing-header {
-    @apply flex items-center gap-4;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-  }
-
   .listing {
-    @apply w-full border-t border-base-700 grow;
+    @apply w-full border-base-700 grow;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -58,14 +29,11 @@
   }
 
   .listing th {
-    @apply text-base-400 bg-base-900;
-    padding: 6px 16px;
-    text-align: left;
+    @apply bg-base-900 py-1.5 px-4 text-base-400 font-medium text-sm text-left;
   }
 
   .listing .checkbox {
-    padding: 12px 24px;
-    width: 68px;
+    @apply h-11 w-16 py-3 px-6;
   }
 
   .listing .checkbox label {
@@ -100,7 +68,7 @@
   }
 
   .listing tbody tr:hover {
-    @apply bg-base-800;
+    @apply bg-indigo-500/[.06];
   }
 
   .listing td {
@@ -150,25 +118,6 @@
     border-radius: 4px;
   }
 
-  .action-search {
-    @apply flex items-center bg-base-900 text-base-400 border border-base-600 rounded-[4px] text-sm px-2 py-[6px];
-    gap: 8px;
-    padding: 8px 12px;
-  }
-
-  .action-search input {
-    @apply bg-transparent border-transparent text-base-400;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    height: 20px;
-    padding: 0;
-  }
-
-  .sticky-pager {
-    @apply sticky bottom-0 flex flex-row border-0 bg-base-950 border-t border-t-base-700 px-[24px] py-[16px];
-  }
-
   .pager-button {
     @apply rounded-sm px-[12px] py-[6px];
     font-size: 14px;

lib/nerves_hub_web.ex

@@ -102,6 +102,12 @@ defmodule NervesHubWeb do
 
       def page_title(socket, page_title), do: assign(socket, :page_title, page_title)
 
+      def sidebar_tab(socket, tab) do
+        socket
+        |> assign(:sidebar_tab, tab)
+        |> assign(:tab_hint, tab)
+      end
+
       def whitelist(params, keys) do
         keys
         |> Enum.filter(fn x -> !is_nil(params[to_string(x)]) end)

lib/nerves_hub_web/components/sorting.ex

@@ -0,0 +1,25 @@
+defmodule NervesHubWeb.Components.Sorting do
+  use NervesHubWeb, :component
+
+  attr(:field, :any)
+  attr(:text, :any)
+  attr(:selected_field, :any)
+  attr(:selected_direction, :any)
+
+  def sort_icon(assigns) do
+    ~H"""
+    <div class="flex items-center group">
+      <%= @text %>
+      <svg :if={@selected_field != @field} class="ml-auto invisible group-hover:visible w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.5 7.5L10 5L7.5 7.5M12.5 12.5L10 15L7.5 12.5" stroke="#71717A" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <svg :if={@selected_field == @field && @selected_direction == "asc"} class="ml-auto w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 14L12 9L7 14" stroke="#71717A" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <svg :if={@selected_field == @field && @selected_direction == "desc"} class="ml-auto w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 10L12 15L7 10" stroke="#71717A" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+    """
+  end
+end

lib/nerves_hub_web/live/archives.ex

@@ -21,6 +21,7 @@ defmodule NervesHubWeb.Live.Archives do
   defp apply_action(%{assigns: %{product: product}} = socket, :index, _params) do
     socket
     |> page_title("Archives - #{product.name}")
+    |> sidebar_tab(:archives)
     |> assign(:archives, Archives.all_by_product(product))
     |> assign(:org_keys, Accounts.list_org_keys(socket.assigns.org))
     |> render_with(&list_archives_template/1)

lib/nerves_hub_web/live/deployments/edit.ex

@@ -24,6 +24,7 @@ defmodule NervesHubWeb.Live.Deployments.Edit do
 
     socket
     |> assign(:archives, archives)
+    |> sidebar_tab(:deployments)
     |> assign(:deployment, deployment)
     |> assign(:current_device_count, current_device_count)
     |> assign(:firmware, deployment.firmware)

lib/nerves_hub_web/live/deployments/index.ex

@@ -19,6 +19,7 @@ defmodule NervesHubWeb.Live.Deployments.Index do
 
     socket
     |> page_title("Deployments - #{product.name}")
+    |> sidebar_tab(:deployments)
     |> assign(:deployments, deployments)
     |> assign(:counts, counts)
     |> ok()

lib/nerves_hub_web/live/deployments/new.ex

@@ -24,6 +24,7 @@ defmodule NervesHubWeb.Live.Deployments.New do
 
       socket
       |> page_title("New Deployment - #{socket.assigns.product.name}")
+      |> sidebar_tab(:deployments)
       |> assign(:platforms, platforms)
       |> assign(:platform, nil)
       |> assign(:form, to_form(Ecto.Changeset.change(%Deployment{})))

lib/nerves_hub_web/live/deployments/show.ex

@@ -34,6 +34,7 @@ defmodule NervesHubWeb.Live.Deployments.Show do
 
     socket
     |> page_title("Deployment - #{deployment.name} - #{product.name}")
+    |> sidebar_tab(:deployments)
     |> assign(:deployment, deployment)
     |> assign(:audit_logs, logs)
     |> assign(:audit_pager, audit_pager)