lib added

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -1,83 +1,82 @@
 .remixui_text {
-    cursor: pointer;
-    font-weight: normal;
-    max-width: 300px;
-  }
-  .remixui_text:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-  .remixui_homeContainer {
-    overflow-y: hidden;
-    overflow-y: auto;
-    flex-grow: 3;
-  }
-  .remixui_hpLogoContainer {
-    margin: 30px;
-    padding-right: 90px;
-  }
-  .remixui_mediaBadge {
-   font-size: 2em;
-   height: 2em;
-   width: 2em;
-  }
-  .remixui_mediaBadge:focus {
-    outline: none;
-  }
-  .remixui_image {
-    height: 1em;
-    width: 1em;
-    text-align: center;
-  }
-  .remixui_logoImg {
-    height: 10em;
-  }
-  .remixui_rightPanel {
-    right: 0;
-    position: absolute;
-    z-index: 3;
-  }
-  .remixui_remixHomeMedia {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .remixui_panels {
-    box-shadow: 0px 0px 13px -7px;
-  }
-  .remixui_labelIt {
-    margin-bottom: 0;
-  }
-  .remixui_bigLabelSize {
-    font-size: 13px;
-  }
-  .remixui_seeAll {
-    margin-top: 7px;
-    white-space: nowrap;
-  }
-  .remixui_importFrom p {
-    margin-right: 10px;
-  }
-  .remixui_logoContainer img{
-    height: 150px;
-    opacity: 0.7;
-  }
-  .remixui_envLogo {
-    height: 16px;
-  }
-  .remixui_cursorStyle {
-    cursor: pointer;
-  }
-  .remixui_envButton {
-    width: 120px;
-    height: 70px;
-  }
-  .remixui_media {
-    overflow: hidden;
-    max-width: 400px;
-    transition: .5s ease-out;
-    z-index: 1000;
-  }
-  .remixui_migrationBtn {
-    width: 100px;
-  }
-  
+  cursor: pointer;
+  font-weight: normal;
+  max-width: 300px;
+}
+.remixui_text:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.remixui_homeContainer {
+  overflow-y: hidden;
+  overflow-y: auto;
+  flex-grow: 3;
+}
+.remixui_hpLogoContainer {
+  margin: 30px;
+  padding-right: 90px;
+}
+.remixui_mediaBadge {
+  font-size: 2em;
+  height: 2em;
+  width: 2em;
+}
+.remixui_mediaBadge:focus {
+  outline: none;
+}
+.remixui_image {
+  height: 1em;
+  width: 1em;
+  text-align: center;
+}
+.remixui_logoImg {
+  height: 10em;
+}
+.remixui_rightPanel {
+  right: 0;
+  position: absolute;
+  z-index: 3;
+}
+.remixui_remixHomeMedia {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.remixui_panels {
+  box-shadow: 0px 0px 13px -7px;
+}
+.remixui_labelIt {
+  margin-bottom: 0;
+}
+.remixui_bigLabelSize {
+  font-size: 13px;
+}
+.remixui_seeAll {
+  margin-top: 7px;
+  white-space: nowrap;
+}
+.remixui_importFrom p {
+  margin-right: 10px;
+}
+.remixui_logoContainer img{
+  height: 150px;
+  opacity: 0.7;
+}
+.remixui_envLogo {
+  height: 16px;
+}
+.remixui_cursorStyle {
+  cursor: pointer;
+}
+.remixui_envButton {
+  width: 120px;
+  height: 70px;
+}
+.remixui_media {
+  overflow: hidden;
+  max-width: 400px;
+  transition: .5s ease-out;
+  z-index: 1000;
+}
+.remixui_migrationBtn {
+  width: 100px;
+}

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -26,7 +26,7 @@ const loadingInitialState = {
 }
 
 const loadingReducer = (state = loadingInitialState, action) => {
-  return {...state, tooltip: action.tooltip, showModalDialog: false, importSource: ''}
+  return { ...state, tooltip: action.tooltip, showModalDialog: false, importSource: '' }
 }
 
 export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
@@ -42,7 +42,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     themeQuality: registry.get('themeModule').api.currentTheme().quality === 'dark' ? themes.dark : themes.light,
     showMediaPanel: 'none',
     showModalDialog: false,
-    modalInfo: { title: '', loadItem: '', examples: []},
+    modalInfo: { title: '', loadItem: '', examples: [] },
     importSource: '',
     toasterMsg: ''
   })
@@ -52,7 +52,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     const fileProviders = registry.get('fileproviders').api
     contentImport.import(
       state.importSource,
-      (loadingMsg) => dispatch({tooltip: loadingMsg}),
+      (loadingMsg) => dispatch({ tooltip: loadingMsg }),
       (error, content, cleanUrl, type, url) => {
         if (error) {
           toast(error.message || error)
@@ -71,7 +71,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     })
   }
 
-  const [state1, dispatch] = useReducer(loadingReducer, loadingInitialState)
+  const [, dispatch] = useReducer(loadingReducer, loadingInitialState)
 
   const playRemi = async () => {
     remiAudioEl.current.play()
@@ -170,7 +170,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
 
   const showFullMessage = (title: string, loadItem: string, examples: Array<string>) => {
     setState(prevState => {
-      return { ...prevState, showModalDialog: true, modalInfo: { title: title, loadItem: loadItem , examples: examples } }
+      return { ...prevState, showModalDialog: true, modalInfo: { title: title, loadItem: loadItem, examples: examples } }
     })
   }
 
@@ -205,9 +205,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             ref={inputValue}
             type='text'
             name='prompt_text'
-            id='prompt_text'
-            className="w-100 form-control"
-            data-id="modalDialogCustomPromptText"
+            id='inputPrompt_text'
+            className="w-100 mt-1 form-control"
+            data-id="importModalDialogCustomPromptText"
             value={state.importSource}
             onInput={(e) => {
               setState(prevState => {
@@ -219,7 +219,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
       <div className="d-flex flex-column ml-4" id="remixUiRightPanel">
-        <div className="border-bottom d-flex justify-content-between mr-4 py-3 mb-4">
+        <div className="border-bottom d-flex justify-content-between mr-4 pb-3 mb-3">
           <div className="mx-4 my-4 d-flex">
             <label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label>
           </div>
@@ -257,13 +257,13 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
-                  <label className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
+                  <span className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
                     Open Files
                     <input title="open file" type="file" onChange={(event) => {
                       event.stopPropagation()
                       uploadFile(event.target)
                     }} multiple />
-                  </label>
+                  </span>
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>

tsconfig.base.json

@@ -64,6 +64,7 @@
       "@remix-ui/renderer": ["libs/remix-ui/renderer/src/index.ts"],
       "@remix-ui/terminal": ["libs/remix-ui/terminal/src/index.ts"],
       "@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"],
+      "@remix-ui/home-tab": ["libs/remix-ui/home-tab/src/index.ts"],
       "@remix-ui/editor": ["libs/remix-ui/editor/src/index.ts"],
       "@remix-project/remix-ui/home-tab": ["libs/remix-ui/home-tab/src/index.ts"],
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],