Re-arranged Grid on Add new Employee Modal for natural *tab* progression

[pmelga01]

Developer: Pam Dates: 4/20/2024 Time Spent: 1 hour

Summary: During bug bash, we got a strong comment pertaining to the progression of filling out a new employee in the employee manage profiles page-- that the progression felt very unnatural when hitting the TAB key.

The modal was previously constructed by columns, so when you would fill in a textbox and hit TAB, you would go FirstName > Pronouns > Email > Lastname > Role > Phone Number. I realized the problem was with how the order of the components were implemented, so I went ahead and re-arranged the order and cleaned up the grid, doing my best to maintain the style that was previously in-place. Now when filling out fields, it feels a lot more natural and we can go in the order we would expect: FirstName > LastName > Pronouns > Role > Email > Phone Number.

Screenshots [desktop]

Reflection:

This was a thing that was always in the back of my mind and I hadn't seen a ticket for it. I had spare time and really wanted to see if it was as easy as I was thinking it was in my head, and I was happy to say it was! Grid V2 is so nice, it was so intuitive and worked exactly the way I had anticipated, making this a quick and easy fix. The button shrank as a result, but I modified the styling and padding to bring it back, I feel like I can finally sleep now :)

I also noticed this looks different than the new design, I just hope this modification makes it easier for the next people who work on it, I also commented it out for the grid to make sense for future people :)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
casa-myrna	❌ Failed (Inspect)		Apr 21, 2024 3:04am

[pabba-n]

THANKS PAM YOU DA BEST