fixing white color of x button (#16100)

GitOrigin-RevId: acc8b66c98bc010be388aa18ed73e1c599309125

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>

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;

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)