Merge pull request #69 from bridgedxyz/feature/select-icon

Feature/select icon

README.md

@@ -24,8 +24,6 @@ title: bridged assistant for figma, sketch, xd
 - ✅ Live preview via [console](https://console.bridged.xyz) - compiles output source remotely makes design to living application within seconds
 - ✅ Context detection - bridged assistant understands the design, than converts it into a hight quality code. we don't generate rect and text code for a button. We generate button code for a button.
 
-
-
 ## Usage
 
 > install figma plugin via below link. note that the published plugin is allways behind few new features behind this repository. for trying out the latest and mindblowing features, please build from your local environment directly.
@@ -82,8 +80,6 @@ flutter widget builder is done by [figma/flutter](/flutter) and the core builder
 - ✅ formatted dart code
 - ✅ Best code quality (I Assure,) in this planet
 
-
-
 ## Console & Cloud integrations
 
 > Watch the demo on our [website](https://bridged.xyz)
@@ -92,15 +88,11 @@ Bridged consle integrated with assistant enables you to manage your design's con
 
 Learn more at [console repository](https://github.com/bridgedxyz/console.bridged.xyz)
 
-
-
 ## UI Element Detection
 
 > rule based button / input / icon detection with [@reflect.bridged.xyz/detection](./packages/detection)
 > Higher quality ML based detection available at [Bridged's context engine](https://github.com/bridgedxyz/context)
 
-
-
 ## Design Assistant
 
 > We provide various tools for you for creating stauning designs, and making you 10 times faster to create a working prototype.
@@ -113,14 +105,12 @@ Learn more at [console repository](https://github.com/bridgedxyz/console.bridged
 
   - 5,000 + [material design icons](https://github.com/bridgedxyz/reflect-icons)
   - 800 + [ant design icons](https://github.com/bridgedxyz/reflect-icons)
--
-  
+  - Read our blog about Icons Loader feature on [medium](https://medium.com/bridgedxyz/bridged-assistant-update-2021-0-1f1-meet-powerful-bridged-design-assistants-icon-loader-552b452396a4)
+
 - fonts replacer
 - buttons generator
 - and more
 
-
-
 ## Development guide
 
 ### Building the plugin
@@ -129,10 +119,12 @@ Learn more at [console repository](https://github.com/bridgedxyz/console.bridged
 - sketch: `sketch platform will be available soon`
 
 ### Running as Webdev
+
 > webdev is a mode that you can run assistant as a standalone appliaction for ui development purpose of its' you can't acccess or call api to design tools.
 
 Learn more at [./webdev](./webdev)
-``` sh
+
+```sh
 yarn
 
 # on root
@@ -143,31 +135,25 @@ cd webdev
 yarn start
 ```
 
-
-
 ### Debugging
 
 Use `console.log` statements to inspect values in your code.
 
 To open the developer console in the Figma desktop app, go to `Plugins` → `Development` → `Open Console`.
 
-
-
 ### Docs
 
 - [Create Figma Plugin docs](https://github.com/yuanqing/create-figma-plugin#docs)
 - [Figma plugin API docs](https://figma.com/plugin-docs/api/)
 
-
-
 ## Contributing & Project Structure
 
 **general**
 See this project's contributing guideline and technical overview [here](./CONTRIBUTING.md).
 And general bridged project contribution and collaboration guideline [here](https://github.com/bridgedxyz/contributing-and-license).
 
-
 **supported platforms and frameworks**
+
 - ✅ [figma](./figma)
 - ✅ [flutter](./core)
 - ✅ [bridged web](https://github.com/bridgedxyz/console.bridged.xyz)
@@ -178,16 +164,12 @@ And general bridged project contribution and collaboration guideline [here](http
 - [xd](./xd) -- coming soon
 - [zeplin](./zeplin) -- coming soon
 
-
-
 ## Changelog
 
 we release new updates in a by-monthluy cycle. Watch this repository on github or signup for our news letters on [bridged.xyz](https://bridged.xyz)
 
 All update logs available at [CHANGELOG.md](./CHANGELOG.md)
 
-
-
 ## LEGAL
 
 > read [LICENSE](./LICENSE).
@@ -201,8 +183,6 @@ All update logs available at [CHANGELOG.md](./CHANGELOG.md)
 - the code and packages distributed via this repository is free to use without any restrictions.
 - code, design is free to use and modify. (just don't make any profits by re-distributing this plugin.)
 
-
-
 ### DISCLAIMER
 
 re-use of this software and it's license is overrided by [contributing-and-license](https://github.com/bridgedxyz/contributing-and-license)

app/lib/app.css

@@ -1,11 +1,11 @@
 #create {
-  box-shadow: none;
-  background: #18a0fb;
-  color: white;
+    box-shadow: none;
+    background: #18a0fb;
+    color: white;
 }
 
 #create:focus {
-  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
 }
 
 h1,
@@ -16,24 +16,29 @@ h5,
 h6,
 sub,
 p {
-  font-family: "Roboto";
+    font-family: "Roboto";
 }
 
-
+.jss3 {
+    background-color: #000 !important;
+}
 
 
 /* for selected tab under line color */
+
 .PrivateTabIndicator-colorSecondary-3 {
-  background-color: #000 !important;
+    background-color: #000 !important;
 }
 
+
 /* for tabs font color switch select */
+
 .MuiTab-textColorInherit.Mui-selected {
-  opacity: 1 !important;
-  font-weight: bold !important;
+    opacity: 1 !important;
+    font-weight: bold !important;
 }
 
 .MuiTab-textColorInherit {
-  opacity: 0.4 !important;
-  font-weight: initial !important;
+    opacity: 0.4 !important;
+    font-weight: initial !important;
 }

app/lib/components/icons-loader.tsx

@@ -161,7 +161,7 @@ function IconSearch(props: {
         <Search />
         <input
           placeholder="Search with icon name"
-          onChange={(e) => props.onChange(e.target.value)}
+          onChange={(e) => props.onChange(e.target.value.toLocaleLowerCase())}
         />
       </div>
       <div className="search-container-checker">