SONAR-20297 Adjust styles for CCT tour component

diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
index 36f47f1a9fd82114d143d41a47279603087514b6..6e16231677621035a1ee3a7001a85cc3575e9fdf 100644 (file)
--- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx
+++ b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
@@ -117,7 +117,7 @@ function TooltipComponent({
 
   return (
     <StyledPopupWrapper
-      className="sw-p-3 sw-body-sm sw-w-[300px] sw-relative sw-border-0"
+      className="sw-p-3 sw-body-sm sw-w-[315px] sw-relative sw-border-0"
       placement={(step.placement as Placement | undefined) ?? DEFAULT_PLACEMENT}
       zLevel={PopupZLevel.Absolute}
       {...tooltipProps}
@@ -129,7 +129,7 @@ function TooltipComponent({
       )}
 
       <div className="sw-flex sw-justify-between" ref={setRef}>
-        <strong className="sw-mb-2">{step.title}</strong>
+        <strong className="sw-body-md-highlight sw-mb-2">{step.title}</strong>
         <WrapperButton
           className="sw-w-[30px] sw-h-[30px] sw--mt-2 sw--mr-2 sw-flex sw-justify-center"
           {...skipProps}
@@ -198,7 +198,7 @@ export function SpotlightTour(props: SpotlightTourProps) {
         },
       }))}
       tooltipComponent={(
-        tooltipProps: React.PropsWithChildren<TooltipRenderProps & { step: SpotlightTourStep }>
+        tooltipProps: React.PropsWithChildren<TooltipRenderProps & { step: SpotlightTourStep }>,
       ) => <TooltipComponent stepXofYLabel={stepXofYLabel} {...tooltipProps} />}
       {...otherProps}
     />
@@ -208,6 +208,7 @@ export function SpotlightTour(props: SpotlightTourProps) {
 const StyledPopupWrapper = styled(PopupWrapper)<{ placement: Placement }>`
   background-color: ${themeColor('spotlightBackgroundColor')};
   ${tw`sw-overflow-visible`};
+  ${tw`sw-rounded-1`};
   ${({ placement }) => getStyledPopupWrapperMargin(placement)};
 `;
 
@@ -273,7 +274,9 @@ const SpotlightArrow = styled.div<{ rotate: string }>`
     background-color: ${themeColor('spotlightPulseBackground')};
     left: 100%;
     top: calc(50% - calc(0.125rem / 2));
-    transition: margin 0.3s, left 0.3s;
+    transition:
+      margin 0.3s,
+      left 0.3s;
     content: '';
   }
 `;

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index a92d413d8ce2ef3ab298f8a8368d18b48992ed16..a7e098f1943cdfbdd2c6b7246fa67c9d6284e856 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -5018,7 +5018,7 @@ component_report.unsubscribe_success=Subscription successfully canceled. You won
 #
 #------------------------------------------------------------------------------
 guiding.issue_list.1.title=Introducing Clean Code Attributes
-guiding.issue_list.1.content.1=Clean Code attributes are the characteristic that your code must have to be considered Clean Code.
+guiding.issue_list.1.content.1=Clean Code attributes are the characteristics that your code must have to be considered Clean Code.
 guiding.issue_list.1.content.2=You can now filter by these attributes to evaluate why your code is breaking away from being clean.
 guiding.issue_list.2.title=Introducing Software Qualities
 guiding.issue_list.2.content.1=A software quality is a characteristic of software that contributes to its lasting value.