Restyling (#40)

Restyle a bit to unify shades of gray and improve contrast

Author: vortizhe

assets/css/app.css

@@ -2,3 +2,13 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  @apply bg-gray-300;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-500;
+  border-radius: 4px;
+}

guides/screenshots/error-dashboard.png

@@ -20,8 +20,8 @@ defmodule ErrorTracker.Web.CoreComponents do
     ~H"""
     <.link
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-[11.5px] px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 py-[11.5px]",
+        "text-sm font-semibold text-sky-500 hover:text-white/80",
         @class
       ]}
       {@rest}
@@ -36,8 +36,8 @@ defmodule ErrorTracker.Web.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 rounded-lg bg-sky-500 hover:bg-sky-700 py-2 px-4",
+        "text-sm text-white active:text-white/80",
         @class
       ]}
       {@rest}
@@ -65,8 +65,8 @@ defmodule ErrorTracker.Web.CoreComponents do
       case assigns.color do
         :blue -> "bg-blue-900 text-blue-300"
         :gray -> "bg-gray-700 text-gray-300"
-        :red -> "bg-red-900 text-red-300"
-        :green -> "bg-green-900 text-green-300"
+        :red -> "bg-red-400/10 text-red-300 ring-red-400/20"
+        :green -> "bg-emerald-400/10 text-emerald-300 ring-emerald-400/20"
         :yellow -> "bg-yellow-900 text-yellow-300"
         :indigo -> "bg-indigo-900 text-indigo-300"
         :purple -> "bg-purple-900 text-purple-300"
@@ -76,7 +76,10 @@ defmodule ErrorTracker.Web.CoreComponents do
     assigns = Map.put(assigns, :color_class, color_class)
 
     ~H"""
-    <span class={["text-sm font-medium me-2 px-2.5 py-1.5 rounded", @color_class]} {@rest}>
+    <span
+      class={["text-sm font-medium me-2 py-1 px-2 rounded-lg ring-1 ring-inset", @color_class]}
+      {@rest}
+    >
       <%= render_slot(@inner_block) %>
     </span>
     """
@@ -92,14 +95,14 @@ defmodule ErrorTracker.Web.CoreComponents do
     <div class="mt-10 w-full flex">
       <button
         :if={@page > 1}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400  bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
         phx-click={@event_previous}
       >
         Previous page
       </button>
       <button
         :if={@page < @total_pages}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
         phx-click={@event_next}
       >
         Next page
@@ -117,7 +120,10 @@ defmodule ErrorTracker.Web.CoreComponents do
   def section(assigns) do
     ~H"""
     <div>
-      <h2 :if={assigns[:title]} class={["text-sm font-bold mb-2 uppercase", @title_class]}>
+      <h2
+        :if={assigns[:title]}
+        class={["text-sm font-semibold mb-2 uppercase text-gray-400", @title_class]}
+      >
         <%= @title %>
       </h2>
       <%= render_slot(@inner_block) %>

guides/screenshots/error-detail.png

@@ -4,7 +4,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
 
   def render(assigns) do
     ~H"""
-    <nav class="border-gray-200 bg-gray-800" phx-click-away={JS.hide(to: "#navbar-main")}>
+    <nav class="border-gray-400 bg-gray-900">
       <div class="container flex flex-wrap items-center justify-between mx-auto p-4">
         <.link
           href={dashboard_path(@socket)}
@@ -14,7 +14,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
         </.link>
         <button
           type="button"
-          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-600 focus:ring-gray-500"
+          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-500"
           aria-controls="navbar-main"
           aria-expanded="false"
           phx-click={JS.toggle(to: "#navbar-main")}
@@ -37,8 +37,24 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
           </svg>
         </button>
         <div class="hidden w-full md:block md:w-auto" id="navbar-main">
-          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-600 rounded-lg bg-gray-700 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800">
-            <.navbar_item to="https://github.com" target="_blank">GitHub</.navbar_item>
+          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-400 bg-gray-900 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800">
+            <.navbar_item to="https://github.com" target="_blank">
+              <svg
+                width="18"
+                height="18"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                version="1.1"
+                class="inline-block mr-1 align-text-top"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"
+                >
+                </path>
+              </svg>
+              GitHub
+            </.navbar_item>
           </ul>
         </div>
       </div>
@@ -56,7 +72,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
     <li>
       <a
         href={@to}
-        class="block py-2 px-3 text-gray-900 rounded text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-blue-500 md:p-0"
+        class="whitespace-nowrap flex-0 block py-2 px-3 rounded-lg text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
         {@rest}
       >
         <%= render_slot(@inner_block) %>

lib/error_tracker/web/components/core_components.ex

@@ -18,7 +18,7 @@
     </script>
   </head>
 
-  <body class="bg-gray-700 text-white">
+  <body class="bg-gray-800 text-white">
     <%= @inner_content %>
   </body>
 </html>

lib/error_tracker/web/components/layouts/navbar.ex

@@ -9,23 +9,29 @@
     value={@search_form[:reason].value}
     type="text"
     placeholder="Error"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
     name={@search_form[:source_line].name}
     value={@search_form[:source_line].value}
     type="text"
     placeholder="Source line"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
     name={@search_form[:source_function].name}
     value={@search_form[:source_function].value}
     type="text"
     placeholder="Source function"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
-  <select name={@search_form[:status].name}>
+  <select
+    name={@search_form[:status].name}
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+  >
     <option value="" selected={@search_form[:status].value == ""}>All</option>
     <option value="unresolved" selected={@search_form[:status].value == "unresolved"}>
       Unresolved
@@ -36,9 +42,9 @@
   </select>
 </.form>
 
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-600 dark:text-gray-400">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
+  <table class="w-full text-sm text-left rtl:text-right text-gray-400 table-fixed">
+    <thead class="text-xs uppercase bg-gray-900">
       <tr>
         <th scope="col" class="px-4 pr-2 py-3 w-128">Error</th>
         <th scope="col" class="px-4 py-3 w-72">Occurrences</th>
@@ -52,20 +58,23 @@
           No errors to show 🎉
         </td>
       </tr>
-      <tr :for={error <- @errors} class="border-b bg-gray-800 border-gray-700">
-        <th
-          scope="row"
-          class="px-4 py-4 font-medium text-white whitespace-nowrap text-ellipsis overflow-hidden"
-        >
-          <.link navigate={error_path(@socket, error)}>
-            (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+      <tr
+        :for={error <- @errors}
+        class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
+      >
+        <td scope="row" class="px-4 py-4 font-medium text-white relative">
+          <.link navigate={error_path(@socket, error)} class="absolute inset-1">
+            <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
+          <p class="whitespace-nowrap text-ellipsis w-full overflow-hidden">
+            (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+          </p>
           <p class="font-normal text-gray-400">
             <%= sanitize_module(error.source_function) %>
             <br />
             <%= error.source_line %>
           </p>
-        </th>
+        </td>
         <td class="px-4 py-4">
           <p>Last: <%= format_datetime(error.last_occurrence_at) %></p>
           <p>Total: <%= @occurrences[error.id] %></p>

lib/error_tracker/web/components/layouts/root.html.heex

@@ -1,38 +1,38 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket)}>Back to the dashboard</.button>
+  <.button type="link" href={dashboard_path(@socket)}>« Back to the dashboard</.button>
 </div>
 
 <div id="header">
-  <p class="text-sm uppercase font-semibold text-gray-300">
+  <p class="text-sm uppercase font-semibold text-gray-400">
     Error #<%= @error.id %> @ <%= format_datetime(@occurrence.inserted_at) %>
   </p>
-  <h1 class="my-1 text-2xl font-bold whitespace-nowrap text-ellipsis overflow-hidden">
+  <h1 class="my-1 text-2xl w-full font-semibold whitespace-nowrap text-ellipsis overflow-hidden">
     (<%= sanitize_module(@error.kind) %>) <%= @error.reason
     |> String.replace("\n", " ")
     |> String.trim() %>
   </h1>
 </div>
 
 <div class="grid grid-cols-1 md:grid-cols-4 md:space-x-3 mt-6 gap-2">
-  <div class="px-3 md:col-span-3 md:border-r-2 md:border-gray-500 space-y-8">
+  <div class="md:col-span-3 md:border-r md:border-gray-600 space-y-8 pr-5">
     <.section title="Full message">
-      <pre class="overflow-auto p-4 bg-gray-600"><%= @occurrence.reason %></pre>
+      <pre class="overflow-auto p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= @occurrence.reason %></pre>
     </.section>
 
     <.section title="Source">
-      <pre class="overflow-auto text-sm p-4 bg-gray-600">
+      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900">
         <%= sanitize_module(@error.source_function) %>
         <%= @error.source_line %></pre>
     </.section>
 
     <.section title="Stacktrace">
-      <div class="p-4 bg-gray-600">
+      <div class="p-4 bg-gray-300/10 border border-gray-900 rounded-lg">
         <div class="w-full mb-4">
           <label class="flex justify-end">
             <input
               type="checkbox"
               id="show-app-frames"
-              class="ml-2 mr-2 mb-1 mt-1 inline-block"
+              class="ml-2 mr-2 mb-1 mt-1 inline-block text-sky-600 rounded focus:ring-sky-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
               phx-click={JS.toggle(to: "#stacktrace tr:not([data-app=#{@app}])")}
             />
             <span class="text-md inline-block">
@@ -58,14 +58,17 @@
     </.section>
 
     <.section title="Context">
-      <pre class="overflow-auto text-sm p-4 bg-gray-600"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
+      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
     </.section>
   </div>
 
   <div class="px-3 md:pl-0 space-y-8">
     <.section title={"Occurrence (#{@total_occurrences} total)"}>
       <form phx-change="occurrence_navigation">
-        <select name="occurrence_id" class="text-black w-full">
+        <select
+          name="occurrence_id"
+          class="w-full border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+        >
           <option
             :for={occurrence <- @occurrences}
             value={occurrence.id}

lib/error_tracker/web/live/dashboard.html.heex

@@ -45,7 +45,11 @@ defmodule ErrorTracker.MixProject do
       links: %{
         "GitHub" => "https://github.com/elixir-error-tracker/error-tracker"
       },
-      maintainers: ["Óscar de Arriba González", "Cristian Álvarez Belaustegui"],
+      maintainers: [
+        "Óscar de Arriba González",
+        "Cristian Álvarez Belaustegui",
+        "Víctor Ortiz Heredia"
+      ],
       files: ~w(lib priv/static LICENSE mix.exs README.md .formatter.exs)
     ]
   end
@@ -100,7 +104,7 @@ defmodule ErrorTracker.MixProject do
       dev: "run --no-halt dev.exs",
       "assets.install": ["bun.install", "cmd _build/bun install --cwd assets/"],
       "assets.watch": ["tailwind default --watch"],
-      "assets.build": ["bun default --minify", "tailwind default --minify"]
+      "assets.build": ["bun default", "tailwind default"]
     ]
   end
 end