55 aligning animation and validation feedback for input components #60
Conversation
This file contains 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
future improvements => debounce, caching, screen-reader,
…tment setup button disabled animation and accessible typography colors for form
Added custom lottie animation for successful registration and updated 'registered' state
next step - proper integration
additionally cleaned the modal title styling and added company related imprints
Stable and categorized by sequence. Poised for integrating inside separate components.
This commit refactors the checkout process into separate components for better code organization, reusability, and maintainability. The following changes have been made: 1. Created a new `BasketManager` component to handle basket creation and package addition logic. 2. Created a new `PackageManager` component to handle package-related operations, such as checking if a specific package is present in the basket. 3. Created a new `TebexCheckout` component to encapsulate the logic related to the Tebex checkout process, including initialization, event handling, and launching the checkout. 4. Refactored the `CheckoutProcess` component to act as the main container for the checkout process flow, orchestrating the interactions between the other components. 5. Updated the import statements and component usage throughout the codebase to reflect the new component structure. This refactoring improves code organization by separating concerns into individual components, making the codebase more modular and easier to maintain. Each component has a well-defined responsibility, facilitating code reuse and testability. While the overall functionality remains the same, the code is now more readable, maintainable, and extensible, making it easier to enhance or refactor specific parts of the checkout process without affecting the entire codebase.
todo - small styling changes
additionally refactored dispatcher
Optimize button behavior with useCallback and state-driven animations Implemented useCallback to optimize button click handling, ensuring that the click event is only redefined when necessary dependencies change. Introduced state management for the shake animation effect to dynamically update based on the button's disabled state. These changes enhance UI responsiveness and reduce unnecessary re-renders, improving overall performance and user experience in form interactions. UserCard Enhancements: Implemented hover animation functionality for the UserCard component to enrich user experience with interactive visual cues. Added a new state variable isHovered to manage the hover state and integrated handleMouseEnter and handleMouseLeave event handlers to update this state. Modified the LottieAnimation component to conditionally render animations based on the isHovered state, ensuring a dynamic response to user interactions. Improved event handling by stopping propagation in hover event handlers to prevent glitches and unintended animation triggers when interacting with nested elements.
This commit improves the user interaction with the input field. It includes changes to move the cursor to the end of the input field when it is focused. This is particularly useful when the user interacts with the clear, visibility, or redo buttons. The commit also includes a fix for a timing issue that could prevent the cursor from being correctly positioned at the end of the input field.
This commit integrates Microsoft Clarity and Google Analytics into our application. - Added Microsoft Clarity and Google Analytics initialization in `utils/msclarity.client.ts` and `utils/gtags.client.ts` respectively. - Utilized the tracking IDs in `root.tsx`. - Updated Privacy Policy and Terms of Service to include disclosures for Microsoft Clarity and Google Analytics. - Added Microsoft Clarity ID and Google Analytics Tracking ID to the .env.example file. - Updated Privacy Policy and Terms of Service to include disclosures for Microsoft Clarity and Google Analytics on main imperfectgamers.org site
fixed subsequent issue where back required 2 invokes on logout to return to welcome page from logout.
Detailed changes include: - Fixed an issue in the useEffect hook handling fetcher responses to properly differentiate between success and error scenarios, ensuring the registrationSuccess state is only set true when registration is genuinely successful. - Implemented conditional rendering to display a success view upon successful registration, enhancing user feedback and experience. - Moved the handleClick function inside the SignUpForm component to improve encapsulation and maintainability of the event handling logic. - Updated the main return logic to conditionally render the success view if the registrationSuccess state is true, ensuring that users see this screen only after a successful registration. - Added logic to reset the form fields (email, password, and confirm password) upon successful registration, helping maintain a clean state for new interactions. - Updated useEffect dependencies to trigger updateCloseInterceptReason when registrationSuccess changes, ensuring the reason for closing the modal is accurately updated in response to state changes. - Added disabled support for field inputs - Commented flash error messaging for future implementation refactor
Fix registration error handling to prevent previous errors from flashing before showing the success screen. Ensure error messages are cleared on successful registration and conditionally render errors only when not submitting.
this also resulted in finishing the task this branch was created from. Added minor details such as roles and added disabled testing kit flag switches. Refined colors for better contrast on imprints. Added autocomplete to inputfield. removed extra clarity loader issue.
need to consider linting each commit to avoid this
This was
linked to
issues
May 19, 2024
Closed
cheesea3
added
documentation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Pull Request: Enhanced Visual Feedback and Animations for
InputComponentOverview
This pull request was originally to just reduce a series of enhancements to the
Inputcomponent to improve the user experience by providing immediate and understandable feedback based on schema-driven validations. We ended up making additional changes align with the proposed task of refining animations and colors based on validation results, ensuring a more dynamic and cohesive user experience. This pull request introduces several key updates and enhancements across various components and configurations, aimed at improving functionality, user experience, and code maintainability.Changes Made
Environment Variables Update:
.env.exampleGA_TRACKING_IDandMS_CLARITY_IDfor Google Analytics and Microsoft Clarity integration.Authentication Enhancements:
app/auth/authenticator.server.tsstatusCodeto the response object inregisterUserfunction.Enhanced Animation and Styling Based on Validation Status:
Input.tsxInputcomponent has been refactored to dynamically reflect validation status with refined animations and colors. This was achieved by defining variant types (default,error,success) and adjusting the component's styling based on these variants.Standardization of Input Feedback:
InputField.tsxInputFieldcomponent was created to ensure consistent validation feedback across various forms such as sign-up and settings.Creation of
InputProps.tsx:InputProps.tsxButton Component Updates:
app/components/atoms/Button/Button.tsx,app/components/atoms/Button/ButtonProps.tsxHeading Component Styling:
app/components/atoms/Heading/Heading.tsxNew Logo Components:
app/components/atoms/ImperfectAndCompanyLogo.tsx,app/components/atoms/ImperfectGamersLogo.tsxInput Component Refactor:
app/components/atoms/Input/Input.tsx,app/components/atoms/Input/InputBase.tsx,app/components/atoms/Input/InputContainer.tsxLottie Animation Integration:
app/components/atoms/LottieAnimation.tsxModal Component Enhancement:
app/components/atoms/Modal/Modal.tsxStyling Constants:
app/components/atoms/styles/Checkout Process Components:
app/components/molecules/CheckoutProcess/*Password Field Enhancement:
app/components/molecules/ConfirmPasswordField/ConfirmPasswordField.tsxError Message Component:
app/components/molecules/ErrorMessage/ErrorMessage.tsxEnhanced Login Form:
app/components/molecules/LoginForm.tsx,app/components/molecules/LoginForm.1.tsxTechnical Considerations
Conclusion
These enhancements significantly improve the user experience by providing immediate and dynamic feedback on input fields, ensuring consistent validation feedback, and enhancing the overall usability of the application.