[UI Components] Update the CSS of hover and focus states of CloseButton

[huyenltnguyen]

Description

The CloseButton component of ui-components is missing hover and focus styles. We would like to add them in so that we can replicate the current display in /learn.

Comparison:

ui-components	/learn

Requirements

• Add hover and focus styles to the CloseButton component
• Remove the close class from the CloseButton component in Flash, and ensure that the change doesn't introduce any visual regression:
  

  freeCodeCamp/client/src/components/Flash/index.tsx

  Lines 38 to 41 in 9f71d1c

  	<CloseButton
  	onClick={handleClose}
  	label={t('buttons.close')}
  	className='close'

Relevant files:

• CloseButton implementation: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/tools/ui-components/src/close-button/close-button.tsx
• Custom CSS in /learn:

  freeCodeCamp/client/src/components/layouts/global.css

  Lines 179 to 192 in 9f71d1c

  	button.close {
  	color: inherit;
  	background-color: transparent;
  	font-size: 28px;
  	opacity: 0.5;
  	text-shadow: none;
  	}
  	button.close:hover,
  	button.close:focus {
  	color: inherit;
  	opacity: 1;
  	background-color: transparent;
  	}

[Amrani-Farouk-Hossam-Eddine]

Hi, i'm interesting in this issue if there is no currenlty working on it

[huyenltnguyen]

@Amrani-Farouk-Hossam-Eddine Issues labeled with help wanted are up for grabs, so feel free to work on this if you're interested.

Be sure you read our guidelines for contributing as well as our expectations from a pull request, we prioritize contributors following the instructions in our guides. Join us in our chat room or our forum if you need help contributing; our moderators will guide you through this.

Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first.

Happy contributing.

[sarmadH97]

Hi @Amrani-Farouk-Hossam-Eddine, Did you start working on it ?

[Amrani-Farouk-Hossam-Eddine]

Hi @Amrani-Farouk-Hossam-Eddine, Did you start working on it ?

to be completly honest with you i really want to contribute to freeCodeCamp and i got lost in the guide and i need some help if you already familuar with it

[sarmadH97]

I'm new to this too, I'll let you know if i figure it out

[Amrani-Farouk-Hossam-Eddine]

i worked on it and i made a PR