Merged
Conversation
Update onboarding step component to better distinguish between active, completed, and upcoming states. Move completed step indicator to a circular icon with checkmark and reduce title size. Add blur effect with reduced opacity for upcoming steps to clearly indicate they are not yet accessible. Adjust spacing and styling to improve visual hierarchy across different states.
Replace circular background container with direct CheckIcon display. Use green color instead of white on dark background for better visual feedback. Increase icon size from 3 to 4 for improved visibility and remove unnecessary wrapper div to simplify markup.
Consolidate SigninButton and ControlRegion components into a single BeforeLogin component. Replace OnboardingButton with standard button styling and improve the layout by repositioning elements in a more compact arrangement. Update button text to be more user-friendly and conditionally show troubleshooting option only when needed.
Replace text-based social links with iconified buttons using @iconify-icon/react. Add Discord, GitHub, and X icons to social links for better visual appeal. Restructure onboarding layout by moving title to sticky header and implementing auto-scroll navigation between onboarding steps for improved user experience during setup flow.
✅ Deploy Preview for hyprnote canceled.
|
✅ Deploy Preview for hyprnote-storybook canceled.
|
Add iconClass property to social media links configuration to allow individual icon sizing. Adjust Discord and GitHub icons to size-3.5 and X icon to size-2.5 with negative left margin for better visual alignment and consistency in the onboarding final section.
ComputelessComputer
force-pushed
the
c-branch-2
branch
from
b8c2639 to
9fcd624
Compare
3 tasks
- Move scroll-to-active logic into OnboardingSection via useRef + useEffect (self-contained) - Remove stepId prop, data-step attribute, and querySelector pattern from parent - Extract SCROLL_DELAY_MS and DEFAULT_ICON_SIZE named constants - Remove unused onContinue prop from BeforeLogin - Rename 'triggered' to 'autoSignInCompleted' for clarity Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
- Restore upcoming steps visibility with blurred/faded preview - Add completedTitle fallback (completedTitle ?? title) - Explicit size on all social icon entries, remove runtime check - Use OnboardingButton in BeforeLogin instead of duplicated styles Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
• Improved onboarding step visual states with better distinction between active, completed, and upcoming states
• Enhanced completion indicators with green CheckIcon and increased visibility
• Added blur effect and reduced opacity for upcoming steps to indicate inaccessibility
• Simplified BeforeLogin component layout by consolidating SigninButton and ControlRegion
• Replaced text-based social links with iconified buttons (Discord, GitHub, X)
• Restructured onboarding layout with sticky header and auto-scroll navigation
• Customized individual social icon sizes for better visual alignment