Skip to content

refactor(lockscreen): Refactor UserLogin and enhance macOS aesthetic#85

Merged
ar1603 merged 1 commit into
developmentfrom
amitraikwar/lockscreen-refactor
Apr 19, 2026
Merged

refactor(lockscreen): Refactor UserLogin and enhance macOS aesthetic#85
ar1603 merged 1 commit into
developmentfrom
amitraikwar/lockscreen-refactor

Conversation

@ar1603

@ar1603 ar1603 commented Apr 19, 2026

Copy link
Copy Markdown
Contributor

Issue:

  • Unhandled 'Permissions check failed' runtime error crashes dev server on fullscreen load.
  • Undesired AM/PM string visible in Lock screen clock.
  • Lock screen login UI was cluttered, used rectangular buttons, and lacked macOS authentic details like hints and click-away dismissal.

Root-cause:

  • Fullscreen API requires a user gesture; programmatic calls return rejected promises which crashed the React dev server overlay.
  • toLocaleTimeString was defaulting to 12-hour format in some locales.
  • Chakra UI Button base styles conflicted with custom hover transforms, breaking the visual macOS aesthetic for the user avatar.

Fix:

  • Catch rejected promises from the fullscreen API.
  • Explicitly enforce 24-hour format (hour12: false) for the lock screen clock.
  • Replace Chakra UI Button components with plain Box elements to achieve pure CSS circular avatars, stacked text layouts, and ring-glow hover animations.

Changes:

  • App.tsx: Handle fullscreen promise rejection to fix permission errors.
  • TimeDate.tsx: Force 24-hour time format removing AM/PM.
  • DateTime.selector.ts: Refactor timeInAmPm to use native Intl API instead of lodash.
  • UserLogin.tsx:
    • Extract subcomponents (UserAvatarButton, PasswordInput, HintPopover).
    • Adopt macOS-style circular avatar with hover ring.
    • Add translucent hint popover next to password input.
    • Add background click-away overlay.
  • locales: Add password hint translation keys.

Issue:
- Unhandled 'Permissions check failed' runtime error crashes dev server on fullscreen load.
- Undesired AM/PM string visible in Lock screen clock.
- Lock screen login UI was cluttered, used rectangular buttons, and lacked macOS authentic details like hints and click-away dismissal.

Root-cause:
- Fullscreen API requires a user gesture; programmatic calls return rejected promises which crashed the React dev server overlay.
- `toLocaleTimeString` was defaulting to 12-hour format in some locales.
- Chakra UI `Button` base styles conflicted with custom hover transforms, breaking the visual macOS aesthetic for the user avatar.

Fix:
- Catch rejected promises from the fullscreen API.
- Explicitly enforce 24-hour format (`hour12: false`) for the lock screen clock.
- Replace Chakra UI `Button` components with plain `Box` elements to achieve pure CSS circular avatars, stacked text layouts, and ring-glow hover animations.

Changes:
- App.tsx: Handle fullscreen promise rejection to fix permission errors.
- TimeDate.tsx: Force 24-hour time format removing AM/PM.
- DateTime.selector.ts: Refactor timeInAmPm to use native Intl API instead of lodash.
- UserLogin.tsx:
  - Extract subcomponents (UserAvatarButton, PasswordInput, HintPopover).
  - Adopt macOS-style circular avatar with hover ring.
  - Add translucent hint popover next to password input.
  - Add background click-away overlay.
- locales: Add password hint translation keys.
@ar1603 ar1603 self-assigned this Apr 19, 2026
@ar1603 ar1603 merged commit 51afd68 into development Apr 19, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant