From 2c4af4f0b34152689d452cf08640a7df1d831499 Mon Sep 17 00:00:00 2001
From: Marzy1234 <145050460+MarzyCoder@users.noreply.github.com>
Date: Mon, 1 Dec 2025 18:46:31 +0100
Subject: [PATCH] improve design

---
 public/css/grocy.css             | 26 +++++++++++++++++++----
 public/css/grocy_menu_layout.css | 36 ++++++++++++++++++++++++++------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 0eb588c4..e186478d 100755
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -1,14 +1,25 @@
 /* Main style customizations */
 body {
-	font-family: 'Roboto', sans-serif;
+	font-family: 'Inter', sans-serif;
+	font-size: 16px;
+	line-height: 1.5;
+	color: #333;
+	background-color: #f9f9f9;
 }
 
 .content-text {
-	font-size: 0.85rem;
+	color: #444;
+	font-size: 1rem;
 }
 
 .responsive-button {
 	white-space: normal;
+	border-radius: 4px;
+}
+
+.responsive-button:hover {
+	transform: translate(0px, 1px);
+	-webkit-transform: translate(0px, 1px);
 }
 
 .timeago-contextual {
@@ -38,6 +49,8 @@ a.discrete-link:hover {
 
 .grocy-card .card-header {
 	background-color: inherit;
+	background-color: #f8f9fa;
+	border-bottom: 1px solid #e7e7e7;
 }
 
 .grocy-card .card-icons a {
@@ -386,31 +399,36 @@ html {
 	padding: 12px;
 	font-weight: bold;
 	width: fit-content;
-	border-top: 6px solid;
+	border: 1.5px solid;
+	margin: 5px 0px
 }
 
 .warning-message {
 	background-color: #fffaeb;
 	color: #7c5e10;
 	border-top-color: #e9b949;
+	border-radius: 12px;
 }
 
 .error-message {
 	background-color: #ffeeee;
 	color: #780a0a;
 	border-top-color: #ba2525;
+	border-radius: 12px;
 }
 
 .normal-message {
 	background-color: #e0e8f9;
 	color: #2d3a8c;
 	border-top-color: #4c63b6;
+	border-radius: 12px;
 }
 
 .secondary-message {
 	background-color: #e1e4e8;
 	color: #4e575f;
 	border-top-color: #68696b;
+	border-radius: 12px;
 }
 
 .status-filter-message,
@@ -548,4 +566,4 @@ html {
 	#table-filter-row div:not(:first-of-type) {
 		margin-top: 8px;
 	}
-}
+}
\ No newline at end of file
diff --git a/public/css/grocy_menu_layout.css b/public/css/grocy_menu_layout.css
index 7e196d45..4f7c8677 100644
--- a/public/css/grocy_menu_layout.css
+++ b/public/css/grocy_menu_layout.css
@@ -5,15 +5,26 @@ html {
 
 body {
 	overflow-x: hidden;
+	margin: 0;
+	padding: 0;
+	color: #444;
+}
+
+body.fixed-nav {
+	padding-top: 64px;
 }
 
 body.fixed-nav {
 	padding-top: 56px;
 }
 
+
 .content-wrapper {
 	min-height: calc(100vh - 56px);
 	padding-top: 1rem;
+	padding: 2rem;
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 #mainNav .navbar-collapse {
@@ -280,6 +291,19 @@ body.sidenav-toggled .navbar-sidenav .nav-item {
 	white-space: nowrap;
 }
 
+.navbar-sidenav .nav-item {
+	margin: 0.5rem 0;
+}
+
+.navbar-sidenav .nav-item .nav-link {
+	color: #555;
+	font-weight: 500;
+}
+
+.navbar-sidenav .nav-item .nav-link:hover {
+	color: #007bff;
+}
+
 body.sidenav-toggled .navbar-sidenav-tooltip.show {
 	display: flex;
 }
@@ -351,7 +375,7 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
 
 #mainNav {
 	line-height: 1;
-	background-color: #e5e5e5 !important;
+	background-color: #f1f1f1c7 !important;
 	border-bottom: 2px solid !important;
 	border-color: #d6d6d6 !important;
 	padding-bottom: 0.3rem;
@@ -372,9 +396,9 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
 
 .navbar-sidenav,
 .sidenav-second-level {
-	background-color: #e5e5e5 !important;
-	border-right: 2px solid !important;
-	border-color: #d6d6d6 !important;
+	background-color: #f1f1f1c7 !important;
+	border-right: 0.1px solid !important;
+	border-color: #e4e3e3 !important;
 }
 
 .navbar-nav .dropdown-menu {
@@ -403,7 +427,7 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
 .navbar-nav .dropdown-item:focus,
 .active-page {
 	box-shadow: inset 7px 0 0 #337ab7 !important;
-	background-color: #d6d6d6 !important;
+	background-color: #ebebeb !important;
 }
 
 .navbar-brand {
@@ -500,4 +524,4 @@ body.fixed-nav {
 	.navbar-nav .dropdown-item .form-inline>input {
 		text-align: right;
 	}
-}
+}
\ No newline at end of file