From 0eff432e67980304ce61900bce46edf4f086b5d3 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 3 Jul 2026 09:37:45 -0600
Subject: [PATCH 1/6] Consolidate message-bars into BaseTemplate and move them
 below logo

---
 .../themes/tbpro/assets/vue/BaseTemplate.vue  | 37 ++++++++++++-------
 .../assets/vue/components/MessageBar.vue      |  6 ---
 .../assets/vue/views/ConfigToptView/index.vue |  4 --
 .../vue/views/DeleteCredentialView/index.vue  |  3 --
 .../assets/vue/views/ErrorView/index.vue      | 11 ------
 .../vue/views/ForgotPasswordView/index.vue    | 10 -----
 .../tbpro/assets/vue/views/InfoView/index.vue | 10 -----
 .../LoginRecoveryAuthnCodeView/index.vue      |  2 -
 .../assets/vue/views/LoginTotpView/index.vue  |  2 -
 .../assets/vue/views/LoginView/index.vue      | 14 ++-----
 .../assets/vue/views/LogoutView/index.vue     | 12 ------
 .../vue/views/PageExpiredView/index.vue       | 12 ------
 .../assets/vue/views/RegisterView/index.vue   | 18 ++-------
 .../views/RouteNotImplementedView/index.vue   | 12 ------
 .../views/SelectAuthenticatorView/index.vue   |  3 --
 .../vue/views/UpdatePasswordView/index.vue    | 12 ------
 16 files changed, 31 insertions(+), 137 deletions(-)

diff --git a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
index d631159b2..e41f5aecc 100644
--- a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
+++ b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import ThundermailLogo from '@kc/svg/thundermail-logo-blue.svg';
+import MessageBar from '@kc/vue/components/MessageBar.vue';
 
 const clientUrl = window._page.currentView?.clientUrl;
-
 </script>
 
 <template>
@@ -18,6 +17,11 @@ const clientUrl = window._page.currentView?.clientUrl;
           <a :href="clientUrl" class="logo-link">
             <img :src="ThundermailLogo" alt="Thundermail" class="base-template__logo" />
           </a>
+
+          <div id="message-bar" class="message-bar">
+            <message-bar />
+          </div>
+
           <div class="panel-contents">
             <slot />
           </div>
@@ -66,7 +70,6 @@ section {
     width: 100%;
     height: auto;
     min-height: 100vh;
-    max-height: var(--max-card-height);
     display: flex;
     align-items: stretch;
     justify-content: center;
@@ -90,11 +93,25 @@ section {
       height: 100%;
       display: flex;
       flex-direction: column;
-      gap: 3rem;
+      gap: 2rem;
       padding: 6rem 2rem;
 
-      &:has(.notice-bar) {
-        padding: 6rem 2rem;
+      .message-bar {
+        &:not(:has(:deep(.notice-bar))) {
+          display: none;
+        }
+      }
+
+      .logo-link {
+        display: block;
+        text-decoration: none;
+        width: min-content;
+
+        .logo {
+          height: 36px;
+          width: auto;
+          transition: opacity 0.2s ease;
+        }
       }
     }
   }
@@ -146,13 +163,7 @@ section {
         min-height: auto;
 
         .panel {
-
-
-          padding: 6rem 10rem 5.625rem 6rem;
-
-          &:has(.notice-bar) {
-            padding: 6rem 10rem 5.625rem 6rem;
-          }
+          padding: 6rem 6rem 5.625rem 6rem;
         }
 
         .panel-contents {
diff --git a/keycloak/themes/tbpro/assets/vue/components/MessageBar.vue b/keycloak/themes/tbpro/assets/vue/components/MessageBar.vue
index 68c6b19d0..1339326bb 100644
--- a/keycloak/themes/tbpro/assets/vue/components/MessageBar.vue
+++ b/keycloak/themes/tbpro/assets/vue/components/MessageBar.vue
@@ -15,9 +15,3 @@ const messageType = computed(() => {
 <template>
   <notice-bar data-testid="notice-bar" class="notice-bar" :type="messageType" v-if="message?.type">{{ message?.summary }}</notice-bar>
 </template>
-
-<style scoped>
-.notice-bar {
-  margin-bottom: var(--space-12);
-}
-</style>
diff --git a/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
index fc3cc63b9..065077620 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
@@ -9,8 +9,6 @@ import {
 import { computed, ref, useTemplateRef } from "vue";
 import { i18n } from '@kc/composables/i18n.js';
 import CancelForm from '@kc/vue/components/CancelForm.vue';
-import MessageBar from "@kc/vue/components/MessageBar.vue";
-
 const isManualMode = ref(false);
 const formAction = window._page.currentView?.formAction;
 const settingsForm = useTemplateRef('settings-form');
@@ -117,8 +115,6 @@ export default {
 
 
 <template>
-  <message-bar/>
-
   <h2>{{ $t('loginTotpTitle') }}</h2>
   <cancel-form ref="cancel-form" :action="formAction" cancelId="cancelTOTPBtn" cancelValue="true"
                 cancelName="cancel-aia"/>
diff --git a/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue b/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
index ff5e955f5..bcad901b3 100644
--- a/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
@@ -2,8 +2,6 @@
 import { DangerButton, PrimaryButton } from '@thunderbirdops/services-ui';
 import { useTemplateRef } from 'vue';
 import CancelForm from '@kc/vue/components/CancelForm.vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 const formAction = window._page.currentView?.formAction;
 const loginForm = useTemplateRef('login-form');
 const cancelForm = useTemplateRef('cancel-form');
@@ -27,7 +25,6 @@ export default {
 </script>
 
 <template>
-  <message-bar/>
   <h2>{{ deleteCredentialTitle }}</h2>
   <cancel-form ref="cancel-form" :action="formAction" cancelId="kc-decline" cancelValue="$t('doCancel')"
                 cancelName="cancel-aia"/>
diff --git a/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
index 332d3f214..6c34dbd7d 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 import { BrandButton } from '@thunderbirdops/services-ui';
 import { PhArrowLeft } from '@phosphor-icons/vue';
 
@@ -14,8 +13,6 @@ export default {
 </script>
 
 <template>
-  <message-bar/>
-
   <h2>{{ $t('errorTitle') }}</h2>
   <template v-if="actionUrl">
     <div class="button-container">
@@ -29,14 +26,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
index 8802a23f3..fedd65646 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { TextInput, PrimaryButton, NoticeBar, NoticeBarTypes } from "@thunderbirdops/services-ui";
 import { ref, computed, useTemplateRef } from 'vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 
 const errors = window._page.currentView?.errors;
 const formAction = window._page.currentView?.formAction;
@@ -30,7 +29,6 @@ export default {
 
 <template>
   <notice-bar :type="NoticeBarTypes.Critical" v-if="usernameError">{{ $t('forgotPasswordError') }}</notice-bar>
-  <message-bar v-else/>
 
   <h2>{{ $t('emailForgotTitle') }}</h2>
   <form
@@ -67,14 +65,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/InfoView/index.vue b/keycloak/themes/tbpro/assets/vue/views/InfoView/index.vue
index 4980ab46c..9ed2c293b 100644
--- a/keycloak/themes/tbpro/assets/vue/views/InfoView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/InfoView/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 import { BrandButton } from '@thunderbirdops/services-ui';
 import { PhArrowRight } from '@phosphor-icons/vue';
 import { computed } from 'vue';
@@ -39,7 +38,6 @@ export default {
     </h1>
     <p class="text" v-if="isVerifyEmailAction">{{ $t('infoVerifyEmailText') }}</p>
     <p class="text" v-else-if="isAccountUpdated">{{ $t('infoAccountUpdatedText') }}</p>
-    <message-bar v-if="messageHeader && messageHeader !== message?.summary" />
   </header>
   <main>
     <ul class="required-actions" v-if="!isSingleAction">
@@ -57,14 +55,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 .required-actions {
   margin: 0;
   margin-bottom: 1.5rem;
diff --git a/keycloak/themes/tbpro/assets/vue/views/LoginRecoveryAuthnCodeView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LoginRecoveryAuthnCodeView/index.vue
index 8410c5e04..a4124eda0 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LoginRecoveryAuthnCodeView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LoginRecoveryAuthnCodeView/index.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { TextInput, PrimaryButton, LinkButton } from "@thunderbirdops/services-ui";
 import { computed, useTemplateRef } from "vue";
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 import CancelForm from '@kc/vue/components/CancelForm.vue';
 
 const formAction = window._page.currentView?.formAction;
@@ -36,7 +35,6 @@ export default {
     <h2>{{ $t('authRecoveryCodeHeader') }}</h2>
     <form id="kc-recovery-code-login-form" ref="login-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
           @keyup.enter="onSubmit">
-      <message-bar/>
       <div class="form-elements">
         <text-input data-testid="recovery-code-input" id="recoveryCodeInput" name="recoveryCodeInput"
                     autocomplete="off" required autofocus :error="recoveryError">
diff --git a/keycloak/themes/tbpro/assets/vue/views/LoginTotpView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LoginTotpView/index.vue
index 42f974429..98ac0d617 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LoginTotpView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LoginTotpView/index.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { TextInput, PrimaryButton, SelectInput, LinkButton } from "@thunderbirdops/services-ui";
 import { computed, ref, useTemplateRef } from "vue";
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 import CancelForm from '@kc/vue/components/CancelForm.vue';
 
 const errors = window._page.currentView?.errors;
@@ -38,7 +37,6 @@ export default {
     <h2>{{ $t('doLogIn') }}</h2>
     <form id="kc-form-login" ref="login-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
           @keyup.enter="onSubmit">
-      <message-bar/>
       <div class="form-elements">
         <!-- #1011: with a single credential there's nothing to choose, so hide the
              selector (matches stock Keycloak's `userOtpCredentials?size gt 1` guard). -->
diff --git a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
index d79243aa1..cc138f636 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
@@ -2,7 +2,6 @@
 import { ref, computed, useTemplateRef } from 'vue';
 import { TextInput, BrandButton, CheckboxInput, NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
 import { PhArrowRight } from '@phosphor-icons/vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 import ThunderbirdLogoLight from '@kc/svg/thunderbird-pro-light.svg';
 import { TBPRO_WAIT_LIST } from '@kc/defines';
 
@@ -63,9 +62,8 @@ export default {
 </script>
 
 <template>
-  <notice-bar :type="NoticeBarTypes.Critical" v-if="firstError">{{ firstError }}</notice-bar>
-  <message-bar v-else-if="message?.type" />
-  <notice-bar :type="NoticeBarTypes.Info" v-else>
+  <notice-bar :type="NoticeBarTypes.Critical" v-if="firstError" class="notice-bar-login">{{ firstError }}</notice-bar>
+  <notice-bar :type="NoticeBarTypes.Info" v-else-if="!message?.type" class="notice-bar-login">
     <i18n-t keypath="inviteOnly" tag="span">
       <a :href="TBPRO_WAIT_LIST" data-testid="go-to-invite-only-url" target="_blank">{{ $t('inviteOnlyAction') }}</a>
     </i18n-t>
@@ -158,12 +156,8 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
+.notice-bar-login {
+  margin-bottom: 1.5rem;
 }
 
 .logo-link {
diff --git a/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
index ca3930eb6..a529c0116 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { PrimaryButton } from '@thunderbirdops/services-ui';
 import { useTemplateRef } from 'vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 const formAction = window._page.currentView?.formAction;
 const logoutForm = useTemplateRef('logout-form');
 
@@ -20,8 +18,6 @@ export default {
 </script>
 
 <template>
-  <message-bar />
-
   <h2>{{ $t('logoutConfirmTitle') }}</h2>
   <form id="kc-logout-confirm" ref="logout-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
         @keyup.enter="onSubmit">
@@ -41,14 +37,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 .logo-link {
   display: block;
   text-decoration: none;
diff --git a/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue b/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
index 2e0ae6c12..43627c4fe 100644
--- a/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 const restartFlowUrl = window._page.currentView?.restartFlowUrl;
 const loginUrl = window._page.currentView?.loginUrl;
 </script>
@@ -12,8 +10,6 @@ export default {
 </script>
 
 <template>
-  <message-bar/>
-
   <h2>{{ $t('pageExpiredTitle') }}</h2>
   <div class="buttons">
     <p>{{ $t('pageExpiredMsg1') }} <a data-testid="restart-flow-url" :href="restartFlowUrl">{{ $t('doClickHere') }}</a></p>
@@ -22,14 +18,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
index 55a059ea6..59ca84382 100644
--- a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
@@ -3,7 +3,6 @@ import { TextInput, BrandButton, NoticeBar, NoticeBarTypes } from '@thunderbirdo
 import { computed, ref, useTemplateRef } from 'vue';
 import { useRoute } from 'vue-router';
 import { PhArrowRight } from '@phosphor-icons/vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
 
 const route = useRoute();
 
@@ -73,12 +72,9 @@ export default {
 
   <h2 data-testid="title">{{ $t('registerTitle') }}</h2>
 
-  <slot name="notice-bars">
-    <notice-bar data-testid="error-notice-bar" :type="NoticeBarTypes.Critical" v-if="usernameError || passwordError || passwordConfirmError || recoveryEmailError">
-      {{ $t('registerError') }}
-    </notice-bar>
-    <message-bar v-else/>
-  </slot>
+  <notice-bar data-testid="error-notice-bar" :type="NoticeBarTypes.Critical" v-if="usernameError || passwordError || passwordConfirmError || recoveryEmailError">
+    {{ $t('registerError') }}
+  </notice-bar>
 
   <form id="kc-register-form" ref="register-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
         @keyup.enter="onSubmit">
@@ -160,14 +156,6 @@ export default {
   display: none;
 }
 
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 .logo-link {
   display: block;
   text-decoration: none;
diff --git a/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue b/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
index fb8c906f4..eb110147f 100644
--- a/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 console.error('Route not implemented', {
   pageId: window?._page?.pageId,
   page: window?._page,
@@ -16,22 +14,12 @@ export default {
 </script>
 
 <template>
-  <message-bar />
-
   <h1>{{ $t('routeNotImplementedTitle') }}</h1>
   <p>{{ $t('routeNotImplementedText1') }}</p>
   <p>{{ $t('routeNotImplementedText2') }}</p>
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 h1 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/SelectAuthenticatorView/index.vue b/keycloak/themes/tbpro/assets/vue/views/SelectAuthenticatorView/index.vue
index 81ac2f0fc..477835eec 100644
--- a/keycloak/themes/tbpro/assets/vue/views/SelectAuthenticatorView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/SelectAuthenticatorView/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 const formAction = window._page.currentView?.formAction;
 
 // Surface the authenticator app first; recovery codes are a fallback. Falls back to
@@ -23,7 +21,6 @@ export default {
 <template>
   <div class="panel">
     <h2>{{ $t('loginChooseAuthenticator') }}</h2>
-    <message-bar/>
     <form method="POST" :action="formAction" class="select-auth-form">
       <button
         v-for="selection in authenticationSelections"
diff --git a/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue b/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
index 83ffc8fc4..0470dedba 100644
--- a/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { TextInput, PrimaryButton, CheckboxInput } from "@thunderbirdops/services-ui";
 import { computed, useTemplateRef } from 'vue';
-import MessageBar from '@kc/vue/components/MessageBar.vue';
-
 const formAction = window._page.currentView?.formAction;
 const updatePasswordForm = useTemplateRef('update-password-form');
 const errors = window._page.currentView?.errors;
@@ -26,8 +24,6 @@ export default {
 
 
 <template>
-  <message-bar/>
-
   <h2>{{ $t('updatePasswordTitle') }}</h2>
   <form id="kc-passwd-update-form" ref="update-password-form" method="POST" :action="formAction" @submit.prevent="onSubmit" @keyup.enter="onSubmit">
     <div class="form-elements">
@@ -45,14 +41,6 @@ export default {
 </template>
 
 <style scoped>
-.notice-bar {
-  position: absolute;
-  top: 1rem;
-  left: 1.5rem;
-  right: 1.5rem;
-  z-index: 1;
-}
-
 .logo-link {
   display: block;
   text-decoration: none;

From 153df9911b2c25367f187419dce34ed163dff577 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 3 Jul 2026 09:43:24 -0600
Subject: [PATCH 2/6] Better vertical distancing for logo, notice and
 panel-contents

---
 keycloak/themes/tbpro/assets/vue/BaseTemplate.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
index e41f5aecc..3007e364b 100644
--- a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
+++ b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
@@ -93,10 +93,11 @@ section {
       height: 100%;
       display: flex;
       flex-direction: column;
-      gap: 2rem;
       padding: 6rem 2rem;
 
       .message-bar {
+        margin-block-end: 1.5rem;
+
         &:not(:has(:deep(.notice-bar))) {
           display: none;
         }
@@ -106,6 +107,7 @@ section {
         display: block;
         text-decoration: none;
         width: min-content;
+        margin-block-end: 2rem;
 
         .logo {
           height: 36px;

From f1db46785d1ae7c2c37f97fdde579c4cf6ef70bf Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 3 Jul 2026 09:43:48 -0600
Subject: [PATCH 3/6] Remove unused variables

---
 keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
index cc138f636..9cb8c60a4 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
@@ -2,16 +2,13 @@
 import { ref, computed, useTemplateRef } from 'vue';
 import { TextInput, BrandButton, CheckboxInput, NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
 import { PhArrowRight } from '@phosphor-icons/vue';
-import ThunderbirdLogoLight from '@kc/svg/thunderbird-pro-light.svg';
 import { TBPRO_WAIT_LIST } from '@kc/defines';
 
 const firstError = window._page.currentView?.firstError;
 const formAction = window._page.currentView?.formAction;
 const rememberMe = window._page.currentView?.rememberMe;
 const forgotPasswordUrl = window._page.currentView?.forgotPasswordUrl;
-const registerUrl = window._page.currentView?.registerUrl;
 const supportUrl = window._page.currentView?.supportUrl;
-const clientUrl = window._page.currentView?.clientUrl;
 const loginForm = useTemplateRef('login-form');
 const message = window._page?.message;
 const tbProPrimaryDomain = window._page.currentView?.tbProPrimaryDomain;

From cfd5f73d5a4ee60972b0a214e94c7c9ff85aa39f Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 3 Jul 2026 10:11:44 -0600
Subject: [PATCH 4/6] Remove duplicated .logo-link

---
 .../assets/vue/views/ConfigToptView/index.vue  | 12 ------------
 .../vue/views/DeleteCredentialView/index.vue   | 12 ------------
 .../tbpro/assets/vue/views/ErrorView/index.vue | 16 ----------------
 .../vue/views/ForgotPasswordView/index.vue     | 16 ----------------
 .../tbpro/assets/vue/views/LoginView/index.vue | 18 +-----------------
 .../assets/vue/views/LogoutView/index.vue      | 16 ----------------
 .../assets/vue/views/PageExpiredView/index.vue | 16 ----------------
 .../assets/vue/views/RegisterView/index.vue    | 16 ----------------
 .../views/RouteNotImplementedView/index.vue    | 12 ------------
 .../vue/views/UpdatePasswordView/index.vue     | 16 ----------------
 .../assets/vue/views/VerifyEmailView/index.vue | 12 ------------
 11 files changed, 1 insertion(+), 161 deletions(-)

diff --git a/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
index 065077620..c1bd90481 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
@@ -197,18 +197,6 @@ export default {
 </template>
 
 <style scoped>
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-  }
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue b/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
index bcad901b3..d36082dc8 100644
--- a/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
@@ -40,18 +40,6 @@ export default {
 </template>
 
 <style scoped>
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-  }
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
index 6c34dbd7d..a7050a566 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
@@ -38,20 +38,4 @@ h2 {
 .button-container {
   width: fit-content;
 }
-
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
 </style>
diff --git a/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue b/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
index fedd65646..31e73a38f 100644
--- a/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
@@ -74,22 +74,6 @@ h2 {
   margin: 0 0 1.5rem 0;
 }
 
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 .form-elements {
   display: flex;
   flex-direction: column;
diff --git a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
index 9cb8c60a4..888839385 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
@@ -157,22 +157,6 @@ export default {
   margin-bottom: 1.5rem;
 }
 
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 h2 {
   font-size: 2.25rem;
   font-family: metropolis;
@@ -188,7 +172,7 @@ form {
 }
 
 .forgot-password-link {
-  display: block;
+  display: inline-block;
   font-size: 0.6875rem;
   color: var(--colour-ti-muted);
   margin-block-end: 2rem;
diff --git a/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue b/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
index a529c0116..fc4276d09 100644
--- a/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/LogoutView/index.vue
@@ -37,22 +37,6 @@ export default {
 </template>
 
 <style scoped>
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 h2 {
   font-size: 2.25rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue b/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
index 43627c4fe..f64b0344e 100644
--- a/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/PageExpiredView/index.vue
@@ -27,22 +27,6 @@ h2 {
   margin: 0 0 1.5rem 0;
 }
 
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 .buttons {
   margin-top: var(--space-24);
   width: 100%;
diff --git a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
index 59ca84382..7c1a93142 100644
--- a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
@@ -156,22 +156,6 @@ export default {
   display: none;
 }
 
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 h2 {
   font-size: 2.25rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue b/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
index eb110147f..b60d43597 100644
--- a/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/RouteNotImplementedView/index.vue
@@ -28,16 +28,4 @@ h1 {
   color: var(--colour-primary-default);
   margin: 0 0 1.5rem 0;
 }
-
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-  }
-}
 </style>
diff --git a/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue b/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
index 0470dedba..5ef1610b4 100644
--- a/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/UpdatePasswordView/index.vue
@@ -41,22 +41,6 @@ export default {
 </template>
 
 <style scoped>
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 h2 {
   font-size: 1.5rem;
   font-family: metropolis;
diff --git a/keycloak/themes/tbpro/assets/vue/views/VerifyEmailView/index.vue b/keycloak/themes/tbpro/assets/vue/views/VerifyEmailView/index.vue
index 2ea6c8990..8a8b4b685 100644
--- a/keycloak/themes/tbpro/assets/vue/views/VerifyEmailView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/VerifyEmailView/index.vue
@@ -57,18 +57,6 @@ h2 {
   margin: 0 0 1.5rem 0;
 }
 
-.logo-link {
-  display: block;
-  text-decoration: none;
-  margin-block-end: 2.8125rem;
-
-  .logo {
-    height: 36px;
-    width: auto;
-    transition: opacity 0.2s ease;
-  }
-}
-
 .buttons {
   margin-top: var(--space-24);
   width: 100%;

From ff8d4bb24762e5fe81070666181322c38a5927c1 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 6 Jul 2026 09:00:51 -0600
Subject: [PATCH 5/6] Add extra guard for RegisterView notice-bar

---
 .../themes/tbpro/assets/vue/views/RegisterView/index.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
index 7c1a93142..d1cb47c64 100644
--- a/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
+++ b/keycloak/themes/tbpro/assets/vue/views/RegisterView/index.vue
@@ -10,6 +10,7 @@ const errors = window._page.currentView?.errors;
 const formAction = window._page.currentView?.formAction;
 const tbProPrimaryDomain = `@${window._page.currentView?.tbProPrimaryDomain}`;
 const attributeValues = window._page.currentView?.attributes;
+const message = window._page?.message;
 
 // Fixed values
 const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC';
@@ -72,7 +73,11 @@ export default {
 
   <h2 data-testid="title">{{ $t('registerTitle') }}</h2>
 
-  <notice-bar data-testid="error-notice-bar" :type="NoticeBarTypes.Critical" v-if="usernameError || passwordError || passwordConfirmError || recoveryEmailError">
+  <notice-bar
+    data-testid="error-notice-bar"
+    :type="NoticeBarTypes.Critical"
+    v-if="!message?.type && (usernameError || passwordError || passwordConfirmError || recoveryEmailError)"
+  >
     {{ $t('registerError') }}
   </notice-bar>
 

From eb557889e168175e49b930857e36eea2d3698408 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 6 Jul 2026 09:01:06 -0600
Subject: [PATCH 6/6] Cleanup unused CSS

---
 keycloak/themes/tbpro/assets/vue/BaseTemplate.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
index 3007e364b..528c1cfac 100644
--- a/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
+++ b/keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
@@ -97,10 +97,6 @@ section {
 
       .message-bar {
         margin-block-end: 1.5rem;
-
-        &:not(:has(:deep(.notice-bar))) {
-          display: none;
-        }
       }
 
       .logo-link {
@@ -112,7 +108,6 @@ section {
         .logo {
           height: 36px;
           width: auto;
-          transition: opacity 0.2s ease;
         }
       }
     }