From 7d1618b1b09f95475689093a2a1e5b069d409c63 Mon Sep 17 00:00:00 2001
From: "reza.bm8" <reza.bm8@gmail.com>
Date: Wed, 29 Nov 2023 12:02:18 +0000
Subject: [PATCH] chore: fix github comment

---
 components/common/IconStatus/IconStatus.helper.ts |  7 +++++++
 components/common/IconStatus/index.tsx            | 11 +++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/common/IconStatus/IconStatus.helper.ts b/components/common/IconStatus/IconStatus.helper.ts
index 9f89d9d..85915af 100644
--- a/components/common/IconStatus/IconStatus.helper.ts
+++ b/components/common/IconStatus/IconStatus.helper.ts
@@ -15,3 +15,10 @@ export const BackgroundStatus = {
   success: 'bg-backgroundSuccess',
   unknown: 'bg-backgroundRunning',
 };
+
+export const TextColorStatus = {
+  running: 'text-running',
+  failed: 'text-failed',
+  success: 'text-success',
+  unknown: 'text-running',
+};
diff --git a/components/common/IconStatus/index.tsx b/components/common/IconStatus/index.tsx
index 39b45f1..4333077 100644
--- a/components/common/IconStatus/index.tsx
+++ b/components/common/IconStatus/index.tsx
@@ -1,11 +1,16 @@
 import Image from 'next/image';
 import { PropsType } from './IconStatus.type';
-import { BackgroundStatus, SwapStatusIcon } from './IconStatus.helper';
+import {
+  BackgroundStatus,
+  SwapStatusIcon,
+  TextColorStatus,
+} from './IconStatus.helper';
 
 function IconStatus(props: PropsType) {
   const { status, hasTitle } = props;
   const statusIcon = SwapStatusIcon[status];
   const backgroundColor = BackgroundStatus[status];
+  const textColor = TextColorStatus[status];
 
   return (
     <>
@@ -15,9 +20,7 @@ function IconStatus(props: PropsType) {
         } w-[24px] h-[24px] rounded-full flex items-center justify-center ${backgroundColor}`}>
         <Image src={statusIcon} width={24} alt="status" />
       </div>
-      {hasTitle && (
-        <div className={`text-16 text-${status.toLowerCase()}`}>{status}</div>
-      )}
+      {hasTitle && <div className={`text-16 ${textColor}`}>{status}</div>}
     </>
   );
 }