new icon for remixguide, border for navtab etc

apps/contract-verification/src/app/components/NavMenu.tsx

@@ -11,7 +11,7 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
     <NavLink
       to={to}
-      className={({ isActive }) => 'text-decoration-none d-flex px-1 flex-column justify-content-center small ' + (isActive ? "bg-light" : "bg-transparent")}
+      className={({ isActive }) => 'text-decoration-none d-flex px-1 py-1 flex-column justify-content-center small ' + (isActive ? "bg-light border-top border-left border-right" : "border-0 bg-transparent")}
     >
       <span className=''>
         <span>{icon}</span>

apps/remix-ide/src/remixAppManager.js

@@ -83,7 +83,6 @@ let requiredModules = [
   'dgit',
   'pinnedPanel',
   'pluginStateLogger',
-  //'remixGuide',
   'environmentExplorer',
   'templateSelection',
   'matomo',
@@ -93,7 +92,7 @@ let requiredModules = [
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither']
 
-const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'etherscan', 'contract-verification', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler', 'learneth', 'quick-dapp']
+const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'contract-verification', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler', 'learneth', 'quick-dapp']
 
 const partnerPlugins = ['cookbookdev']
 
@@ -138,7 +137,7 @@ export function isNative(name) {
     'circuit-compiler',
     'compilationDetails',
     'vyperCompilationDetails',
-    //'remixGuide',
+    'remixGuide',
     'environmentExplorer',
     'templateSelection',
     'walletconnect',
@@ -410,7 +409,8 @@ class PluginLoader {
       'compilationDetails',
       'walletconnect',
       'dapp-draft',
-      'solidityumlgen'
+      'solidityumlgen',
+      'remixGuide'
     ]
     this.loaders = {}
     this.loaders.localStorage = {

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

@@ -18,6 +18,11 @@ function HomeTabFeatured(props:HomeTabFeaturedProps) {
     props.plugin.verticalIcons.select('LearnEth')
     _paq.push(['trackEvent', 'hometab', 'featuredSection', 'LearnEth'])
   }
+  const handleStartRemixGuide = async () => {
+    _paq.push(['trackEvent', 'hometab', 'featuredSection', 'watchOnRemixGuide'])
+    await props.plugin.appManager.activatePlugin(['remixGuide'])
+    await props.plugin.call('tabs', 'focus', 'remixGuide')
+  }
   return (
     <div className="pt-1 pl-2" id="hTFeaturedeSection">
       <div className="mb-2 remix_ui-carousel-container">
@@ -80,19 +85,18 @@ function HomeTabFeatured(props:HomeTabFeaturedProps) {
                   <div style={{ fontSize: '0.8rem', lineHeight: '1.25rem' }} className="mb-3">
                     <FormattedMessage id="home.learnEthPromoText" />
                   </div>
-                  <span
+                  <button
                     className="remixui_home_text btn-sm btn-secondary mt-2 text-decoration-none mb-3"
-                    style={{ cursor: 'pointer' }}
                     onClick={()=>handleStartLearneth()}
                   >
                     <FormattedMessage id="home.learnEthPromoButton" />
-                  </span>
+                  </button>
                 </div>
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
-                <a href="https://www.youtube.com/@EthereumRemix/videos" target="__blank">
+                <button className="btn" onClick={() => handleStartRemixGuide()}>
                   <img src={'assets/img/YouTubeLogo.webp'} className="remixui_carouselImage" alt=""></img>
-                </a>
+                </button>
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.remixYouTube" />
@@ -103,14 +107,12 @@ function HomeTabFeatured(props:HomeTabFeaturedProps) {
                   <div style={{ fontSize: '0.8rem' }} className="mb-3">
                     <FormattedMessage id="home.remixYouTubeText2" />
                   </div>
-                  <a
+                  <button
                     className="remixui_home_text btn-sm btn-secondary mt-2 text-decoration-none mb-3"
-                    onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'youTubeMore'])}
+                    onClick={() => handleStartRemixGuide()}
-                    target="__blank"
-                    href="https://www.youtube.com/@EthereumRemix/videos"
                   >
                     <FormattedMessage id="home.remixYouTubeMore" />
-                  </a>
+                  </button>
                 </div>
               </div>
             </Carousel>