Add proper logo and adapt color palette

src/howitz/templates/components/accordion/event-actions-buttons.html

@@ -11,7 +11,7 @@
             hx-target="#event-accordion-row-{{ id }}"
             hx-swap="outerHTML show:#event-msg-feed-{{ id }}:bottom"
             hx-indicator="#row-{{ id }}-indicator"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
     >
         Poll
     </button>
@@ -22,7 +22,7 @@
                 hx-target="#event-accordion-row-{{ id }}"
                 hx-swap="outerHTML show:#event-msg-feed-{{ id }}:bottom"
                 hx-indicator="#row-{{ id }}-indicator"
-                class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
             Clear Flapping
         </button>
     {% endif %}

src/howitz/templates/components/accordion/event-attributes.html

@@ -1,9 +1,9 @@
-<div class="p-5 border rounded-2xl shadow sm:p-5 bg-gray-800 border-gray-700">
+<div class="p-5 border rounded-2xl shadow sm:p-5 bg-zinc-800 border-zinc-700">
     <div class="mb-3">
         <h5 class="text-center text-lg font-bold leading-none text-white">Attributes</h5>
     </div>
     <div class="flow-root">
-        <ul role="list" class="divide-y divide-gray-700">
+        <ul role="list" class="divide-y divide-zinc-700">
             {% for attr_key in event_attr.keys() %}
 
             {% if event_attr.get(attr_key) %}

src/howitz/templates/components/accordion/event-details-content.html

@@ -3,7 +3,7 @@
     <div
             id="accordion-body-{{ id }}"
             aria-labelledby="event-accordion-row-{{ id }}"
-            class="p-2 border border-b-0 border-gray-700 bg-gray-900">
+            class="p-2 border border-b-0 border-zinc-700 bg-zinc-950">
 
         <div
                 class="grid grid-cols-1 content-between"

src/howitz/templates/components/accordion/event-details.html

@@ -1,6 +1,6 @@
 <tr
         id="event-details-row-{{ id }}"
-        class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600"
+        class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600"
 
 >
     {% include "/components/accordion/event-details-content.html" %}

src/howitz/templates/components/accordion/event-messages-block.html

@@ -1,7 +1,7 @@
 <div
         hx-trigger="load"
         hx-swap="innerHTML"
-        class="basis-0 grow overflow-y-scroll overflow-x-auto p-5 border rounded-2xl shadow sm:p-5 bg-gray-800 border-gray-700">
+        class="basis-0 grow overflow-y-scroll overflow-x-auto p-5 border rounded-2xl shadow sm:p-5 bg-zinc-800 border-zinc-700">
     <div class="flex justify-between mb-3">
         <h5 class="text-center text-lg font-bold leading-none text-white">Logs & History</h5>
     </div>

src/howitz/templates/components/accordion/event-messages.html

@@ -2,19 +2,19 @@
 
     <ul
             id="ol-event-{{ id }}"
-            class="relative border-l border-gray-700">
+            class="relative border-l border-zinc-700">
         {% for msg in event_msgs %}
             <li class="mb-3 ml-4">
 
-                <div class="absolute w-3 h-3  rounded-full mt-1.5 -left-1.5 border border-gray-900 {% if msg.user %} bg-orange-400 {% else %} bg-blue-400 {% endif %}"></div>
-                <h3 class="mb-1 text-xs font-normal leading-none text-gray-400">
+                <div class="absolute w-3 h-3  rounded-full mt-1.5 -left-1.5 border border-zinc-900 {% if msg.user %} bg-zinogreen-50 {% else %} bg-zinogreen-400 {% endif %}"></div>
+                <h3 class="mb-1 text-xs font-normal leading-none text-zinc-400">
                     {{ msg.user }}
                 </h3>
                 <div
                         class="flex gap-0 flex-wrap"
                 >
                     <time class="mr-2 text-sm font-semibold text-white shrink-0">{{ msg.date }}</time>
-                    <p class="mb-2 text-sm font-normal text-gray-400 break-words">{{ msg.log }}</p>
+                    <p class="mb-2 text-sm font-normal text-zinc-400 break-words">{{ msg.log }}</p>
                 </div>
 
             </li>

src/howitz/templates/components/accordion/update-state-btn.html

@@ -3,7 +3,7 @@
         hx-get="event/{{ id }}/update_status"
         hx-target="body"
         hx-swap="beforeend"
-        class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+        class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
 >
     Update Status
 </button>

src/howitz/templates/components/feedback/connection-status-bar/appbar-placeholder.html

@@ -2,20 +2,20 @@
         id="connection-state-appbar"
 >
     <div id="connection-status-bar"
-         class="relative isolate flex justify-center gap-x-6 overflow-hidden bg-teal-700 px-6 py-2.5"
+         class="relative isolate flex justify-center gap-x-6 overflow-hidden bg-zinogreen-700 px-6 py-2.5"
     >
         <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
              aria-hidden="true">
-            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-900 opacity-30"
+            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-900 opacity-30"
                  style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
         </div>
         <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
              aria-hidden="true">
-            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-900 opacity-30"
+            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-900 opacity-30"
                  style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
         </div>
         <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
-            <p class="text-sm leading-6 text-gray-950">
+            <p class="text-sm leading-6 text-zinc-950">
                 <strong class="font-semibold">Connected to Zino</strong>
                 <svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                     <circle cx="1" cy="1" r="1"/>

src/howitz/templates/components/feedback/connection-status-bar/error-appbar-content.html

@@ -14,7 +14,7 @@
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
-        <p class="text-sm leading-6 text-gray-950">
+        <p class="text-sm leading-6 text-zinc-950">
             <strong class="font-semibold">Connection timed out</strong>
             <svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                 <circle cx="1" cy="1" r="1"/>

src/howitz/templates/components/feedback/connection-status-bar/success-appbar-content.html

@@ -2,15 +2,15 @@
 <div
         id="connection-success-content"
         role="status"
-        class="relative isolate flex justify-center gap-x-6 bg-teal-900 overflow-hidden px-6 py-0.5">
+        class="relative isolate flex justify-center gap-x-6 bg-zinogreen-900 overflow-hidden px-6 py-0.5">
     <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
          aria-hidden="true">
-        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-950 opacity-30"
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-950 opacity-30"
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
     <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
          aria-hidden="true">
-        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-950 opacity-30"
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-950 opacity-30"
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
 </div>

src/howitz/templates/components/footer/footer.html

@@ -1,5 +1,5 @@
 <footer hx-get="/footer"
         hx-trigger="load, footerIsOutdated from:body"
         hx-swap="innerHTML"
-        class="bg-slate-950">
+        class="bg-black">
 </footer>

src/howitz/templates/components/login/sign-in-form.html

@@ -9,9 +9,9 @@
         hx-target-403="form p"
 >
     <div>
-        <label for="username" class="block text-sm font-medium leading-6 text-sky-100">Username</label>
+        <label for="username" class="block text-sm font-medium leading-6 text-white">Username</label>
         <input id="username" name="username" type="text" autocomplete="current-username" required
-               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-slate-900 text-sky-100 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
+               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-zinc-950 text-white shadow-sm ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-zinogreen-600 sm:text-sm sm:leading-6">
         <p
                 id="username-helper-text"
                 hidden
@@ -20,9 +20,9 @@
     </div>
 
     <div>
-        <label for="password" class="block text-sm font-medium leading-6 text-sky-100">Password</label>
+        <label for="password" class="block text-sm font-medium leading-6 text-white">Password</label>
         <input id="password" name="password" type="password" autocomplete="current-password" required
-               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-slate-900 text-sky-100 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
+               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-zinc-950 text-white shadow-sm ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-zinogreen-600 sm:text-sm sm:leading-6">
         <p
                 id="password-helper-text"
                 hidden
@@ -32,7 +32,7 @@
 
     <div>
         <button type="submit"
-                class="flex w-full justify-center rounded-md bg-sky-600 my-10 px-3 py-1.5 text-sm font-semibold leading-6 text-slate-50 shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600">
+                class="flex w-full justify-center rounded-md bg-zinogreen-600 my-10 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-zinogreen-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinogreen-600">
             Sign in
             {% with color='white' %}
                 {% include "/components/feedback/spinner/spinner.html" %}

src/howitz/templates/components/navbar/navbar.html

@@ -1,18 +1,20 @@
-<nav class="bg-slate-950">
+<nav class="bg-black">
     <div class="max-w-full h-16 grid grid-cols-3 items-center px-2 lg:px-4">
         <a
                 href="/"
                 hx-push-url="/"
-                class="hover:bg-gray-700 p-2 rounded-md justify-self-start"
+                class="justify-self-start"
                 aria-current="page">
-            {% include "/includes/zino-logo.svg" %}
+            {% with height='16' %}
+                {% include "/includes/zino-logo.svg" %}
+            {% endwith %}
 
         </a>
         <div class="flex space-x-1 md:space-x-4 items-center justify-self-center">
             <a
                     href="/events"
                     hx-push-url="/events"
-                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-4 py-2 text-lg font-normal"
+                    class="text-zinc-300 hover:bg-zinogray/20 hover:text-white block rounded-md px-4 py-2 text-lg font-normal"
                     aria-current="page">
                 Dashboard
             </a>

src/howitz/templates/components/navbar/user-dropdown-menu-expanded.html

@@ -1,4 +1,4 @@
-<div class="absolute right-0 z-40 my-4 w-48 text-base origin-top-right rounded-md divide-y divide-slate-300 rounded-lg shadow-md shadow-slate-500 bg-slate-600"
+<div class="absolute right-0 z-40 my-4 w-48 text-base origin-top-right rounded-md divide-y divide-zinc-300 rounded-lg shadow-md shadow-zinc-500 bg-zinc-600"
      aria-orientation="vertical"
      id="user-menu-dropdown">
     <div class="px-4 py-3">
@@ -10,7 +10,7 @@
             <a
                     href="/logout"
                     hx-push-url="/logout"
-                    class="block px-4 py-2 text-sm text-white hover:bg-slate-800">Log
+                    class="block px-4 py-2 text-sm text-white hover:bg-zinc-800">Log
                 out</a>
         </li>
     </ul>

src/howitz/templates/components/navbar/user-menu-btn-expanded.html

@@ -1,5 +1,5 @@
 <button type="button"
-        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-slate-600 rounded-full ring-2 ring-white text-white font-medium"
+        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-zinc-600 rounded-full ring-2 ring-white text-white font-medium"
         id="user-menu-btn"
         aria-expanded="true"
         data-dropdown-toggle="user-menu-dropdown"

src/howitz/templates/components/navbar/user-menu-btn.html

@@ -1,5 +1,5 @@
 <button type="button"
-        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-slate-500 rounded-full font-semibold"
+        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-zinc-500 rounded-full font-semibold"
         id="user-menu-btn"
         aria-expanded="false"
         data-dropdown-toggle="user-menu-dropdown"

src/howitz/templates/components/popups/alerts/error/error-alert.html

@@ -19,7 +19,7 @@
                     hx-get="/alert/{{ alert_id }}/show-maximized-error"
                     hx-target="#error-msg-{{ alert_id }}-minimized"
                     hx-swap="afterend"
-                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
                     aria-label="Expand alert">
                 <span class="sr-only">Expand alert</span>
                 {% include "/components/popups/alerts/error/maximize-icon.svg" %}
@@ -28,7 +28,7 @@
                     hx-get="/get_none"
                     hx-target="#error-alert-{{ alert_id }}"
                     hx-swap="delete"
-                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
                     aria-label="Close alert">
                 <span class="sr-only">Close alert</span>
                 {% include "/components/popups/alerts/close-icon.svg" %}

src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html

@@ -5,7 +5,7 @@
             hx-get="/show_update_status_modal"
             hx-target="body"
             hx-swap="beforeend"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
     >
         Update Status
     </button>
@@ -17,7 +17,7 @@
             hx-trigger="click"
             id="bulk-poll-events"
             hx-indicator="#bulk-poll-indicator"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
         Poll
     </button>
 
@@ -29,7 +29,7 @@
                 hx-trigger="click"
                 id="bulk-clear-flapping"
                 hx-indicator="#bulk-clear-flapping-indicator"
-                class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
             Clear Flapping
         </button>
     {% endif %}

src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html

@@ -1,5 +1,5 @@
 <div id="bulk-update-menu" tabindex="-1" hx-swap-oob="true"
-     class="sticky bottom-0 z-20 flex flex-row items-center justify-between w-full max-h-fit p-2 border-t bg-slate-700 border-slate-600">
+     class="sticky bottom-0 z-20 flex flex-row items-center justify-between w-full max-h-fit p-2 border-t bg-zinc-700 border-zinc-600">
 
     {% include "/components/popups/bulk-update-menu/bulk-update-progress.html" %}
 

src/howitz/templates/components/popups/modals/forms/sort-table-form.html

@@ -12,12 +12,12 @@
                             <div class="flex h-6 items-center">
                                 <input id="{{ sort }}" value="{{ sort }}" type="radio" name="sort-method"
                                        {% if sort == current_sort %}checked{% endif %}
-                                       class="h-4 w-4 bg-sky-100/40 border-white text-sky-600 focus:ring-sky-600">
+                                       class="h-4 w-4 bg-zinogreen-100/40 border-white text-zinogreen-600 focus:ring-zinogreen-600">
                             </div>
                             <div class="text-sm">
                                 <label for="{{ sort }}"
                                        class="block font-medium">{{ sort.display_name }}</label>
-                                <p class="text-xs text-sky-100/40">{{ sort.description }}</p>
+                                <p class="text-xs text-white/60">{{ sort.description }}</p>
                             </div>
                         </div>
                     {% endfor %}
@@ -33,7 +33,7 @@
                 hx-target="#eventlist-list"
                 hx-swap="innerHTML"
                 hx-indicator="#bulk-update-indicator"
-                class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-sky-700 hover:bg-sky-800 focus:outline-none focus:ring-sky-900">
+                class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-zinogreen-700 hover:bg-zinogreen-800 focus:outline-none focus:ring-zinogreen-900">
             Save
         </button>