rename connect to localhost

apps/remix-ide/src/app/plugins/remixd-handle.tsx

@@ -115,7 +115,7 @@ export class RemixdHandle extends WebsocketPlugin {
       // warn the user only if he/she is in the browser context
       const mod: AppModal = {
         id: 'remixdConnect',
-        title: 'Connect to localhost',
+        title: 'Access file system using remixd',
         message: remixdDialog(),
         okLabel: 'Connect',
         cancelLabel: 'Cancel',

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -55,7 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
-  "home.connectToLocalhost": "Connect to Localhost",
-  "home.loadFrom": "LOAD FROM",
+  "home.connectToLocalhost": "Access File System",
+  "home.loadFrom": "Load from",
   "home.resources": "Resources"
 }

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

@@ -154,16 +154,18 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
       <div className="justify-content-start mt-1 p-2 border-bottom d-flex flex-column" id="hTFileSection">
-        <label style={{fontSize: "1rem"}}><FormattedMessage id='home.files' /></label>
-        <button className="btn btn-primary p-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}><FormattedMessage id='home.newFile' /></button>
-        <label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput"><FormattedMessage id='home.openFile' /></label>
-        <input title="open file" type="file" id="openFileInput" onChange={(event) => {
-          event.stopPropagation()
-          plugin.verticalIcons.select('filePanel')
-          uploadFile(event.target)
-        }} multiple />
-        <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
-        <label className="pt-2"><FormattedMessage id='home.loadFrom' /></label>
+        <label className="h5"><FormattedMessage id='home.files' /></label>
+        <div className="dflex">
+          <button className="btn btn-primary p-2 mr-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}><FormattedMessage id='home.newFile' /></button>
+          <label className="btn p-2 mr-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput"><FormattedMessage id='home.openFile' /></label>
+          <input title="open file" type="file" id="openFileInput" onChange={(event) => {
+            event.stopPropagation()
+            plugin.verticalIcons.select('filePanel')
+            uploadFile(event.target)
+          }} multiple />
+          <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
+        </div>
+        <label style={{fontSize: "0.8rem"}} className="pt-2"><FormattedMessage id='home.loadFrom' /></label>
         <div className="d-flex">
           <button
             className="btn p-2 border mr-2"

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

@@ -67,7 +67,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
 
   return (
     <div className="pl-2" id="hTGetStartedSection">
-      <label style={{fontSize: "1.2rem"}}>
+      <label style={{fontSize: "1.5rem"}}>
         <span className="mr-2" style={{fontWeight: "bold"}}>
           <FormattedMessage id="home.getStarted" />
         </span>

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

@@ -6,10 +6,10 @@ const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabScamAlert () {
   return (
-    <div className="" id="hTScamAlertSection">
+    <div className="px-3" id="hTScamAlertSection">
       <label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}><FormattedMessage id='home.scamAlert' /></label>
       <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex flex-column border border-danger">
-        <span className="pl-4 mt-2">
+        <span className="pl-4 mt-1">
           <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
           <b><FormattedMessage id='home.scamAlert' />:</b>
         </span>

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

@@ -53,7 +53,7 @@ function HomeTabTitle() {
   return (
     <div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection">
       
-      <div className="d-flex justify-content-between">
+      <div className="d-flex py-2 justify-content-between">
         <div className='d-flex justify-content-start'>
         <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
           <div className="ml-2 d-flex">

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

@@ -45,19 +45,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   }, [])
 
   return (
-    <div className="d-flex flex-row w-100" data-id="remixUIHTAll">
+    <div className="d-flex flex-column w-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={ state.themeQuality }>
-        <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
-          <HomeTabTitle />
-          <HomeTabFile plugin={plugin} />
-          <HomeTabLearn plugin={plugin} />
-        </div>
-        <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
-          <HomeTabFeatured></HomeTabFeatured>
-          <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
-          <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
-          <HomeTabScamAlert></HomeTabScamAlert>
+        <div className='d-flex flex-row w-100'>
+          <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
+            <HomeTabTitle />
+            <HomeTabFile plugin={plugin} />
+            <HomeTabLearn plugin={plugin} />
+          </div>
+          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
+            <HomeTabFeatured></HomeTabFeatured>
+            <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
+            <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
+          </div>
         </div>
+        <HomeTabScamAlert></HomeTabScamAlert>
       </ThemeContext.Provider>
     </div>
   )