feat: add gray varinat to Badge. Improve table component

Synthetixio · Jul 20, 2022 · d204240 · d204240
1 parent 96dfe58
commit d204240
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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>