From 856005ba02346f9ea1dc3a5b209642b518f1d1d7 Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Tue, 13 Feb 2024 13:19:52 -0800
Subject: [PATCH] fix breadcrumbs

---
 .../src/scenes/onboarding/OnboardingStep.tsx  | 29 +++++++-------
 .../src/scenes/onboarding/onboarding.scss     | 39 -------------------
 2 files changed, 16 insertions(+), 52 deletions(-)
 delete mode 100644 frontend/src/scenes/onboarding/onboarding.scss

diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
index 4bc4b92e6b429..b101712aba83f 100644
--- a/frontend/src/scenes/onboarding/OnboardingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -1,9 +1,7 @@
-import './onboarding.scss'
-
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { supportLogic } from 'lib/components/Support/supportLogic'
-import { IconArrowRight } from 'lib/lemon-ui/icons'
+import { IconArrowRight, IconChevronRight } from 'lib/lemon-ui/icons'
 import React from 'react'
 
 import { onboardingLogic, OnboardingStepKey, stepKeyToTitle } from './onboardingLogic'
@@ -42,27 +40,32 @@ export const OnboardingStep = ({
     return (
         <>
             <div className="pb-2">
-                <div className={`grid onboardingHeader ${hideHeader && 'hidden'}`}>
+                <div className={`flex justify-between items-center text-muted ${hideHeader && 'hidden'}`}>
                     <h1 className="font-bold m-0 pl-2">
                         {title || stepKeyToTitle(currentOnboardingStep?.props.stepKey)}
                     </h1>
-                    <div />
-                    <div className="flex items-center">
+                    <div className="flex items-center gap-x-3">
                         {onboardingStepNames.map((stepName, idx) => {
                             return (
                                 <React.Fragment key={`stepKey-${idx}`}>
-                                    <div
-                                        className={`text-sm onboardingCrumb ${
+                                    <Link
+                                        className={`text-sm ${
                                             currentOnboardingStep?.props.stepKey === stepName && 'font-bold'
-                                        }`}
+                                        } font-bold`}
                                         data-text={stepKeyToTitle(stepName)}
                                         key={stepName}
                                         onClick={() => setStepKey(stepName)}
                                     >
-                                        {stepKeyToTitle(stepName)}
-                                    </div>
+                                        <span
+                                            className={`text-sm ${
+                                                currentOnboardingStep?.props.stepKey !== stepName && 'text-muted'
+                                            }`}
+                                        >
+                                            {stepKeyToTitle(stepName)}
+                                        </span>
+                                    </Link>
                                     {onboardingStepNames.length > 1 && idx !== onboardingStepNames.length - 1 && (
-                                        <div key={`${stepName}-separator`} className="onboardingCrumbSeparator" />
+                                        <IconChevronRight className="text-xl" />
                                     )}
                                 </React.Fragment>
                             )
diff --git a/frontend/src/scenes/onboarding/onboarding.scss b/frontend/src/scenes/onboarding/onboarding.scss
deleted file mode 100644
index df14f804ac5da..0000000000000
--- a/frontend/src/scenes/onboarding/onboarding.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.onboardingCrumb {
-    font-family: var(--font-sans) !important;
-    font-size: 1rem;
-    line-height: 1.2;
-    color: var(--default);
-    opacity: 0.5;
-
-    &:hover {
-        cursor: pointer;
-        opacity: 1;
-        transition: opacity 200ms ease;
-    }
-}
-
-.onboardingHeader {
-    grid-template-columns: max-content 1fr max-content;
-}
-
-.onboardingCrumb::after {
-    display: block;
-    height: 0;
-    overflow: hidden;
-    font-weight: bold;
-    pointer-events: none;
-    visibility: hidden;
-    content: attr(data-text);
-    content: attr(data-text) / '';
-    user-select: none;
-}
-
-.onboardingCrumbSeparator {
-    flex-shrink: 0;
-    margin: 0 0.5rem;
-    opacity: 0.5;
-
-    &::after {
-        content: '>';
-    }
-}