diff --git a/apps/visualizer/src/App.tsx b/apps/visualizer/src/App.tsx index 503e78f..b2c689c 100644 --- a/apps/visualizer/src/App.tsx +++ b/apps/visualizer/src/App.tsx @@ -156,7 +156,7 @@ export default function App() { return ( } />} + header={} />} top={} main={
diff --git a/apps/visualizer/src/layout/AuthStatus.tsx b/apps/visualizer/src/layout/AuthStatus.tsx index 9ed3d4d..4f82ef8 100644 --- a/apps/visualizer/src/layout/AuthStatus.tsx +++ b/apps/visualizer/src/layout/AuthStatus.tsx @@ -43,13 +43,13 @@ export default function AuthStatus() { return (
+
+
Zalogowany
+
{loading ? '…' : user || '—'}
+
-
-
{loading ? '…' : user || 'unknown'}
-
zalogowany
-
); } diff --git a/apps/visualizer/src/layout/TopNav.tsx b/apps/visualizer/src/layout/TopNav.tsx index 967b109..3a514f8 100644 --- a/apps/visualizer/src/layout/TopNav.tsx +++ b/apps/visualizer/src/layout/TopNav.tsx @@ -16,9 +16,10 @@ type Props = { active?: NavId; onSelect?: (id: NavId) => void; rightSlot?: ReactNode; + rightEndSlot?: ReactNode; }; -export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) { +export default function TopNav({ active = 'trade', onSelect, rightSlot, rightEndSlot }: Props) { return (
@@ -55,8 +56,8 @@ export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props)
)} + {rightEndSlot}
); } - diff --git a/apps/visualizer/src/styles.css b/apps/visualizer/src/styles.css index 0dbf625..32e5a06 100644 --- a/apps/visualizer/src/styles.css +++ b/apps/visualizer/src/styles.css @@ -288,6 +288,27 @@ a:hover { align-items: center; } +.authStatus__user { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + line-height: 1.1; +} + +.authStatus__userLabel { + font-size: 11px; + color: var(--muted); +} + +.authStatus__userName { + font-weight: 900; + font-size: 12px; +} + .topNav__iconBtn { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.12);