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/assets/valerie-ui.scss

@@ -37,11 +37,13 @@
 
   /* Textures */
   --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-	--progress-texture: repeating-linear-gradient(45deg,
+  --progress-texture: repeating-linear-gradient(
+    45deg,
     rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 5px,
     transparent 5px,
-			transparent 10px);
+    transparent 10px
+  );
 }
 
 /* Accessibility Helpers */
@@ -59,7 +61,6 @@
 
 /* Reduced Motion Preference */
 @media (prefers-reduced-motion: reduce) {
-
   *,
   *::before,
   *::after {
@@ -79,7 +80,7 @@
 }
 
 body {
-	font-family: "Patrick Hand", cursive;
+  font-family: 'Patrick Hand', cursive;
   background-color: var(--light);
   background-image: var(--paper-texture);
   // padding: 2rem 1rem;s
@@ -97,22 +98,25 @@ body {
 }
 
 /* Focus Visible Styles */
-:is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]):focus-visible {
+:is(a, button, input, select, textarea, [tabindex]):not([tabindex='-1']):focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
-	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+  box-shadow:
+    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
     var(--shadow-md);
   z-index: 10;
   /* Bring focused element forward */
 }
 
 .btn:focus-visible {
-	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+  box-shadow:
+    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
     var(--shadow-lg);
 }
 
 .form-input:focus-visible {
-	box-shadow: var(--shadow-inset),
+  box-shadow:
+    var(--shadow-inset),
     0 0 0 var(--focus-outline-width) var(--focus-outline-color),
     var(--shadow-sm);
 }
@@ -129,21 +133,23 @@ body {
   /* Higher than non-focused tabs */
 }
 
-.checkbox-label input:focus-visible~.checkmark,
+.checkbox-label input:focus-visible ~ .checkmark,
-.radio-label input:focus-visible~.checkmark {
+.radio-label input:focus-visible ~ .checkmark {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
-	box-shadow: var(--shadow-sm),
+  box-shadow:
+    var(--shadow-sm),
     0 0 0 var(--focus-outline-width) var(--focus-outline-color);
 }
 
-.switch-container input:focus-visible+.switch {
+.switch-container input:focus-visible + .switch {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
 
 .avatar:focus-visible {
-	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+  box-shadow:
+    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
     var(--shadow-sm);
 }
 
@@ -169,7 +175,7 @@ h3 {
 h1::after,
 h2::after,
 h3::after {
-	content: "";
+  content: '';
   position: absolute;
   bottom: 0;
   left: 0;
@@ -205,7 +211,7 @@ h3 {
   margin-right: 0.5em;
 }
 
-button>.icon:last-child {
+button > .icon:last-child {
   margin-right: 0;
 }
 
@@ -230,7 +236,8 @@ button>.icon:last-child {
   padding: 0.8rem 1.6rem;
   cursor: pointer;
   box-shadow: var(--shadow-md);
-	transition: transform var(--transition-speed) var(--transition-ease-out),
+  transition:
+    transform var(--transition-speed) var(--transition-ease-out),
     box-shadow var(--transition-speed) var(--transition-ease-out),
     background-color var(--transition-speed) var(--transition-ease-out);
   position: relative;
@@ -293,7 +300,6 @@ button>.icon:last-child {
 }
 
 @keyframes jiggle-subtle {
-
   0%,
   100% {
     transform: translate(2px, 2px) scale(0.98) rotate(0deg);
@@ -324,7 +330,7 @@ button>.icon:last-child {
 
 /* Removed .card:hover transform/shadow increase */
 .card::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -334,7 +340,7 @@ button>.icon:last-child {
   /* Prevent texture from interfering */
 }
 
-.card>* {
+.card > * {
   position: relative;
   z-index: 1;
   /* Ensure content is above texture */
@@ -416,7 +422,8 @@ textarea.form-input {
   font-family: inherit;
   font-size: 1rem;
   box-shadow: var(--shadow-inset), var(--shadow-sm);
-	transition: transform var(--transition-speed) var(--transition-ease-out),
+  transition:
+    transform var(--transition-speed) var(--transition-ease-out),
     box-shadow var(--transition-speed) var(--transition-ease-out),
     border-color var(--transition-speed) var(--transition-ease-out);
   box-sizing: border-box;
@@ -506,9 +513,9 @@ select.form-input {
   border-radius: 50%;
 }
 
-.checkbox-label input:checked~.checkmark:after,
+.checkbox-label input:checked ~ .checkmark:after,
-.radio-label input:checked~.checkmark:after {
+.radio-label input:checked ~ .checkmark:after {
-	content: "";
+  content: '';
   position: absolute;
   display: block;
   transform-origin: center center;
@@ -595,7 +602,7 @@ select.form-input {
 }
 
 .list-item::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -716,12 +723,12 @@ select.form-input {
   /* Push to the right on larger screens */
 }
 
-.list-item-details>* {
+.list-item-details > * {
   margin-left: 0.5rem;
 }
 
 /* Spacing between items in details */
-.list-item-details> :first-child {
+.list-item-details > :first-child {
   margin-left: 0;
 }
 
@@ -764,7 +771,7 @@ select.form-input {
 }
 
 .badge-accent.badge-sticky::after {
-	content: "";
+  content: '';
   position: absolute;
   bottom: -1px;
   right: -1px;
@@ -816,7 +823,7 @@ select.form-input {
 
 /* Tabs */
 .tabs {
-	margin-bottom: 2rem;
+  // margin-bottom: 2rem;
 }
 
 .tab-list {
@@ -843,14 +850,19 @@ select.form-input {
   font-weight: bold;
   position: relative;
   box-shadow: var(--shadow-sm);
-	transition: transform var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out), background-color var(--transition-speed) var(--transition-ease-out), color var(--transition-speed) var(--transition-ease-out), border-color var(--transition-speed) var(--transition-ease-out);
+  transition:
+    transform var(--transition-speed) var(--transition-ease-out),
+    box-shadow var(--transition-speed) var(--transition-ease-out),
+    background-color var(--transition-speed) var(--transition-ease-out),
+    color var(--transition-speed) var(--transition-ease-out),
+    border-color var(--transition-speed) var(--transition-ease-out);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   flex-grow: 0;
 }
 
-.tab-item[aria-selected="true"] {
+.tab-item[aria-selected='true'] {
-	background-color: var(--primary);
+  background-color: var(--primary) !important;
   color: var(--dark);
   border-color: var(--black);
   /* Ensure all borders are black */
@@ -862,8 +874,8 @@ select.form-input {
   /* transform: translateY(-3px); REMOVED */
 }
 
-.tab-item:not([aria-selected="true"]):hover {
+.tab-item:not([aria-selected='true']):hover {
-	background-color: var(--secondary);
+  background-color: var(--secondary) !important;
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }
@@ -887,7 +899,7 @@ select.form-input {
 }
 
 .tab-content::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -896,7 +908,7 @@ select.form-input {
   pointer-events: none;
 }
 
-.tab-content>* {
+.tab-content > * {
   position: relative;
   z-index: 1;
 }
@@ -912,13 +924,17 @@ select.form-input {
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
-	transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear var(--transition-speed);
+  transition:
+    opacity var(--transition-speed) var(--transition-ease-out),
+    visibility 0s linear var(--transition-speed);
 }
 
 .modal-backdrop.open {
   opacity: 1;
   visibility: visible;
-	transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear 0s;
+  transition:
+    opacity var(--transition-speed) var(--transition-ease-out),
+    visibility 0s linear 0s;
 }
 
 .modal-container {
@@ -938,7 +954,7 @@ select.form-input {
 }
 
 .modal-container::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -1000,7 +1016,9 @@ select.form-input {
   padding: 0;
   line-height: 1;
   color: var(--dark);
-	transition: color var(--transition-speed) var(--transition-ease-out), transform var(--transition-speed-fast) ease-out;
+  transition:
+    color var(--transition-speed) var(--transition-ease-out),
+    transform var(--transition-speed-fast) ease-out;
 }
 
 .close-button .icon {
@@ -1046,7 +1064,7 @@ select.form-input {
 }
 
 .alert::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -1055,7 +1073,7 @@ select.form-input {
   pointer-events: none;
 }
 
-.alert>.alert-content {
+.alert > .alert-content {
   /* Wrap main content */
   display: flex;
   align-items: center;
@@ -1126,7 +1144,6 @@ select.form-input {
 
 /* Darker blue border */
 
-
 /* Progress Bar */
 .progress-container {
   width: 100%;
@@ -1204,7 +1221,7 @@ select.form-input {
 
 .switch:before {
   position: absolute;
-	content: "";
+  content: '';
   height: 24px;
   /* Adjusted size */
   width: 24px;
@@ -1216,18 +1233,19 @@ select.form-input {
   background-color: var(--dark);
   border: 2px solid var(--light);
   box-shadow: var(--shadow-sm);
-	transition: transform 0.4s var(--transition-ease-out),
+  transition:
+    transform 0.4s var(--transition-ease-out),
     background-color 0.4s var(--transition-ease-out),
     border-color 0.4s var(--transition-ease-out);
   transform: translateY(-50%);
   /* Vertical centering */
 }
 
-.switch-container input:checked+.switch {
+.switch-container input:checked + .switch {
   background-color: var(--secondary-accent);
 }
 
-.switch-container input:checked+.switch:before {
+.switch-container input:checked + .switch:before {
   background-color: var(--light);
   border-color: var(--dark);
   /* Width (64) - border*2 (6) - left (2) - width (24) = 32 */
@@ -1248,7 +1266,7 @@ select.form-input {
 }
 
 .table-container::before {
-	content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background-image: var(--paper-texture);
@@ -1451,7 +1469,8 @@ select.form-input {
   left: 50%;
   transform: translateX(-50%) scale(0.95);
   transform-origin: bottom center;
-	transition: opacity var(--transition-speed) var(--transition-ease-out),
+  transition:
+    opacity var(--transition-speed) var(--transition-ease-out),
     visibility 0s linear var(--transition-speed),
     transform var(--transition-speed) var(--transition-ease-out);
   box-shadow: var(--shadow-md);
@@ -1468,7 +1487,7 @@ select.form-input {
                when shown, removing it from the parent's clipping context.
                This CSS provides structure but cannot overcome parent overflow clipping. */
 .tooltip-text::after {
-	content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -1478,8 +1497,8 @@ select.form-input {
   border-color: var(--dark) transparent transparent transparent;
 }
 
-.tooltip .tooltip-trigger:hover+.tooltip-text,
+.tooltip .tooltip-trigger:hover + .tooltip-text,
-.tooltip .tooltip-trigger:focus-visible+.tooltip-text,
+.tooltip .tooltip-trigger:focus-visible + .tooltip-text,
 .tooltip-text.visible {
   visibility: visible;
   opacity: 1;
@@ -1525,7 +1544,6 @@ select.form-input {
 }
 
 @keyframes pulse-dot {
-
   0%,
   80%,
   100% {
@@ -1565,7 +1583,6 @@ select.form-input {
 
 /* Match button text color */
 
-
 /* Responsive */
 @media (max-width: 768px) {
   body {
@@ -1631,7 +1648,7 @@ select.form-input {
     border-right: var(--border);
   }
 
-	.tab-item[aria-selected="true"] {
+  .tab-item[aria-selected='true'] {
     border-bottom-color: var(--primary);
     margin-bottom: 0;
     /* No longer needs negative margin */
@@ -1661,7 +1678,7 @@ select.form-input {
     /* Allow badges/avatar wrap on mobile */
   }
 
-	.list-item-details>* {
+  .list-item-details > * {
     margin-left: 0;
     margin-right: 0.5rem;
     margin-bottom: 0.25rem;
@@ -1683,7 +1700,6 @@ select.form-input {
 
   /* Example smaller distance */
 
-
   .table {
     min-width: unset;
   }
@@ -1707,7 +1723,7 @@ select.form-input {
     flex-direction: column;
   }
 
-	.flex-layout-stack-mobile>.card {
+  .flex-layout-stack-mobile > .card {
     width: 100% !important;
     margin: 0 0 1.5rem 0 !important;
     flex-basis: auto !important;
@@ -1717,12 +1733,12 @@ select.form-input {
     flex-direction: column;
   }
 
-	.form-row-wrap-mobile>.form-group {
+  .form-row-wrap-mobile > .form-group {
     margin-right: 0 !important;
     width: 100%;
   }
 
-	.form-row-wrap-mobile>.form-group:not(:last-child) {
+  .form-row-wrap-mobile > .form-group:not(:last-child) {
     margin-bottom: 1.5rem;
   }
 }

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,7 +365,7 @@ onMounted(async () => {
 
 .neo-create-group-card {
   border: 3px dashed #111;
-  background: #fafafa;
+  background: var(--light);
     padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;

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;