Contact Tab UI - slight redesign#278
Merged
MBreathe merged 2 commits intoHackYourFuture:mainfrom Jan 22, 2026
Merged
Conversation
… for emergency contact
MBreathe
requested review from
Aya-Alabrash,
sima-milli and
stasel
as code owners
Closed
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request refactors the ContactInfo component to organize contact fields into a more structured layout with a two-column format and adds a dedicated emergency contact section with a header.
Changes:
- Restructured layout from single-column (
flexDirection="column") to a two-column layout using nested Box components with50%widths - Added an "Emergency contact" section header using Typography component to visually separate emergency contact fields
- Changed field widths from fixed
80chto relative100%within column containers, with outer containers set to90ch
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
MBreathe
changed the title
HackYourFutures
temporarily deployed
to
dojo-feature-contact-ta-kewbsw
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
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.
This pull request refactors the
ContactInfocomponent to improve its layout and usability, particularly by organizing contact fields into a more structured two-column format and adding an emergency contact section. The changes focus on enhancing the user interface for better readability and organization.Layout and Structure Improvements:
50%width each) structure for standard and emergency contact information, improving readability and organization.80ch) to relative (100%or90ch) values for better responsiveness and alignment.Feature Additions:
Typography) and corresponding input fields for emergency contact name and phone number, separated into the new two-column layout.Code Quality and Consistency:
TypographyandReactimports to support new UI elements and ensure code consistency.<div>s, replacing them with<Box>components for more consistent styling and structure.