feat: small design changes

pkg/server/server.go

@@ -48,6 +48,7 @@ func (s *Server) Start() error {
 	s.echo.Renderer = templates.NewTemplates()
 	s.echo.Use(middleware.Logger())
 	s.echo.Use(middleware.Recover())
+	s.echo.Use(middleware.Secure())
 	Routes(s.echo, db, temporalClient, s.cfg, s.logger)
 
 	go func() {

web/static/css/main.css

@@ -63,17 +63,11 @@ code {
   @apply mb-3;
 }
 .monitors .time-range > a {
-  @apply font-medium text-sm px-2.5 py-1;
+  @apply font-medium text-sm px-2.5 py-1 rounded-lg;
-  @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300;
+  @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400;
 }
 .monitors .time-range > a.active {
-  @apply text-white bg-blue-700 hover:bg-blue-800;
+  @apply bg-white hover:bg-gray-300 shadow;
-}
-.monitors .time-range > a:first-child {
-  @apply rounded-s-lg;
-}
-.monitors .time-range > a:last-child {
-  @apply rounded-e-lg;
 }
 
 .settings {

web/static/css/tailwind.css

@@ -788,8 +788,8 @@ video {
   justify-content: center;
 }
 
-.justify-between {
+.gap-1 {
-  justify-content: space-between;
+  gap: 0.25rem;
 }
 
 .gap-2 {
@@ -971,6 +971,11 @@ video {
   padding: 1.25rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1337,6 +1342,7 @@ code {
 }
 
 .monitors .time-range > a {
+  border-radius: 0.5rem;
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   padding-top: 0.25rem;
@@ -1362,29 +1368,20 @@ code {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
 .monitors .time-range > a.active {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .monitors .time-range > a.active:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.monitors .time-range > a:first-child {
-  border-start-start-radius: 0.5rem;
-  border-end-start-radius: 0.5rem;
-}
-
-.monitors .time-range > a:last-child {
-  border-start-end-radius: 0.5rem;
-  border-end-end-radius: 0.5rem;
 }
 
 .settings {
@@ -1725,6 +1722,10 @@ code {
 }
 
 @media (min-width: 768px) {
+  .md\:grid-cols-\[1fr\2c 20\%\] {
+    grid-template-columns: 1fr 20%;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }

web/templates/components/base.tmpl

@@ -32,7 +32,7 @@
       {{ template "main" . }}
       <div class="container mx-auto">
         <footer class="text-center text-gray-500 text-xs mt-8 mb-4">
-          &copy; 2024 Zdravko -
+          &copy; {{ Now.UTC.Year }} Zdravko -
           <a
             class="hover:underline"
             href="https://github.com/mentos1386/zdravko"

web/templates/pages/index.tmpl

@@ -75,7 +75,8 @@
           </svg>
           <h1 class="text-slate-500 mt-4">All services are online</h1>
           <p class="text-slate-500 text-sm">
-            Last updated on Feb 10 at 10:55am UTC
+            Last updated on
+            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
           </p>
         </div>
       {{ else }}
@@ -87,7 +88,8 @@
           </svg>
           <h3 class="text-slate-500 mt-4">Degraded performance</h3>
           <p class="text-slate-500 text-sm">
-            Last updated on Feb 10 at 10:55am UTC
+            Last updated on
+            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
           </p>
         </div>
       {{ end }}
@@ -97,7 +99,7 @@
             Monitors
           </p>
           <div
-            class="inline-flex rounded-md shadow-sm justify-self-center sm:justify-self-end time-range"
+            class="inline-flex gap-1 rounded-md shadow-sm justify-self-center sm:justify-self-end time-range py-1 px-1 bg-gray-100"
             role="group"
           >
             <a
@@ -112,6 +114,12 @@
               type="button"
               >48 Hours</a
             >
+            <a
+              href="/?time-range=90minutes"
+              class="{{ if eq .TimeRange "90minutes" }}active{{ end }}"
+              type="button"
+              >90 Minutes</a
+            >
           </div>
         </div>
         {{ range .HealthChecks }}

web/templates/pages/settings_monitors.tmpl

@@ -32,13 +32,13 @@
       <table>
         <caption>
           List of Monitors
-          <div class="mt-1 gap-4 flex justify-between">
+          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
             <p>
               {{ $description }}
             </p>
             <a
               href="/settings/monitors/create"
-              class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
+              class="h-min inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
             >
               Create New
               <svg class="feather h-5 w-5 overflow-visible">

web/templates/pages/settings_worker_groups.tmpl

@@ -32,13 +32,13 @@
       <table>
         <caption>
           List of Worker Groups
-          <div class="mt-1 gap-4 flex justify-between">
+          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
             <p>
               {{ $description }}
             </p>
             <a
               href="/settings/worker-groups/create"
-              class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
+              class="h-min inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
             >
               Create New
               <svg class="feather h-5 w-5 overflow-visible">

web/templates/tempaltes.go

@@ -6,6 +6,7 @@ import (
 	"log"
 	"strings"
 	"text/template"
+	"time"
 
 	"github.com/labstack/echo/v4"
 )
@@ -25,6 +26,7 @@ func load(files ...string) *template.Template {
 	t := template.New("default").Funcs(
 		template.FuncMap{
 			"StringsJoin": strings.Join,
+			"Now":         time.Now,
 		})
 
 	return template.Must(t.ParseFS(templates, files...))