🔧 chore: adjust design to figma

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'] },
+      vertical: {
-      horizontal: { connector: ['h-px', 'w-full'] },
+        connector: ['bg-border-interactive-hovered', 'w-px', 'h-3', 'ml-5'],
+      },
+      horizontal: {
+        connector: ['text-border-interactive-hovered', 'h-3', 'w-3'],
+      },
     },
     active: {
       true: {

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 <div aria-hidden className={theme.connector({ orientation })} />;
+      return (
+        <div aria-hidden className={theme.connector({ orientation })}>
+          {orientation === 'horizontal' && <ChevronRight size={12} />}
+        </div>
+      );
     },
-    [theme],
+    [orientation, theme],
   );
 
   return (

packages/frontend/src/components/shared/Steps/Steps.theme.ts

@@ -7,7 +7,7 @@ export const stepsTheme = tv({
   variants: {
     orientation: {
       vertical: { root: ['flex', 'flex-col'] },
-      horizontal: { root: ['flex', 'items-center'] },
+      horizontal: { root: ['flex', 'items-center', 'gap-1'] },
     },
   },
   defaultVariants: {