Rating pictograms from “Give feedback” screen have issues

[data-sync-user]

Affected versions:

• 2.10.0 (2.202207282101);

Tested Platforms:

• MacOS 11.6;

Prerequisites:

• Have a FxA account with an active subscription for Mozilla VPN;
• Have Mozilla VPN installed and opened;
• Be signed in;

Steps to reproduce:

1. Navigate to Settings - Get help - Give feedback screen;
2. Observe the “Give feedback” screen;
3. Hover over each rating pictogram and observe the behavior;
4. Click on any rating pictogram from the screen;

Expected result:

• For step 2: Each rating pictogram is displayed in gray,  as no rating is selected.
• For step 3: Each rating pictogram changes its color from gray to blue when hovering over. 
• For step 4: The rating pictogram changes its color from gray to blue and is outlined in a lighter shade of blue when clicking on it. 

Actual result:

• For step 2: The first rating pictogram (“very poor”) is displayed in blue by default, without clicking on it. 
• For step 3: The rating pictograms do not change their color from gray to blue when hovering over. 
• For step 4: The rating pictogram does not change its color from gray to blue when clicking on it, but is outlined in a lighter shade of blue. 

Notes:

• See the attached video;

┆Issue is synchronized with this Jira Bug ┆author: Bianca Hidecuti