feat: add Modal component + use it on ProjectAssetExplorer

packages/@dcl/inspector/package.json

@@ -46,5 +46,9 @@
     "start": "node ./build.js --watch"
   },
   "types": "dist/tooling-entrypoint.d.ts",
-  "typings": "dist/tooling-entrypoint.d.ts"
+  "typings": "dist/tooling-entrypoint.d.ts",
+  "dependencies": {
+    "@types/react-modal": "^3.16.0",
+    "react-modal": "^3.16.1"
+  }
 }

packages/@dcl/inspector/src/components/Block/Block.css

@@ -16,7 +16,7 @@
 }
 
 .Block.broken {
-  border: 1px #d33c3c dashed;
+  border: 1px var(--primary) dashed;
   padding: 0 5px 8px 5px;
   border-radius: 2px;
 }

packages/@dcl/inspector/src/components/Button/Button.css

@@ -24,3 +24,17 @@
   width: 24px;
   height: 24px;
 }
+
+.Button.big {
+  padding: 16px;
+  font-size: 16px;
+}
+
+.Button.danger {
+  background-color: var(--primary);
+}
+
+.Button.danger:hover,
+.Button.danger.active {
+  background-color: var(--primary-darker)
+}

packages/@dcl/inspector/src/components/Button/Button.tsx

@@ -1,15 +1,14 @@
-import React from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 
 import { PropTypes } from './types'
 import './Button.css'
 
-function Button(props: PropTypes) {
+function Button({ size, type, ...props }: PropTypes) {
   return (
-    <button {...props} className={classNames('Button', props.className)}>
+    <button {...props} className={cx('Button', size, type, props.className)}>
       {props.children}
     </button>
   )
 }
 
-export default Button
+export default Button

packages/@dcl/inspector/src/components/Button/types.ts

@@ -1 +1,6 @@
-export type PropTypes = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+type Button = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+export type PropTypes = Omit<Button, 'type' | 'size'> & {
+  type?: 'danger' | 'etc'
+  size?: 'big' | 'etc'
+}