From 5223aef1cafa1eacce3619579a9588457e788ef0 Mon Sep 17 00:00:00 2001
From: Tine
Date: Thu, 29 Feb 2024 15:12:20 +0100
Subject: [PATCH] feat: small design changes
---
pkg/server/server.go | 1 +
web/static/css/main.css | 12 ++-----
web/static/css/tailwind.css | 35 ++++++++++---------
web/templates/components/base.tmpl | 2 +-
web/templates/pages/index.tmpl | 14 ++++++--
web/templates/pages/settings_monitors.tmpl | 4 +--
.../pages/settings_worker_groups.tmpl | 4 +--
web/templates/tempaltes.go | 2 ++
8 files changed, 40 insertions(+), 34 deletions(-)
diff --git a/pkg/server/server.go b/pkg/server/server.go
index f3081fa..d4d4f6a 100644
--- a/pkg/server/server.go
+++ b/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() {
diff --git a/web/static/css/main.css b/web/static/css/main.css
index 5d1d201..1beb704 100644
--- a/web/static/css/main.css
+++ b/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 text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300;
+ @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-gray-400;
}
.monitors .time-range > a.active {
- @apply text-white bg-blue-700 hover:bg-blue-800;
-}
-.monitors .time-range > a:first-child {
- @apply rounded-s-lg;
-}
-.monitors .time-range > a:last-child {
- @apply rounded-e-lg;
+ @apply bg-white hover:bg-gray-300 shadow;
}
.settings {
diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css
index 52895c0..a643897 100644
--- a/web/static/css/tailwind.css
+++ b/web/static/css/tailwind.css
@@ -788,8 +788,8 @@ video {
justify-content: center;
}
-.justify-between {
- justify-content: space-between;
+.gap-1 {
+ 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));
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --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));
-}
-
-.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;
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.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;
}
diff --git a/web/templates/components/base.tmpl b/web/templates/components/base.tmpl
index 5de1b97..dc67c27 100644
--- a/web/templates/components/base.tmpl
+++ b/web/templates/components/base.tmpl
@@ -32,7 +32,7 @@
{{ template "main" . }}
{{ else }}
@@ -87,7 +88,8 @@
Degraded performance
- Last updated on Feb 10 at 10:55am UTC
+ Last updated on
+ {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
{{ end }}
@@ -97,7 +99,7 @@
Monitors
{{ range .HealthChecks }}
diff --git a/web/templates/pages/settings_monitors.tmpl b/web/templates/pages/settings_monitors.tmpl
index 6397e78..9f80ff5 100644
--- a/web/templates/pages/settings_monitors.tmpl
+++ b/web/templates/pages/settings_monitors.tmpl
@@ -32,13 +32,13 @@