Update header styles

2026-03-01 17:55:51 -03:00
parent 1c57084ebf
commit 74d91eb4b1
2 changed files with 137 additions and 75 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@
 */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { JSX } from 'react';
+import { LogOut, User } from 'lucide-react';

 import ActionModal from './components/ActionModal';
 import DocumentGrid from './components/DocumentGrid';
@@ -739,68 +740,75 @@ export default function App(): JSX.Element {
  return (
    <main className="app-shell">
      <header className="topbar">
-        <div>
-          <h1>LedgerDock</h1>
-          <p>Document command deck for OCR, routing intelligence, and controlled metadata ops.</p>
-        </div>
-        <div className="topbar-controls">
-          <div className="topbar-nav-group">
-            <button
-              type="button"
-              className={screen === 'documents' && documentView === 'active' ? 'active-view-button' : 'secondary-action'}
-              onClick={() => {
-                setScreen('documents');
-                setDocumentView('active');
-              }}
-            >
-              Documents
-            </button>
-            <button
-              type="button"
-              className={screen === 'documents' && documentView === 'trash' ? 'active-view-button' : 'secondary-action'}
-              onClick={() => {
-                setScreen('documents');
-                setDocumentView('trash');
-              }}
-            >
-              Trash
-            </button>
-            {isAdmin && (
+        <div className="topbar-inner">
+          <div className="topbar-brand">
+            <h1>LedgerDock</h1>
+            <p>Document command deck for OCR, routing intelligence, and controlled metadata ops.</p>
+            <p className="topbar-auth-status">
+              <User className="topbar-user-icon" aria-hidden="true" />
+              You are currently signed in as <span className="topbar-current-username">{authUser?.username}</span>
+            </p>
+          </div>
+          <div className="topbar-controls">
+            <div className="topbar-primary-row">
+              <div className="topbar-nav-group">
+                <button
+                  type="button"
+                  className={screen === 'documents' && documentView === 'active' ? 'active-view-button' : 'secondary-action'}
+                  onClick={() => {
+                    setScreen('documents');
+                    setDocumentView('active');
+                  }}
+                >
+                  Documents
+                </button>
+                <button
+                  type="button"
+                  className={screen === 'documents' && documentView === 'trash' ? 'active-view-button' : 'secondary-action'}
+                  onClick={() => {
+                    setScreen('documents');
+                    setDocumentView('trash');
+                  }}
+                >
+                  Trash
+                </button>
+                {isAdmin && (
+                  <button
+                    type="button"
+                    className={screen === 'settings' ? 'active-view-button' : 'secondary-action'}
+                    onClick={() => setScreen('settings')}
+                  >
+                    Settings
+                  </button>
+                )}
+              </div>
              <button
                type="button"
-                className={screen === 'settings' ? 'active-view-button' : 'secondary-action'}
-                onClick={() => setScreen('settings')}
+                className="secondary-action topbar-icon-action"
+                onClick={() => void handleLogout()}
+                aria-label="Sign out"
              >
-                Settings
+                <LogOut className="topbar-signout-icon" aria-hidden="true" />
              </button>
+            </div>
+
+            {screen === 'documents' && (
+              <div className="topbar-document-group">
+                <UploadSurface onUploadRequested={handleUpload} isUploading={isUploading} variant="inline" />
+              </div>
+            )}
+
+            {screen === 'settings' && isAdmin && (
+              <div className="topbar-settings-group">
+                <button type="button" className="secondary-action" onClick={() => void handleResetSettings()} disabled={isSavingSettings}>
+                  Reset To Defaults
+                </button>
+                <button type="button" onClick={() => void handleSaveSettingsFromHeader()} disabled={isSavingSettings || !settingsSaveAction}>
+                  {isSavingSettings ? 'Saving Settings...' : 'Save Settings'}
+                </button>
+              </div>
            )}
          </div>
-
-          <div className="topbar-auth-group">
-            <span className="auth-user-badge">
-              {authUser?.username} ({authUser?.role})
-            </span>
-            <button type="button" className="secondary-action" onClick={() => void handleLogout()}>
-              Sign Out
-            </button>
-          </div>
-
-          {screen === 'documents' && (
-            <div className="topbar-document-group">
-              <UploadSurface onUploadRequested={handleUpload} isUploading={isUploading} variant="inline" />
-            </div>
-          )}
-
-          {screen === 'settings' && isAdmin && (
-            <div className="topbar-settings-group">
-              <button type="button" className="secondary-action" onClick={() => void handleResetSettings()} disabled={isSavingSettings}>
-                Reset To Defaults
-              </button>
-              <button type="button" onClick={() => void handleSaveSettingsFromHeader()} disabled={isSavingSettings || !settingsSaveAction}>
-                {isSavingSettings ? 'Saving Settings...' : 'Save Settings'}
-              </button>
-            </div>
-          )}
        </div>
      </header>

--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -4,7 +4,7 @@
 .app-shell {
  width: min(1820px, 100% - 2rem);
  margin: 0 auto;
-  padding: var(--space-3) 0 var(--space-4);
+  padding: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
 }
@@ -70,18 +70,33 @@

 .topbar {
  position: sticky;
-  top: var(--space-2);
+  top: 0;
  z-index: 50;
+  left: 0;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  padding: 0;
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0;
+  background: linear-gradient(180deg, rgba(28, 42, 63, 0.96) 0%, rgba(20, 30, 47, 0.96) 100%);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(10px);
+}
+
+.topbar-inner {
+  width: min(1820px, 100% - 2rem);
+  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
-  border: 1px solid var(--color-border-strong);
-  border-radius: var(--radius-lg);
-  background: linear-gradient(180deg, rgba(28, 42, 63, 0.96) 0%, rgba(20, 30, 47, 0.96) 100%);
-  box-shadow: var(--shadow-soft);
-  backdrop-filter: blur(10px);
+}
+
+.topbar-brand {
+  display: grid;
+  gap: 0;
 }

 .topbar h1 {
@@ -97,14 +112,40 @@
  font-size: 0.85rem;
 }

+.topbar-auth-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.45rem;
+  color: var(--color-text-muted);
+  font-size: 0.76rem;
+}
+
+.topbar-user-icon {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.topbar-current-username {
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+}
+
 .topbar-controls {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
 }

+.topbar-primary-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
 .topbar-nav-group,
-.topbar-auth-group,
 .topbar-document-group,
 .topbar-settings-group {
  display: flex;
@@ -113,20 +154,19 @@
  gap: var(--space-2);
 }

-.topbar-auth-group {
-  align-items: center;
-}
-
-.auth-user-badge {
+.topbar-icon-action {
+  width: 2.05rem;
+  min-height: 2.05rem;
+  padding: 0;
  display: inline-flex;
  align-items: center;
-  padding: 0.28rem 0.5rem;
+  justify-content: center;
  border-radius: var(--radius-xs);
-  border: 1px solid rgba(108, 135, 184, 0.7);
-  background: rgba(17, 28, 44, 0.85);
-  color: var(--color-text-muted);
-  font-size: 0.74rem;
-  font-family: var(--font-mono);
+}
+
+.topbar-signout-icon {
+  width: 0.92rem;
+  height: 0.92rem;
 }

 .topbar-document-group .upload-actions-inline {
@@ -1308,6 +1348,12 @@ button:disabled {
  }

  .topbar {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .topbar-inner {
    grid-template-columns: 1fr;
  }

@@ -1316,10 +1362,16 @@ button:disabled {
  }

  .topbar-nav-group,
+  .topbar-primary-row,
  .topbar-document-group,
  .topbar-settings-group {
    justify-content: flex-start;
  }
+
+  .topbar-primary-row {
+    justify-content: space-between;
+    width: 100%;
+  }
 }

@media (max-width: 1040px) {
@@ -1404,12 +1456,14 @@ button:disabled {

@media (max-width: 560px) {
  .topbar-nav-group,
+  .topbar-primary-row,
  .topbar-document-group,
  .topbar-settings-group {
    width: 100%;
  }

  .topbar-nav-group button,
+  .topbar-primary-row button,
  .topbar-document-group button,
  .topbar-settings-group button {
    flex: 1;