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

[simonchampion]

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 - #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]

@Pratheep-lab Do you have a design file for this? On Figma or whatever

I've just done this by eye using the JPG but it's not correct, and I know it'll end up with back-and-forth as we all guess the measurements 😉

[Pratheep-lab]

@danielgent Sorry if the Figma file was not shared as part of the Asana task. Here is the direct link to it: https://www.figma.com/file/YB79eKcGOwyUjlWG8mjDZA/Prompt-Engine-Idea-Hub?node-id=21108%3A4109
CC: @eclarke1 @felixarntz

[danielgent]

@Pratheep-lab Great stuff!

I don't see the background colour #e8f1fd as an existing variable. I'm not sure if that's a problem on Site Kit though. I can let whoever does the IBR tell me

This is what I've got it looking like. Any comments?

[Pratheep-lab]

@danielgent Use this color $c-solitude: #e8f0fe; I have updated the designs as well.

[eugene-manuilov]

IB ✔️

[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.

[danielgent]

@Pratheep-lab The desired text colour #333333 isn't a variable on Site Kit

The closest constants in assets/sass/config/_variables.scss are

$c-cape-cod: #3c4043;
$c-nearblack: #212121;

I'll go with near-black as @wpdarren complained about contrast, but let me know! 😄

[Pratheep-lab]

@danielgent near black looks good to me. And yes, the letter spacing needs to be more.

Good catch @wpdarren

[danielgent]

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

This is on this PR @eugene-manuilov #3893 . I'll assign the ticket to you now

[eugene-manuilov]

@wpdarren this is ready for another round of QA

[wpdarren]

QA Update: ✅

Verified:

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