adding tooltips. moved alert bac`:wq

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 const _paq = window._paq = window._paq || [] // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper';
 
 interface  HomeTabFileProps {
   plugin: any
@@ -153,17 +154,25 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
         </div>
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
-      <div className="justify-content-start mt-1 p-2 border-bottom d-flex flex-column" id="hTFileSection">
+      <div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection">
         <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>
+          <label className="btn 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 />
-          <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={"Connect to Localhost"}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
+            <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
+          </CustomTooltip>
         </div>
         <label style={{fontSize: "0.8rem"}} className="pt-2"><FormattedMessage id='home.loadFrom' /></label>
         <div className="d-flex">

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

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

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

@@ -2,6 +2,7 @@
 import React, { useEffect, useState, useContext } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { ThemeContext } from '../themeContext'
+import { CustomTooltip } from '@remix-ui/helper'
 declare global {
   interface Window {
     _paq: any
@@ -27,10 +28,6 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
 
   const themeFilter = useContext(ThemeContext)
 
-  const openLink = () => {
-    window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
-  }
-
   const startLearnEthTutorial = async (tutorial: 'basics' | 'soliditybeginner' | 'deploylibraries') => {
     await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
     plugin.verticalIcons.select('LearnEth')
@@ -52,17 +49,25 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
   return (
     <div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection">
       <div className="d-flex justify-content-between">
-        <label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>
+        <label className="py-2 pt-3 align-self-center m-0" style={{fontSize: "1.2rem"}}>
           <FormattedMessage id="home.learn" />
         </label>
-        <button
-          onClick={ async () => {
-            await goToLearnEthHome()
-          }}
-          className="h-100 px-2 pt-0 btn"
+        <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={"See all tutorials"}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
         >
-          <img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } />
-        </button>
+          <button
+            onClick={ async () => {
+              await goToLearnEthHome()
+            }}
+            className="h-100 px-2 pt-0 btn"
+          >
+            <img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } />
+          </button>
+        </CustomTooltip>
       </div>
       <div className="d-flex flex-column">
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
@@ -70,7 +75,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth1" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
-            <span style={{fontSize: "0.8rem"}}>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
               <FormattedMessage id="home.learnEth1Desc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
@@ -83,7 +88,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth2" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
-            <span style={{fontSize: "0.8rem"}}>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
               <FormattedMessage id="home.learnEth2Desc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('soliditybeginner')}>
@@ -96,7 +101,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.remixAdvanced" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">
-            <span style={{fontSize: "0.8rem"}}>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
               <FormattedMessage id="home.remixAdvancedDesc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>

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

@@ -6,29 +6,30 @@ const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabScamAlert () {
   return (
-    <div className="px-3" id="hTScamAlertSection">
+    <div className="" 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-1">
-          <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
-          <b><FormattedMessage id='home.scamAlert' />:</b>
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText' />
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText2' />:
-          <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">
-            <FormattedMessage id='home.learnMore' />
-          </a>
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText3' />
-          : &nbsp;
-          <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">
-            <FormattedMessage id='home.here' />
-          </a>
+      <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex  border border-danger">
+        <span className="align-self-center pl-4 mt-1">
+          <i style={{fontSize: 'xxx-large', fontWeight: 'lighter'}} className="pr-2 text-danger far fa-exclamation-triangle"></i>
         </span>
+        <div className='d-flex flex-column'>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText' />
+          </span>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText2' />:
+            <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">
+              <FormattedMessage id='home.learnMore' />
+            </a>
+          </span>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText3' />
+            : &nbsp;
+            <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">
+              <FormattedMessage id='home.here' />
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   )

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

@@ -57,9 +57,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
+            <HomeTabScamAlert></HomeTabScamAlert>
           </div>
         </div>
-        <HomeTabScamAlert></HomeTabScamAlert>
       </ThemeContext.Provider>
     </div>
   )