fix(feature tour): styling fixes)

isomerpages · Sep 22, 2023 · 1072914 · 1072914
1 parent 5dbd5f3
commit 1072914
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/src/features/FeatureTour/FeatureTourContent.tsx b/src/features/FeatureTour/FeatureTourContent.tsx
@@ -6,20 +6,21 @@ export const HeroOptionsFeatureTourContent = (): JSX.Element => {
   return (
     <>
       <Badge
+        mt="2rem"
         variant="subtle"
         display="inline-flex"
         columnGap="0.5rem"
         alignItems="center"
-        color="Sub"
+        colorScheme="brand.secondary"
       >
         <Icon as={BiCheck} h="1rem" w="1rem" />
         <Text textStyle="caption-1">New feature</Text>
       </Badge>
-      <Text textStyle="subhead-1" mt="1rem">
+      <Text textStyle="subhead-1" mt="1rem" color="base.content.default">
         {" "}
         Now you can customise your hero banner with various layouts!{" "}
       </Text>
-      <Text textStyle="body-2" mt="0.5rem">
+      <Text textStyle="body-2" mt="0.5rem" color="base.content.default">
         {`We've added some variations to how you can display your hero section.
         Try them out here.`}
       </Text>

diff --git a/src/features/FeatureTour/FeatureTourTooltip.tsx b/src/features/FeatureTour/FeatureTourTooltip.tsx
@@ -34,6 +34,29 @@ export const FeatureTourTooltip = ({
 }: FeatureTourTooltipProps): JSX.Element => {
   const { paginationCallback } = useFeatureTourContext()
   const showProgressIndicator = size > 1
+
+  let titleComponent: React.ReactNode
+  if (typeof step.title === "string") {
+    titleComponent = (
+      <Text textStyle="subhead-1" color="base.content.dark" marginTop="1.25rem">
+        {step.title}
+      </Text>
+    )
+  } else {
+    titleComponent = step.title
+  }
+
+  let contentComponent: React.ReactNode
+  if (typeof step.content === "string") {
+    contentComponent = (
+      <Text textStyle="body-2" color="base.content.default" marginTop="0.5rem">
+        {step.content}
+      </Text>
+    )
+  } else {
+    contentComponent = step.content
+  }
+
   return (
     <Box
       padding="1.5rem"
@@ -61,15 +84,12 @@ export const FeatureTourTooltip = ({
         </Badge>
       )}
 
-      <Text textStyle="subhead-1" color="base.content.dark" marginTop="1.25rem">
-        {step.title}
-      </Text>
-      <Text textStyle="body-2" color="base.content.default" marginTop="0.5rem">
-        {step.content}
-      </Text>
+      {titleComponent}
+      {contentComponent}
+
       <Flex
         flexDirection="row"
-        marginTop="2.5rem"
+        marginTop="2rem"
         alignItems="center"
         justifyContent="space-between"
       >