Update UI to Match Figma Specs: Labels, Buttons, Gaps

[ehconitin]

@Bonapara
Done with issue #5910

[greptile-apps]

PR Summary

Updated UI components to align with Figma design specifications, focusing on labels, buttons, and gaps.

• CommandGroup.tsx: Removed text-transform: uppercase; from StyledGroup to match Figma specs.
• CommandMenu.tsx: Replaced 'Esc to cancel' text with ModalCloseButton, adjusted search input padding, and added top padding to StyledInnerList.

Ensure these changes do not affect other components relying on CommandGroup and verify ModalCloseButton functionality across devices.

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[charlesBochet]

Hi @ehconitin, thanks for the contribution

Here it's how it look on your PR:

Here is the figma:
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=33424-184388&m=dev

Let's make sure they perfectly match, a few thing I've noticed:

• the "X" button should be a LightIconButton variant tertiary
• the search bar seems to have a slightly darker background than the list below

Tackling this PR requires an attention to details :)

[ehconitin]

Thank you @charlesBochet for your detailed review and feedback. I appreciate your attention to detail.
I actually noticed these differences as well while working on the PR.
Regarding the specific points:

The "X" button: I'm currently using the ModalCloseButton component from the spreadsheet-import which has some different properties.
I see two potential solutions:
a) Create a new ModalCloseButton specifically for CommandMenu.
b) Modify the existing ModalCloseButton to accept properties that allow for the LightIconButton variant tertiary.
Search bar background: I'll adjust the background color to match the design in Figma.

Which approach would you prefer for the "X" button? I'm happy to implement either solution or discuss alternatives if you have other ideas.
I'll make sure to carefully review all details against the Figma design to ensure perfect alignment. Let me know if you have any other concerns or suggestions.

[charlesBochet]

@ehconitin I think we don't need to use the ModalCloseButton (especially since the menu is not a modal). Let's directly use a LightIconButton component within the CommandMenu

[ehconitin]

Thank you for the clarification, @charlesBochet.
You're absolutely right - the CommandMenu isn't a modal, so using a ModalCloseButton isn't the best approach. I'll implement the change using a LightIconButton component directly within the CommandMenu as you've suggested.
I'll make this adjustment along with addressing the search bar background color to match the Figma design.

[ehconitin]

Hi @charlesBochet,
I've implemented the changes as requested. The CommandMenu now uses a LightIconButton component directly, and I've addressed the other points you mentioned. Could you please review the updated PR when you have a moment?
I also have a question regarding the code structure:
I noticed that all the styled components in CommandMenu are being exported. Given that these styles are specific to the CommandMenu and don't seem to be used elsewhere, is there a particular reason for exporting them? I'm wondering if we could remove these exports to reduce potential naming conflicts and improve code organization.

[charlesBochet]

@ehconitin Thank you! you are perfectly right, these styles should not be exported for the exact reason you mentioned.

I have also fixed another padding, I have noticed.

Thanks a lot, LGTM!

[github-actions]

Thanks @ehconitin for your contribution!
This marks your 0th PR on the repo. You're top 0% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter