Mp 2713 asset selector (#275)

* added dumb asset selector

* fix table layouts borrow and farm

* 🍱 added basic overlay, esc btn

* finish asset selector

* Update tailwind configf to include button styles

src/components/Button/EscButton.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from 'react'
+
+import { Cross } from 'components/Icons'
+import Button from 'components/Button'
+import Text from 'components/Text'
+
+interface Props {
+  enableKeyPress?: boolean
+  onClick: () => void
+}
+
+export default function EscButton(props: Props) {
+  const handleEscKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Escape') {
+        props.onClick()
+      }
+    },
+    [props],
+  )
+
+  useEffect(() => {
+    if (props.enableKeyPress) {
+      document.addEventListener('keydown', handleEscKey)
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscKey)
+    }
+  }, [props.onClick, props.enableKeyPress, handleEscKey])
+
+  return (
+    <Button
+      onClick={props.onClick}
+      leftIcon={<Cross />}
+      iconClassName='w-3'
+      color='tertiary'
+      className='h-3'
+      size='xs'
+    >
+      <Text size='2xs'>ESC</Text>
+    </Button>
+  )
+}

src/components/Button/constants.ts

@@ -31,21 +31,24 @@ export const buttonTransparentColorClasses = {
 }
 
 export const buttonRoundSizeClasses = {
-  small: 'h-[32px] w-[32px]',
-  medium: 'h-[40px] w-[40px]',
-  large: 'h-[56px] w-[56px]',
+  xs: 'h-5 w-5',
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-14 w-14',
 }
 
 export const buttonSizeClasses = {
-  small: 'text-sm',
-  medium: 'text-base',
-  large: 'text-lg',
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
 }
 
 export const buttonPaddingClasses = {
-  small: 'px-4 py-1.5 min-h-[32px]',
-  medium: 'px-4 py-2 min-h-[40px]',
-  large: 'px-4 py-2.5 min-h-[56px]',
+  xs: 'px-1.5 py-0.5 min-h-5',
+  sm: 'px-4 py-1.5 min-h-8',
+  md: 'px-4 py-2 min-h-10',
+  lg: 'px-4 py-2.5 min-h-14',
 }
 
 export const buttonVariantClasses = {
@@ -53,3 +56,10 @@ export const buttonVariantClasses = {
   transparent: 'rounded-sm bg-transparent p-0 transition duration-200 ease-in',
   round: 'rounded-full p-0',
 }
+
+export const circularProgressSize = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 18,
+}

src/components/Button/index.tsx

@@ -11,6 +11,7 @@ import {
   buttonSizeClasses,
   buttonTransparentColorClasses,
   buttonVariantClasses,
+  circularProgressSize,
   focusClasses,
 } from 'components/Button/constants'
 import { glowElement } from 'components/Button/utils'
@@ -24,7 +25,7 @@ interface Props {
   disabled?: boolean
   id?: string
   showProgressIndicator?: boolean
-  size?: 'small' | 'medium' | 'large'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   text?: string | ReactNode
   variant?: 'solid' | 'transparent' | 'round'
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
@@ -45,7 +46,7 @@ const Button = React.forwardRef(function Button(
     disabled,
     id = '',
     showProgressIndicator,
-    size = 'small',
+    size = 'sm',
     text,
     variant = 'solid',
     onClick,
@@ -111,7 +112,7 @@ const Button = React.forwardRef(function Button(
       tabIndex={tabIndex}
     >
       {showProgressIndicator ? (
-        <CircularProgress size={size === 'small' ? 10 : size === 'medium' ? 12 : 18} />
+        <CircularProgress size={circularProgressSize[size]} />
       ) : (
         <>
           {leftIcon && <span className={classNames(leftIconClassNames)}>{leftIcon}</span>}
@@ -119,7 +120,7 @@ const Button = React.forwardRef(function Button(
           {children && children}
           {rightIcon && <span className={classNames(rightIconClassNames)}>{rightIcon}</span>}
           {hasSubmenu && (
-            <span data-testid='button-submenu-indicator' className='ml-2 inline-block w-2.5'>
+            <span data-testid='button-submenu-indicator' className='ml-auto inline-block w-2.5'>
               <ChevronDown />
             </span>
           )}