From 76d6de6db24e6ee276d589a671b3622d26832ff9 Mon Sep 17 00:00:00 2001
From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Wed, 14 Jun 2023 15:20:12 +0200
Subject: [PATCH] SONAR-19018 Fixing contrast between the background and the
 tile in project overview page

---
 .../tutorials/TutorialSelectionRenderer.tsx     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 664df657089..3de6a3ae682 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -17,6 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
+import { themeBorder } from 'design-system';
 import * as React from 'react';
 import EllipsisIcon from '../../components/icons/EllipsisIcon';
 import { translate } from '../../helpers/l10n';
@@ -56,7 +58,7 @@ function renderButton(
   icon: React.ReactNode
 ) {
   return (
-    <button
+    <StyledTutorialButtons
       className={`button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-${mode}`}
       // Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone
       // tutorial in the future.
@@ -67,7 +69,7 @@ function renderButton(
       <div className="medium big-spacer-top">
         {translate('onboarding.tutorial.choose_method', mode)}
       </div>
-    </button>
+    </StyledTutorialButtons>
   );
 }
 
@@ -270,3 +272,14 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
     </>
   );
 }
+
+const StyledTutorialButtons = styled.button`
+  border: ${themeBorder('default', 'projectCardBorder')};
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &:active {
+    border: ${themeBorder('default', 'tabBorder')};
+    outline: none;
+  }
+`;
-- 
2.39.5