When an idea has multiple topics, we need to separate them with a comma or another separator because without a separator it seems like there is one big topic

Bug Description

Please note @Pratheep-lab’s comments in Asana: https://app.asana.com/0/1200491083500938/1200749910371621

Steps to reproduce

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Plugin Version [e.g. 22]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The topics that appear above an idea in the Idea Hub widget should have their styling adjusted so that they can be clearly visually separated (in case there are multiple topics).
• For that purpose, the light-blue background as seen in the last design screenshot above should be used.

Implementation Brief

Using assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss

For the class .googlesitekit-idea-hub__idea--topic, add the following rules

background-color: $c-solitude;
border-radius: 2px;
padding: 1px 6px;

This is done on this open PR - https://github.com/google/site-kit-wp/pull/3867

Test Coverage

• No changes

Visual Regression Changes

• No changes

QA Brief

• Go to the dashboard page.
• Verify that idea topics have a light-blue background as shown in the last design screenshot above.

Changelog entry

• Update styles of the topic idea element to have a light-blue background.

[danielgent]

It looks a lot better now 😄 @wpdarren @Pratheep-lab

This is on this PR @eugene-manuilov https://github.com/google/site-kit-wp/pull/3893 . I’ll assign the ticket to you now

[wpdarren]

QA Update: ❌

@eugene-manuilov the font color is #5f6368 on my test site but on the designs it’s #333333. Also, the character spacing appears to be tight. Have to say the font color and character spacing makes the text much easier to read on the Figma.

Verified:

Verified that idea topics have a light-blue background as shown in the screenshot.