From 10d720e18846e34d77e6e0415e5bd44e208b4241 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 18 Aug 2026 12:38:28 +0200
Subject: [PATCH] FIX - refine VaultX sign out action

Replace the ambiguous profile header icon circle with a compact labeled sign-out pill. Add clear danger styling, hover and pressed feedback, and keep the action within the navbar bounds.
---
 .../src/views/apps/CryptoApp.contract.test.ts |  2 +
 frontend/src/views/apps/CryptoApp.vue         | 46 +++++++++++++++----
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 332f0ab..342b3a8 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -72,6 +72,8 @@ describe('VaultX crypto app contracts', () => {
 
   it('supports secure profile editing and header sign out', () => {
     expect(source).toContain('class="profile-signout"')
+    expect(source).toContain("<span>{{ t('logout') }}</span>")
+    expect(source).not.toMatch(/icon-only\s+class="profile-signout"/)
     expect(source).toContain('class="profile-edit-button"')
     expect(source).toContain("sheet.value = 'profile'")
     expect(source).toContain('v-model="profileCurrentPassword"')
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index d9a8156..967a723 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -729,13 +729,14 @@ onUnmounted(() => {
       <template v-if="authenticated && tab === 'profile' && !detail" #right>
         <SkyLink
           component="button"
-          icon-only
           class="profile-signout"
+          type="button"
           :aria-label="t('logout')"
           :title="t('logout')"
           @click="signOut"
         >
-          <LogOut :size="15" />
+          <LogOut :size="14" />
+          <span>{{ t('logout') }}</span>
         </SkyLink>
       </template>
     </SkyNavbar>
@@ -2740,18 +2741,47 @@ onUnmounted(() => {
   letter-spacing: -0.02em;
 }
 .profile-signout {
-  width: 34px;
   height: 34px;
   min-height: 34px;
-  padding: 0;
-  color: #fff;
-  background: rgba(255, 92, 112, 0.1);
-  border: 1px solid rgba(255, 117, 136, 0.18);
-  border-radius: 50%;
+  gap: 6px;
+  padding: 0 10px;
+  color: #ff9aa8;
+  font-size: 10px;
+  font-weight: 850;
+  white-space: nowrap;
+  background: linear-gradient(
+    145deg,
+    rgba(255, 117, 136, 0.15),
+    rgba(255, 82, 106, 0.08)
+  );
+  border: 1px solid rgba(255, 117, 136, 0.25);
+  border-radius: var(--sky-radius-pill);
+  box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.045),
+    0 7px 18px rgba(255, 82, 106, 0.09);
+  transition:
+    color 160ms ease,
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
 }
 .profile-signout svg {
+  flex: 0 0 auto;
   color: #ff7588;
 }
+.profile-signout:hover {
+  color: #fff;
+  background: linear-gradient(
+    145deg,
+    rgba(255, 117, 136, 0.24),
+    rgba(255, 82, 106, 0.14)
+  );
+  border-color: rgba(255, 135, 151, 0.4);
+}
+.profile-signout:active:not(:disabled) {
+  opacity: 1;
+  transform: translateY(1px) scale(0.98);
+}
 .vault-detail-title {
   display: inline-flex;
   gap: 8px;