From e324c8ce2baf00d1761bce35ce44f275d098a8d6 Mon Sep 17 00:00:00 2001
From: Anas0 <91702503+AnasMansy@users.noreply.github.com>
Date: Tue, 12 Mar 2024 12:04:40 +0200
Subject: [PATCH] fix(ui): update CloseButton styles to match /learn (#54029)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 .../learn/challenges/multifile-cert-project.ts     |  6 +++---
 .../src/close-button/close-button.tsx              | 14 +++++---------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts b/cypress/e2e/default/learn/challenges/multifile-cert-project.ts
index e7f40a11a71..2c153baa952 100644
--- a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts
+++ b/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)
diff --git a/tools/ui-components/src/close-button/close-button.tsx b/tools/ui-components/src/close-button/close-button.tsx
index 62963982a60..8e845a5754f 100644
--- a/tools/ui-components/src/close-button/close-button.tsx
+++ b/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',