Update conversion items styling inside user menu
What does this MR do and why?
There were a few items missing icons in the user menu, but this lead me to notice that the conversion items were not grouped together and we using emojis as a visual tool for drawing attention.
This change reorganizes and enhances the user menu dropdown interface. The main updates include:
-
Visual grouping: The trial and pipeline minutes menu items are now grouped together in a bordered section, making them visually distinct from other menu options.
-
Improved icons: Added proper icons to menu items - a
licenseicon for the trial option and acredit-cardicon for the pipeline minutes purchase option. The rocket emoji was removed from the trial item. -
Enhanced trial promotion: The trial menu item now includes a pulsing blue dot animation to draw user attention, making it more prominent and encouraging users to start their trial.
-
Better styling: The warning text color for pipeline minutes was changed to use a semantic design token.
-
Code organization: The menu items were restructured and moved into a grouped section, making the interface more organized and the code easier to maintain.
These changes make the user menu more visually appealing and help highlight important promotional items like trials and pipeline minute purchases, while maintaining a clean and organized layout.
References
N/A
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
How to set up and validate locally
Easiest way to see these items is to adjust the v-if conditionals by setting them to true in app/assets/javascripts/super_sidebar/components/user_menu.vue
Show: Start an Ultimate Trial
- v-if="showTrialItem" true
Show: Buy compute minutes
- v-if="addBuyPipelineMinutesMenuItem" true
- v-if="data.pipeline_minutes.show_with_subtext" true
- After updating the conditionals, check out the user menu dropdown to see the visual changes.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.