diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index 818e4bb..1267d57 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -146,8 +146,8 @@ "npm run typecheck passes", "Verify in browser: User section is visually compact" ], - "passes": false, - "notes": "Depinde de US-604 pentru toggle-ul de temă, modifică layout-ul în MobileDrawerMenu.vue" + "passes": true, + "notes": "Completed in iteration 8" }, { "id": "US-608", diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index ce62911..96b91e9 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -284,3 +284,9 @@ PRD: tasks/prd-ui-fixes-phase6.md [2026-01-13 16:23:41] Working on story: US-606 [2026-01-13 16:23:41] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_7_US-606.log) [2026-01-13 16:29:48] SUCCESS: Story US-606 passed! +[2026-01-13 16:29:48] Changes committed +[2026-01-13 16:29:48] Progress: 6/10 stories completed +[2026-01-13 16:29:50] === Iteration 8/30 === +[2026-01-13 16:29:50] Working on story: US-607 +[2026-01-13 16:29:50] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-607.log) +[2026-01-13 16:33:08] SUCCESS: Story US-607 passed! diff --git a/src/shared/components/mobile/MobileDrawerMenu.vue b/src/shared/components/mobile/MobileDrawerMenu.vue index 12ba103..eec4a74 100644 --- a/src/shared/components/mobile/MobileDrawerMenu.vue +++ b/src/shared/components/mobile/MobileDrawerMenu.vue @@ -210,40 +210,35 @@ - -
-
-
- -
-
+ +
+ +
+
+ {{ displayName }} - Utilizator
+
- + - - -
- -
@@ -1013,49 +1008,51 @@ onMounted(() => { } /* ================================================ - Profile Section + Profile Section - US-607: Compact layout US-606: No longer fixed at bottom, scrolls with content ================================================ */ .drawer-profile { - padding: var(--space-md) 0; + padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--surface-border); /* Extra padding at bottom for MobileBottomNav clearance (56px) */ - padding-bottom: calc(var(--header-height) + var(--space-md)); + padding-bottom: calc(var(--header-height) + var(--space-sm)); + display: flex; + flex-direction: column; + gap: var(--space-xs); } -.profile-header { - display: flex; - align-items: center; - gap: var(--space-md); - padding: var(--space-sm) var(--space-lg); - margin-bottom: var(--space-xs); +/* US-607: Compact variant - reduced spacing */ +.drawer-profile--compact { + padding: var(--space-sm) var(--space-md); + gap: var(--space-xs); } -.profile-avatar { - width: 40px; - height: 40px; - border-radius: var(--radius-full); - background: var(--blue-100); +/* US-607: User name + Logout on same row */ +.profile-row { display: flex; align-items: center; - justify-content: center; + justify-content: space-between; + gap: var(--space-sm); + min-height: 44px; +} + +.profile-user { + display: flex; + align-items: center; + gap: var(--space-sm); + min-width: 0; + flex: 1; +} + +.profile-icon { + font-size: var(--text-base); + color: var(--color-primary); flex-shrink: 0; } -.profile-avatar i { - font-size: var(--text-lg); - color: var(--color-primary); -} - -.profile-info { - display: flex; - flex-direction: column; - min-width: 0; -} - .profile-name { - font-size: var(--text-base); + font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-color); white-space: nowrap; @@ -1063,45 +1060,73 @@ onMounted(() => { text-overflow: ellipsis; } -.profile-role { +/* US-607: Compact logout button */ +.logout-btn { + display: flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-sm); + background: transparent; + border: 1px solid var(--color-error); + border-radius: var(--radius-md); + color: var(--color-error); font-size: var(--text-sm); - color: var(--text-color-secondary); + font-weight: var(--font-medium); + cursor: pointer; + transition: background var(--transition-fast), color var(--transition-fast); + min-height: 36px; + flex-shrink: 0; } -/* Logout link styling */ -.logout-link { - color: var(--color-error); -} - -.logout-link .drawer-icon { - color: var(--color-error); -} - -.logout-link:hover { +.logout-btn:hover { background: var(--red-50); } -/* Profile divider (spacing adjustment) */ -.profile-divider { - margin: var(--space-sm) var(--space-md); +.logout-btn:active { + background: var(--red-100); +} + +.logout-btn i { + font-size: var(--text-sm); } /* ================================================ - Theme Toggle (compact cyclic button) - US-604 + Theme Toggle (compact cyclic button) - US-604/US-607 ================================================ */ -.theme-toggle-link { - position: relative; +.theme-toggle-compact { + display: flex; + align-items: center; + gap: var(--space-sm); + width: 100%; + padding: var(--space-xs) var(--space-sm); + background: var(--surface-hover); + border: none; + border-radius: var(--radius-md); + color: var(--text-color); + font-size: var(--text-sm); + cursor: pointer; + transition: background var(--transition-fast); + min-height: 36px; } -.theme-toggle-link .drawer-icon { +.theme-toggle-compact:hover { + background: var(--surface-border); +} + +.theme-toggle-compact i:first-child { color: var(--color-primary); + font-size: var(--text-sm); } -.theme-cycle-hint { +.theme-toggle-compact span { + flex: 1; + text-align: left; +} + +.theme-toggle-compact i:last-child { font-size: var(--text-xs); color: var(--text-color-secondary); - margin-left: auto; opacity: 0.6; } @@ -1300,15 +1325,12 @@ onMounted(() => { color: var(--text-color-secondary); } +/* Dark mode: Profile Section (US-607) */ [data-theme="dark"] .drawer-profile { border-top-color: var(--surface-border); } -[data-theme="dark"] .profile-avatar { - background: var(--blue-900); -} - -[data-theme="dark"] .profile-avatar i { +[data-theme="dark"] .profile-icon { color: var(--blue-400); } @@ -1316,28 +1338,34 @@ onMounted(() => { color: var(--text-color); } -[data-theme="dark"] .profile-role { - color: var(--text-color-secondary); -} - -[data-theme="dark"] .logout-link { +[data-theme="dark"] .logout-btn { + border-color: var(--red-400); color: var(--red-400); } -[data-theme="dark"] .logout-link .drawer-icon { - color: var(--red-400); -} - -[data-theme="dark"] .logout-link:hover { +[data-theme="dark"] .logout-btn:hover { background: var(--red-900); } -/* Dark mode: Theme Toggle */ -[data-theme="dark"] .theme-toggle-link .drawer-icon { +[data-theme="dark"] .logout-btn:active { + background: var(--red-800); +} + +/* Dark mode: Theme Toggle (US-607) */ +[data-theme="dark"] .theme-toggle-compact { + background: var(--surface-hover); + color: var(--text-color); +} + +[data-theme="dark"] .theme-toggle-compact:hover { + background: var(--surface-border); +} + +[data-theme="dark"] .theme-toggle-compact i:first-child { color: var(--blue-400); } -[data-theme="dark"] .theme-cycle-hint { +[data-theme="dark"] .theme-toggle-compact i:last-child { color: var(--text-color-secondary); } @@ -1497,15 +1525,12 @@ onMounted(() => { color: var(--text-color-secondary); } + /* Auto dark mode: Profile Section (US-607) */ :root:not([data-theme]) .drawer-profile { border-top-color: var(--surface-border); } - :root:not([data-theme]) .profile-avatar { - background: var(--blue-900); - } - - :root:not([data-theme]) .profile-avatar i { + :root:not([data-theme]) .profile-icon { color: var(--blue-400); } @@ -1513,28 +1538,34 @@ onMounted(() => { color: var(--text-color); } - :root:not([data-theme]) .profile-role { - color: var(--text-color-secondary); - } - - :root:not([data-theme]) .logout-link { + :root:not([data-theme]) .logout-btn { + border-color: var(--red-400); color: var(--red-400); } - :root:not([data-theme]) .logout-link .drawer-icon { - color: var(--red-400); - } - - :root:not([data-theme]) .logout-link:hover { + :root:not([data-theme]) .logout-btn:hover { background: var(--red-900); } - /* Auto dark mode: Theme Toggle */ - :root:not([data-theme]) .theme-toggle-link .drawer-icon { + :root:not([data-theme]) .logout-btn:active { + background: var(--red-800); + } + + /* Auto dark mode: Theme Toggle (US-607) */ + :root:not([data-theme]) .theme-toggle-compact { + background: var(--surface-hover); + color: var(--text-color); + } + + :root:not([data-theme]) .theme-toggle-compact:hover { + background: var(--surface-border); + } + + :root:not([data-theme]) .theme-toggle-compact i:first-child { color: var(--blue-400); } - :root:not([data-theme]) .theme-cycle-hint { + :root:not([data-theme]) .theme-toggle-compact i:last-child { color: var(--text-color-secondary); } }