[TP/Jobseeker Profile & Company Profile:] Align the design of the close icon in modals on CON and TP

[katamatata]

Context/background

Currently, the design and the position of the close icon in modals on CON and TP look different. We want to have a unified design for this icon on both platforms.

What needs to be done?

In all modals on CON and TP:

• Define UI for a close icon in modals: size, color, form, :hover effect
• Align the design of the close icon on CON and TP

In all modals on TP:

• Replicate how the close icon is used from CON to TP: inside the popup, at the right top corner

UI/UX design assets / specification

Please see current designs by Rita and Lígia here.

Some guiding info to accompany the designs:

1. Acessibility
   For the hover state, we should never use light colors like the one from the connect website

2. Colors for action usage
   In order to ensure a consistent user experience through the website, we need to consider the color that is used in other hover states (like in buttons, for example)

3. Clickable are around the button
   The clickable space around a button (padding) is very important, specially in a dialog. If the space is too big, the user can easily click without that intention. In the other hand, if it's too small, the user can get frustrated for not being able to click on it. The best pratice is to use multiples of 8px around it 🙂

4. Background color
   A background color is normally more used in cases where a button has an outlined already, which is not this case. I would say that adding the background is more likely to pollute visually than helping.

5. In a dialog, the close button needs to be always inside the container 🙂
   So, overall, I believe we should stick to the close icon itself using:

$black when default
$redi-orange when hovered
$red when clicked (need to verify with you the use cases for red)
$redi-orange-extra-light when disabled

[katamatata]

@miriam-aha I updated this ticket according to our discussion here. The design input is needed to proceed.

[miriam-aha]

@katamatata As just mentioned, I added the link to the designs that Rita provided incl. her explanation. Will you pick up the ticket and implement these designs? 😃

[katamatata]

As discussed with the design team, I put back the Build UX/UI label because first, we want to define and align design specifications (accessibility, clickableness, color effects) for icons in the design system to have consistency throughout our different components and user experiences.

[fortini]

According to @ligiamxm , the UX/UI activities are done.
From the dev side, is there something missing, @katamatata

[katamatata]

@ligiamxm, have we discussed the mobile version already?

[helloanil]

@katamatata and @ericbolikowski can you add some notes about what's the most recent status for this task? We can close it if it's not in scope anymore.

[katamatata]

@helloanil, it has not been implemented yet and is ready.

[astkhikatredi]

This ticket could be done together with #906 and #904

[astkhikatredi]

Anil's estimation of this ticket: 2-4 hours.