From d2042406b73d46cd3737a01f98c3c315888f3116 Mon Sep 17 00:00:00 2001
From: Peiman <peymannaderi3@yahoo.com>
Date: Wed, 20 Jul 2022 11:47:56 +0430
Subject: [PATCH] feat: add gray varinat to Badge. Improve table component

---
 src/components/Badge/Badge.tsx | 13 +++++++++++--
 src/components/Table/Table.tsx |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index d800bc6..d471883 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,7 +1,15 @@
 import clsx from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
 
-export type BadgeVariant = 'success' | 'blue' | 'pink' | 'pink' | 'orange' | 'red' | 'yellow';
+export type BadgeVariant =
+  | 'success'
+  | 'blue'
+  | 'pink'
+  | 'pink'
+  | 'orange'
+  | 'red'
+  | 'yellow'
+  | 'gray';
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: BadgeVariant;
@@ -16,7 +24,8 @@ const badgeColors = {
   pink: 'ui-border-pink ui-bg-pink ui-text-pink',
   orange: 'ui-border-orange ui-bg-orange ui-text-orange',
   red: 'ui-border-red ui-bg-red ui-text-red',
-  yellow: 'ui-border-yellow ui-bg-yellow ui-text-yellow'
+  yellow: 'ui-border-yellow ui-bg-yellow ui-text-yellow',
+  gray: 'ui-border-gray-650 ui-bg-gray-650 ui-text-gray-650'
 };
 
 export const Badge: React.FC<BadgeProps> = ({
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 979afc7..9cfc1f2 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -74,7 +74,7 @@ export const Table = <T extends Record<string, unknown>>(props: TableProps<T>):
                         {column.isSorted && (
                           <Icon
                             className='ui-text-xs ui-ml-1'
-                            name={column.isSortedDesc ? 'Top' : 'Bottom'}
+                            name={column.isSortedDesc ? 'Top-3' : 'Bottom-3'}
                           />
                         )}
                       </span>