made some changes for testing (UI)

web/vue-app/src/layout/ParentLayout.vue

@@ -42,7 +42,7 @@ onMounted(async () => {
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div style="height: 100%; display: flex; align-items: stretch">
+      <div class="back-btn-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <nav class="view-selector">
@@ -168,33 +168,26 @@ onMounted(async () => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 0; /* Remove bottom padding */
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0;
+  background: var(--header-bg);
 }
 
 /* top bar holds title and logout button */
 .topbar {
   display: flex;
-  align-items: stretch; /* Make children fill the header height */
+  align-items: stretch;
   padding: 5px 5px;
   height: 48px;
   width: 100%;
   box-sizing: border-box;
-  justify-content: space-evenly;
 }
 
-.topbar > div,
-.topbar > nav,
-.topbar > .login-btn {
+.back-btn-container {
   height: 100%;
   display: flex;
-  align-items: center; /* Center content vertically if needed */
-}
-
-.title {
-  font-size: 1.5rem;
-  color: white;
-  margin: 0;
+  align-items: stretch;
+  flex: 1 1 0;
+  justify-content: flex-start;
 }
 
 /* View Selector styles */
@@ -202,15 +195,17 @@ onMounted(async () => {
   height: 100%;
   display: flex;
   align-items: stretch;
+  flex: 2 1 0;
+  justify-content: center;
 }
 
 .view-selector button {
   height: 100%;
   display: flex;
   align-items: center;
-  background: #fff;
-  color: #667eea;
-  border: none;
+  background: var(--button-bg);
+  color: var(--button-text);
+  border: 0;
   border-radius: 8px 8px 0 0;
   padding: 0.6rem 1.2rem;
   font-weight: 600;
@@ -223,16 +218,16 @@ onMounted(async () => {
 }
 
 .view-selector button.active {
-  background: #7257b3;
-  color: #fff;
+  background: var(--button-active-bg);
+  color: var(--button-active-text);
 }
 
 .view-selector button.active svg {
-  stroke: #fff;
+  stroke: var(--button-active-text);
 }
 
 .view-selector button:hover:not(.active) {
-  background: #e6eaff;
+  background: var(--button-hover-bg);
 }
 
 /* main content remains centered */
@@ -250,12 +245,12 @@ onMounted(async () => {
 
 /* back button specific styles */
 .back-btn {
-  background: white;
+  background: var(--button-bg);
   border: 0;
   padding: 0.6rem 1rem;
   border-radius: 8px 8px 0 0;
   cursor: pointer;
-  color: #667eea;
+  color: var(--button-text);
   font-weight: 600;
   height: 100%; /* Make the button fill its parent */
   box-sizing: border-box;
@@ -264,7 +259,11 @@ onMounted(async () => {
 }
 
 .login-btn {
-  align-self: start;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  justify-content: flex-end;
 }
 
 .app-version {
@@ -272,7 +271,7 @@ onMounted(async () => {
   right: 18px;
   bottom: 12px;
   font-size: 0.92rem;
-  color: #cbd5e1; /* Brighter slate-200 */
+  color: var(--app-version);
   opacity: 0.85;
   z-index: 100;
   pointer-events: none;
@@ -281,28 +280,11 @@ onMounted(async () => {
 }
 
 @media (max-width: 480px) {
-  .back-btn {
+  .back-btn,
+  .login-btn button,
+  .view-selector button {
     padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
-  }
-}
-</style>
-
-<style>
-.login-btn button {
-  background: white;
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: #667eea;
-  font-weight: 600;
-}
-
-@media (max-width: 480px) {
-  .login-btn button {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
+    font-size: 0.85rem;
   }
 }
 </style>