Working on better styling, added graceful shutdown

client/src/assets/components/_modal.scss

@@ -36,6 +36,7 @@
 		color: var(--modal-fg-color);
 		margin-top: 5vh;
 		box-shadow: var(--box-shadow);
+		border: 1px solid var(--box-border-color);
 		border-radius: var(--border-radius);
 		width: 20rem;
 		max-height: 90%;

client/src/assets/components/_section-title.scss

@@ -0,0 +1,9 @@
+.section-title {
+	display: flex;
+	align-items: center;
+
+	h2 {
+		flex: 1;
+		font-weight: normal;
+	}
+}

client/src/assets/pages/_alerts-page.scss

@@ -1,16 +1,7 @@
 .alerts-page .content {
-	max-width: 50rem;
+	width: 50rem;
 	padding: 1rem;
-
+	margin: 0 auto;
-	.section-title {
-		display: flex;
-		align-items: center;
-
-		h2 {
-			flex: 1;
-			font-weight: normal;
-		}
-	}
 
 	.contact-points {
 		margin-bottom: 2rem;

client/src/assets/pages/_sensors-page.scss

@@ -10,7 +10,8 @@
 	}
 
 	section.content {
-		max-width: 50rem;
+		width: 50rem;
+		margin: 0 auto;
 		padding: 1rem;
 	}
 }

client/src/assets/style.scss

@@ -46,6 +46,7 @@ a {
 @import 'components/user-layout';
 @import 'components/box';
 @import 'components/data-table';
+@import 'components/section-title';
 
 @import 'pages/login-page';
 @import 'pages/sensors-page';

client/src/assets/themes/_basic.scss

@@ -75,7 +75,7 @@
 		--button-bg-color: #0b3c9f;
 		--button-fg-color: #eee;
 		--button-cancel-fg-color: #ccc;
-		--modal-overlay-bg-color: rgba(0, 0, 0, 0.3);
+		--modal-overlay-bg-color: rgba(0, 0, 0, 0.5);
 		--confirm-overlay-bg-color: rgba(0, 0, 0, 0.5);
 		--input-border-color: #333;
 		--input-focus-border-color: #666;

client/src/pages/sensors/SensorsPage.tsx

@@ -27,17 +27,14 @@ export const SensorsPage = () => {
 	})
 
 	return (
-		<UserLayout
+		<UserLayout className="sensors-page">
-			header={
+			<div className="section-title">
-				<div className="sensors-head">
+				<h2>Sensors</h2>
-					<div>Sensors</div>
 				<button onClick={() => setShowNew(true)}>
 					<PlusIcon /> Add sensor
 				</button>
 			</div>
-			}
+
-			className="sensors-page"
-		>
 			<div className="box-shadow">
 				<DataTable
 					data={sensors.data ?? []}

server/main.go

@@ -4,8 +4,12 @@ import (
 	"basic-sensor-receiver/app"
 	"basic-sensor-receiver/middleware"
 	"basic-sensor-receiver/routes"
+	"context"
 	"fmt"
 	"log"
+	"net/http"
+	"os/signal"
+	"syscall"
 
 	"github.com/gin-gonic/gin"
 	"github.com/joho/godotenv"
@@ -80,10 +84,35 @@ func main() {
 	// Starts alerts handling goroutine
 	server.StartAlerts()
 
+	// Graceful shutdown using SIGTERM or SIGINT
+	ctx, stop := signal.NotifyContext(context.Background(), syscall.SIGINT, syscall.SIGTERM)
+	defer stop()
+
+	// Prepare http server
 	address := fmt.Sprintf("%s:%d", server.Config.Ip, server.Config.Port)
+	srv := &http.Server{
+		Addr:    address,
+		Handler: router,
+	}
 
-	log.Println("Starting server on", address)
+	// Run the server in a goroutine so that it doesn't block and we can stop it later
+	go func() {
+		log.Println("Running server on", address)
 
-	// Run the server
+		if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
-	router.Run(address)
+			log.Fatalf("Listen: %s\n", err)
+		}
+	}()
+
+	// Wait for shutdown signal
+	<-ctx.Done()
+
+	// Shutdown the server
+	log.Println("Shutting down server...")
+
+	if err := srv.Shutdown(context.TODO()); err != nil {
+		log.Fatalf("Server shutdown failed: %v", err)
+	}
+
+	log.Println("Server stopped")
 }