From a81a71d2d42693f28a5a8b24e27e4be49a90255f Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Thu, 7 Dec 2023 11:45:23 +0000
Subject: [PATCH] fixing white color of x button (#16100)

GitOrigin-RevId: acc8b66c98bc010be388aa18ed73e1c599309125
---
 .../project-list/components/survey-widget.tsx       | 13 +++----------
 .../stylesheets/app/sidebar-v2-dash-pane.less       |  9 +++++++++
 .../project-list/components/survey-widget.test.tsx  |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/survey-widget.tsx b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
index 127ad19e4a..b2ef413da0 100644
--- a/services/web/frontend/js/features/project-list/components/survey-widget.tsx
+++ b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
@@ -2,6 +2,7 @@ import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import getMeta from '../../../utils/meta'
 import { Survey } from '../../../../../types/project/dashboard/survey'
 import { useCallback } from 'react'
+import Close from '@/shared/components/close'
 
 export default function SurveyWidget() {
   const survey: Survey = getMeta('ol-survey')
@@ -33,16 +34,8 @@ export default function SurveyWidget() {
               {survey.linkText}
             </a>
           </div>
-          <div className="notification-close">
-            <button
-              type="button"
-              className="close pull-right"
-              title="Dismiss Overleaf survey"
-              onClick={dismissSurvey}
-            >
-              <span aria-hidden="true">&times;</span>
-              <span className="sr-only">Dismiss Overleaf survey</span>
-            </button>
+          <div className="notification-close notification-close-button-style">
+            <Close variant="dark" onDismiss={() => dismissSurvey()} />
           </div>
         </div>
       </div>
diff --git a/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less
index cb7af915fc..df0a429396 100644
--- a/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less
+++ b/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less
@@ -57,6 +57,15 @@
   }
 }
 
+.notification-close-button-style button {
+  &:hover {
+    background-color: transparent !important;
+  }
+  &:focus {
+    background-color: transparent !important;
+  }
+}
+
 .project-list-sidebar-v2-pane {
   flex-grow: 0;
   flex-shrink: 0;
diff --git a/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx b/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx
index 7b246c6a7f..ad057ca4ac 100644
--- a/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx
@@ -39,7 +39,7 @@ describe('<SurveyWidget />', function () {
 
     it('it is dismissed on click on the dismiss button', function () {
       const dismissButton = screen.getByRole('button', {
-        name: 'Dismiss Overleaf survey',
+        name: 'Close',
       })
       fireEvent.click(dismissButton)