adding tooltips to home buttons

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

@@ -57,7 +57,9 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.startCoding": "Start Coding",
+  "home.startCodingPlayground": "Open a playground for prototyping and simply learning",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.accessFileSystem": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources",

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

@@ -55,6 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources"

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

@@ -55,6 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "Access File System",
   "home.loadFrom": "Load from",
   "home.resources": "Resources"

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

@@ -55,7 +55,9 @@
   "home.files": "文件",
   "home.newFile": "新建文件",
   "home.startCoding": "Start Coding",
+  "home.startCodingPlayground": "Open a playground for prototyping and simply learning",
   "home.openFile": "打开本地文件",
+  "home.openFileTooltip": "Open a File from you File System",
   "home.connectToLocalhost": "连接本地主机",
   "home.loadFrom": "从以下来源导入",
   "home.resources": "资源"

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

@@ -244,44 +244,37 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
         </label>
         <div className="d-flex flex-column">
           <div className="d-flex flex-row">
-            <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={() => startCoding()}>
-              <FormattedMessage id="home.startCoding" />
-            </button>
-            <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} 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
-            />
             <CustomTooltip
               placement={'top'}
               tooltipId="overlay-tooltip"
               tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id='home.openFile' />}
+              tooltipText={<FormattedMessage id='home.startCodingPlayground' />}
+              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+            >
+              <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={() => startCoding()}>
+                <FormattedMessage id="home.startCoding" />
+              </button>
+            </CustomTooltip>
+            <CustomTooltip
+              placement={'top'}
+              tooltipId="overlay-tooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id='home.openFileTooltip' />}
               tooltipTextClasses="border bg-light text-dark p-1 pr-3"
             >
               <span>
-                <label className="btn p-2 mr-2 border my-1" style={{width: 'fit-content', cursor: 'pointer'}} htmlFor="openFileInput">
-                  <FormattedMessage id='home.openFile' />
+                <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} 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)
-                    }}
+                  id="openFileInput"
+                  onChange={(event) => {
+                    event.stopPropagation()
+                    plugin.verticalIcons.select('filePanel')
+                    uploadFile(event.target)
+                  }}
                   multiple
                 />
               </span>