From c1da92bc991b085576936c0a7056e076a4bc4d51 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Mon, 4 Mar 2024 17:50:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20adjust=20design=20to=20?=
 =?UTF-8?q?figma?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Steps/Step/Step.theme.ts  | 10 +++++++---
 .../src/components/shared/Steps/Step/Step.tsx       | 13 ++++++++++---
 .../src/components/shared/Steps/Steps.theme.ts      |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

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 <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 (
diff --git a/packages/frontend/src/components/shared/Steps/Steps.theme.ts b/packages/frontend/src/components/shared/Steps/Steps.theme.ts
index a5d62e99..4c3b2acb 100644
--- a/packages/frontend/src/components/shared/Steps/Steps.theme.ts
+++ b/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: {