diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts index 82531ace..30d190f8 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts +++ b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts @@ -16,12 +16,16 @@ export const stepTheme = tv({ 'shrink-0', ], label: ['text-sm', 'font-sans', 'text-elements-mid-em'], - connector: ['bg-border-interactive-hovered'], + connector: [], }, variants: { orientation: { - vertical: { connector: ['w-px', 'h-3', 'ml-5'] }, - horizontal: { connector: ['h-px', 'w-full'] }, + vertical: { + connector: ['bg-border-interactive-hovered', 'w-px', 'h-3', 'ml-5'], + }, + horizontal: { + connector: ['text-border-interactive-hovered', 'h-3', 'w-3'], + }, }, active: { true: { diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.tsx b/packages/frontend/src/components/shared/Steps/Step/Step.tsx index 06c49368..9d731139 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.tsx +++ b/packages/frontend/src/components/shared/Steps/Step/Step.tsx @@ -1,6 +1,9 @@ import React, { useCallback, ComponentPropsWithoutRef } from 'react'; import { stepTheme, StepTheme } from './Step.theme'; -import { CheckRoundFilledIcon } from 'components/shared/CustomIcon'; +import { + CheckRoundFilledIcon, + ChevronRight, +} from 'components/shared/CustomIcon'; export interface StepProps extends ComponentPropsWithoutRef<'li'>, StepTheme { /** @@ -35,9 +38,13 @@ export const Step = ({ return null; } - return
; + return ( +