Refactor UI styles across multiple pages to enhance consistency and responsiveness. Update background colors to use CSS variables for improved theming in GroupDetailPage, GroupsPage, ListDetailPage, and ListsPage. Ensure all components align with the overall design system for a cohesive user experience.

be/app/database.py

@@ -13,7 +13,8 @@ engine = create_async_engine(
     settings.DATABASE_URL,
     echo=True,  # Log SQL queries (useful for debugging)
     future=True, # Use SQLAlchemy 2.0 style features
-    pool_recycle=3600 # Optional: recycle connections after 1 hour
+    pool_recycle=3600, # Optional: recycle connections after 1 hour
+    pool_pre_ping=True # Add this line to ensure connections are live
 )
 
 # Create a configured "Session" class

fe/src/pages/GroupDetailPage.vue

@@ -300,7 +300,7 @@ onMounted(() => {
 .neo-card {
   border-radius: 18px;
   box-shadow: 6px 6px 0 #111;
-  background: #fff;
+  background: var(--light);
   border: 3px solid #111;
   overflow: hidden;
 }

fe/src/pages/GroupsPage.vue

@@ -333,7 +333,8 @@ onMounted(async () => {
   min-width: 260px;
   width: 100%;
   margin: 0 auto;
-  background: #fff;
+  border: none;
+  background: var(--light);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -364,8 +365,8 @@ onMounted(async () => {
 
 .neo-create-group-card {
   border: 3px dashed #111;
-  background: #fafafa;
-  padding: 2.5rem 0;
+  background: var(--light);
+    padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;
   font-size: 1.1rem;

fe/src/pages/ListDetailPage.vue

@@ -809,7 +809,7 @@ const editItem = (item: Item) => {
   padding: 0.4rem 1rem;
   border: 3px solid #111;
   border-radius: 50px;
-  background: #fff;
+  background: var(--light);
   box-shadow: 3px 3px 0 #111;
 }
 
@@ -827,7 +827,7 @@ const editItem = (item: Item) => {
   box-shadow: 6px 6px 0 #111;
   width: 100%;
   margin: 0 0 2rem 0;
-  background: #fff;
+  background: var(--light);
   display: flex;
   flex-direction: column;
   cursor: pointer;
@@ -840,7 +840,7 @@ const editItem = (item: Item) => {
   margin: 0 0 2rem 0;
   break-inside: avoid;
   width: 100%;
-  background: #fff;
+  background: var(--light);
   display: flex;
   flex-direction: column;
 }
@@ -849,7 +849,7 @@ const editItem = (item: Item) => {
   padding: 1.2rem;
   margin-bottom: 0;
   border-bottom: 1px solid #eee;
-  background: #fff;
+  background: var(--light);
   transition: background-color 0.1s ease-in-out;
 }
 

fe/src/pages/ListsPage.vue

@@ -321,7 +321,7 @@ watch(currentGroupId, () => {
   box-shadow: 6px 6px 0 #111;
   width: 100%;
   margin: 0 0 2rem 0;
-  background: #fff;
+  background: var(--light);
   display: flex;
   flex-direction: column;
   /* padding: 2rem 2rem 1.5rem 2rem;
@@ -330,6 +330,7 @@ watch(currentGroupId, () => {
   cursor: pointer;
   /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
   border: 3px solid #111;
+  padding-inline: 1rem;
 }
 
 .neo-list-card:hover {
@@ -392,7 +393,7 @@ watch(currentGroupId, () => {
 
 .neo-create-list-card {
   border: 3px dashed #111;
-  background: #fafafa;
+  background: var(--light);
   padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;
@@ -448,12 +449,14 @@ watch(currentGroupId, () => {
 }
 
 .neo-new-item-input {
+    outline: none;
+  border: none;
   margin-top: 0.5rem;
   padding: 0.5rem;
+  background-color: var(--light) !important	;
 }
 
 .neo-new-item-input input[type="text"] {
-  background: transparent;
   border: none;
   outline: none;
   all: unset;