#7650400 Limit Global Styles: Refactor the Color Dropdown in Newsletter Flow Implementation

We’re refactoring how the the color accent dropdown in the newsletter flow is implemented according to Automattic/dotcom-forge#1226 and described in paYJgx-2B7-p2.

@SaxonF We didn’t have anything designed for when we select an item in the dropdown. I went ahead and added a lock to the selected item. Feel free to suggest any changes to how it looks.

Adding the lock next to the arrow of the dropdown didn’t look really good.

Proposed Changes

• Updated the select dropdown component so that we can have extra information for each item in the dropdown.
• Added a group label to separate between paid and free accent colors when needed.

Testing Instructions

• Open the Calypso live link
• Navigate to /setup/newsletter/newsletterSetup
• The dropdown should show a group label and lock icons as described in the main task.
• When you select an item with a lock, it should be clear that it’s a locked item when the dropdown is collapsed.
• Navigate to /setup/newsletter/newsletterSetup?flags=-limit-global-styles
• It should work as expected (no locks should be shown)

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Related to #