fix(ui): update CloseButton styles to match /learn (#54029)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

cypress/e2e/default/learn/challenges/multifile-cert-project.ts

@@ -4,8 +4,7 @@ const save2text = 'save 2';
 const editorElements = {
   container: '.vertical .reflex-container',
   editor: '.react-monaco-editor-container',
-  saveCodeBtn: '[data-cy="save-code-to-database-btn"]',
-  closeFlash: '.close'
+  saveCodeBtn: '[data-cy="save-code-to-database-btn"]'
 };
 
 describe('multifileCertProjects', function () {
@@ -43,7 +42,8 @@ describe('multifileCertProjects', function () {
     cy.focused().clear().click().type(`${save2text}{ctrl+s}`);
     cy.get(editorElements.editor).contains(save2text);
     cy.contains('Your code was saved to the database.');
-    cy.get(editorElements.closeFlash).click();
+    // close flash message
+    cy.get('button:contains("Close")').click();
     // load saved code when navigating site (no hard refresh)'
     cy.contains('Tribute Page').click();
     cy.get(editorElements.container)

tools/ui-components/src/close-button/close-button.tsx

@@ -22,19 +22,15 @@ export function CloseButton({
     'text-lg',
     'font-bold',
     'text-foreground-primary',
-    // Active state
-    'active:before:w-full',
-    'active:before:h-full',
-    'active:before:absolute',
-    'active:before:inset-0',
-    'active:before:border-3',
-    'active:before:border-transparent',
-    'active:before:bg-gray-900',
-    'active:before:opacity-20',
     // Focus state
+    'focus:opacity-100',
+    'focus:text-opacity-100',
     'focus:outline-none', // Hide the default browser outline
     'focus-visible:ring',
     'focus-visible:ring-focus-outline-color',
+    // Hover state
+    'hover:opacity-100',
+    'hover:text-opacity-100',
     // Content positioning
     'flex',
     'justify-center',