Layouts Fixes and Normalizations

[devgoncalo]

Why merging this Pull Request?
This PR fixes some minor layouts problems improving the user experience.

What are the changes?

1. Save SVG icon change.

• Why? The Save PNG and Save SVG options previously had the same icon, which affected user readability and experience. This change adds more context to the action, maybe clarifying more what the user is doing.

2. Export Image dropdown menu width normalization (Small Devices).

• Why? Before this normalization, when using the dropdown menu on small devices, the menu did not respect the button width and appeared misaligned.

3. Export Image dropdown menu width normalization (Medium and Large Devices).

• Why? Following the same observation made on small devices, we decided to apply the normalization to medium and large devices as well.

4. Code Languages select content behavior fix and normalization.

• Why? Previously, the Code Languages select content menu occupied the full height of the page starting from the trigger, hiding the top bar buttons and appearing misaligned and a little bit off. Now, the menu is aligned with the trigger and limited to a 550px height, resulting in a seamless behavior and layout.

5. Themes select content normalization.

• Why? Since the Code Languages select content menu was normalized, this change was necessary. It prevents the select menu from exceeding the 550px height mark in the future. The width was also slightly increased with this change.

6. A branding touch in the Navigation Menu.

• Why? Therefore, this is not a bug or an important fix/change. I think this little hover change on Made by Raycast, making the color match the Raycast brand, adds a nice touch to the menu.

7. Removal of some unused imports.

• Why? While making these layout changes, I encountered several unused imports and decided to clean them up for future contributions and code maintainability. Removing unused imports is beneficial because it reduces clutter, improves code readability, and can potentially enhance performance by minimizing unnecessary dependencies.

[vercel]

@devgoncalo is attempting to deploy a commit to the Raycast Team on Vercel.

A member of the Team first needs to authorize it.

[samuelkraft]

Hey @devgoncalo, thanks for the contribution!
The dropdown content normalization is nice, but I just added keyboard shortcut hints to all dropdowns as well as changing the navigation menu a bit making this outdated. The current select appearance are by design full height and item-aligned.

The SVG icon doesn't feel super recognizable and has the wrong stroke thickness, maybe try a bezier curve icon or similar?

[devgoncalo]

After reviewing the recent changes, I have devised a solution and made a few additional modifications, outlined as follows:

1. I ensured that the "Export Image" full text is displayed on all devices while keeping the shortcut (KBD) hidden on small devices, which are predominantly mobile therefore the shortcuts may not be used at all. This maintains the dropdown menu normalization on small devices without compromising user space and preserves shortcut information on larger devices.

2. Since the original SVG icon was not recognizable, I replaced the SVG icon with a new path-based icon resembling the contents of an SVG that are paths. The stroke is maintained at 2 to ensure the icon's clarity and consistency; a thinner stroke of would 1.5 compromises the application's icon integrity.

3. On mobile devices, the onShare function was malfunctioning not allowing the users to share their icons. And for some reason the dropdown menu was hidden on small devices preventing users from downloading, copying, or sharing icons. I removed this function and retained the dropdown menu, providing users with the same functionality across all device sizes.

4. Lastly, I believe that the full-height design for select elements such as the code themes and code languages is not optimal, as it disrupts user flow and appears cramped. I have retained the changes but I am open to your feedback, and if there is a reason to know it!