diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..3b664107
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "git.ignoreLimitWarning": true
+}
\ No newline at end of file
diff --git a/figma/src/app/components/box-directory-input.tsx b/figma/src/app/components/box-directory-input.tsx
index 10915227..c29c5721 100644
--- a/figma/src/app/components/box-directory-input.tsx
+++ b/figma/src/app/components/box-directory-input.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import { ReactBoxSnippetGenerator } from "@bridged.xyz/box";
+import Button from "@material-ui/core/Button";
function buildFolderSelector(): HTMLInputElement {
const fileSelector = document.createElement('input');
@@ -57,7 +58,7 @@ export class BoxDirectoryInput extends React.Component {
render() {
return <>
{/* */}
-
+
>
}
}
\ No newline at end of file
diff --git a/figma/src/app/components/box-tab.tsx b/figma/src/app/components/box-tab.tsx
index 4f1e61b7..2184036c 100644
--- a/figma/src/app/components/box-tab.tsx
+++ b/figma/src/app/components/box-tab.tsx
@@ -1,5 +1,5 @@
+import Button from '@material-ui/core/Button'
import * as React from 'react'
-import { EK_GENERATED_CODE_PLAIN, EK_PREVIEW_SOURCE } from '../constants/ek.constant'
import { BoxDirectoryInput } from './box-directory-input'
@@ -34,12 +34,12 @@ export class BoxTab extends React.Component {
Box section start
currently selected component is... { }
-
Box section end
diff --git a/figma/src/app/components/dev-tools.tsx b/figma/src/app/components/dev-tools.tsx
index f82683c2..ce346100 100644
--- a/figma/src/app/components/dev-tools.tsx
+++ b/figma/src/app/components/dev-tools.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { IconsLoader } from "./icons-loader";
@@ -34,6 +35,7 @@ export class DevTools extends React.Component {
hide only text
randomize
open in console
+
}
}
\ No newline at end of file
diff --git a/figma/src/app/components/highlight.css b/figma/src/app/components/highlight.css
index 3fc06f19..b0b52022 100644
--- a/figma/src/app/components/highlight.css
+++ b/figma/src/app/components/highlight.css
@@ -1,19 +1,19 @@
-
-code{
+code {
width: max-content;
height: auto;
}
pre {
- margin-left:-16px;
+ margin-left: -16px;
margin-right: -16px;
padding: 8px;
overflow: scroll;
}
-.copy{
+.sticky-actions {
position: sticky;
right: 4px;
+ margin-right: 16px;
top: 4px;
}
\ No newline at end of file
diff --git a/figma/src/app/components/highlight.tsx b/figma/src/app/components/highlight.tsx
index 43016449..2e002d8e 100644
--- a/figma/src/app/components/highlight.tsx
+++ b/figma/src/app/components/highlight.tsx
@@ -11,6 +11,7 @@ import { EK_COPIED } from '../constants/ek.constant';
import { quickLook } from '../../quicklook';
import { Widget } from '@bridged.xyz/flutter-builder/lib';
import { notify } from '@bridged.xyz/design-sdk/lib/figma';
+import Button from '@material-ui/core/Button';
dartLang(Prism);
// endregion
@@ -57,14 +58,14 @@ export default class Highlight extends React.Component {
setLoadingState(false)
notify(parent, "compile failed. view console for details.", 2)
})
-
}
render() {
return
-
copy code
-
{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}
+
+
copy code
+
{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}
{({ className, style, tokens, getLineProps, getTokenProps }) => (
diff --git a/figma/src/app/components/icons-loader.tsx b/figma/src/app/components/icons-loader.tsx
new file mode 100644
index 00000000..cb68a68a
--- /dev/null
+++ b/figma/src/app/components/icons-loader.tsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react"
+import { IconConfig } from "@bridged.xyz/client-sdk/lib"
+import Tooltip from "@material-ui/core/Tooltip";
+import IconButton from "@material-ui/core/IconButton";
+import GridList from "@material-ui/core/GridList";
+import GridListTile from "@material-ui/core/GridListTile";
+import { EK_CREATE_ICON } from "../constants/ek.constant";
+import { loadSvg, makeIconUrl } from "../../assets-repository/icons-generator";
+import TextField from "@material-ui/core/TextField";
+import LinearProgress from "@material-ui/core/LinearProgress";
+const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/material/config.json"
+
+
+// cached icons configs
+let CONFIGS: Map
+export function IconsLoader() {
+ const [configs, setConfigs] = useState