From 1dc3a2d4930a0863a23830314ff397cc007f735b Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Wed, 19 Aug 2026 19:24:05 +0500
Subject: [PATCH] Sidebar: labeled Sign out button, drop the technical info
 blurb

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ar-aging-app/frontend/src/App.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/ar-aging-app/frontend/src/App.tsx b/ar-aging-app/frontend/src/App.tsx
index 2cf67a0..04f1da3 100644
--- a/ar-aging-app/frontend/src/App.tsx
+++ b/ar-aging-app/frontend/src/App.tsx
@@ -61,22 +61,23 @@ export default function App() {
             <SideLink to="/settings" icon={SettingsIcon}>Settings</SideLink>
           </nav>
           {user && (
-            <div className="mx-3 mb-1 p-3 rounded-2xl bg-canvas/70 flex items-center gap-2.5">
-              <UserCircle2 size={20} className="text-primary shrink-0" />
-              <div className="flex-1 min-w-0">
-                <div className="text-xs font-semibold text-ink truncate">{user.display_name}</div>
-                <div className="text-[11px] text-muted truncate">{user.username}</div>
+            <div className="m-3 p-3 rounded-2xl bg-canvas/70 space-y-2.5">
+              <div className="flex items-center gap-2.5">
+                <UserCircle2 size={22} className="text-primary shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <div className="text-xs font-semibold text-ink truncate">{user.display_name}</div>
+                  <div className="text-[11px] text-muted truncate">{user.username}</div>
+                </div>
               </div>
-              <button className="p-1.5 rounded-lg text-subink hover:text-bad hover:bg-badbg"
-                title="Sign out" onClick={logout}>
-                <LogOut size={15} />
+              <button
+                className="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl
+                  text-sm font-medium text-subink bg-panel border border-line
+                  hover:text-bad hover:border-bad/30 hover:bg-badbg/40 transition-colors"
+                onClick={logout}>
+                <LogOut size={15} /> Sign out
               </button>
             </div>
           )}
-          <div className="m-3 mt-1 p-3.5 rounded-2xl bg-canvas/70 text-[11px] text-muted leading-relaxed">
-            Amazon‑only · processed on your server. No third‑party egress except the FX‑rate
-            lookup (currency codes only — never financial data).
-          </div>
         </aside>
 
         <main className="flex-1 min-w-0 overflow-y-auto">