refactor elements of homeTab as per review comments

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

@@ -49,7 +49,7 @@
   "home.remixLinkedinProfile": "Remix Linkedin Profile",
   "home.remixMediumPosts": "Remix Medium Posts",
   "home.joinUsOnDiscord": "Join us on Discord",
-  "home.nativeIDE": "The Native IDE for Web3 Development.",
+  "home.nativeIDE": "Learn. Explore. Create",
   "home.website": "Website",
   "home.documentation": "Documentation",
   "home.remixPlugin": "Remix Plugin",

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

@@ -16,7 +16,7 @@ function HomeTabFeatured() {
       <label style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.featured" />
       </label>
-      <div className="mb-2">
+      <div className="mb-2 remix_ui-carousel-container">
         <div className="w-100 d-flex flex-column rounded-3" style={{ height: '450px' }}>
           <ThemeContext.Provider value={themeFilter}>
             <Carousel

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

@@ -150,9 +150,9 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
 
   return (
     <div className="pl-2" id="hTGetStartedSection">
-      <label className="pt-3" style={{ fontSize: '1.2rem' }}>
+      {/* <label className="pt-3" style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.projectTemplates" />
-      </label>
+      </label> */}
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={themeFilter}>
           <div className="pt-3">

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

@@ -3,8 +3,55 @@
 import React, { useEffect, useState, useRef, useContext } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { CustomTooltip } from '@remix-ui/helper'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
+type HometabIconSection = {
+  textToolip: JSX.Element
+  urlLink: string
+  iconClass: 'fa-youtube'|'fa-x-twitter'|'fa-linkedin'|'fa-medium'|'fa-discord'
+  placement: Placement
+  matomoTrackingEntry: string[]
+}
+
+const iconButtons: HometabIconSection[] = [
+  {
+    textToolip: <FormattedMessage id="home.remixYoutubePlaylist" />,
+    matomoTrackingEntry: ['trackEvent', 'hometab', 'socialMedia', 'youtube'],
+    urlLink: 'https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA',
+    iconClass: 'fa-youtube',
+    placement: 'top'
+  },
+  {
+    textToolip: <FormattedMessage id="home.remixTwitterProfile" />,
+    matomoTrackingEntry: ['trackEvent', 'hometab', 'socialMedia', 'twitter'],
+    urlLink: 'https://twitter.com/EthereumRemix',
+    iconClass: 'fa-x-twitter',
+    placement: 'top'
+  },
+  {
+    textToolip: <FormattedMessage id="home.remixLinkedinProfile" />,
+    matomoTrackingEntry: ['trackEvent', 'hometab', 'socialmedia', 'linkedin'],
+    urlLink: 'https://www.linkedin.com/company/ethereum-remix/',
+    iconClass: 'fa-linkedin',
+    placement: 'top'
+  },
+  {
+    textToolip: <FormattedMessage id="home.remixMediumPosts" />,
+    matomoTrackingEntry: ['trackEvent', 'hometab', 'socialmedia', 'medium'],
+    urlLink: 'https://medium.com/remix-ide',
+    iconClass: 'fa-medium',
+    placement: 'top'
+  },
+  {
+    textToolip: <FormattedMessage id="home.joinUsOnDiscord" />,
+    matomoTrackingEntry: ['trackEvent', 'hometab', 'socialmedia', 'discord'],
+    urlLink: 'https://discord.gg/mh9hFCKkEq',
+    iconClass: 'fa-discord',
+    placement: 'top'
+  }
+]
+
 function HomeTabTitle() {
   useEffect(() => {
     document.addEventListener('keyup', (e) => handleSearchKeyDown(e))
@@ -64,82 +111,24 @@ function HomeTabTitle() {
           </div>
         </div>
         <span className="d-flex flex-nowrap align-self-end">
+          {iconButtons.map((button, index) => (
             <CustomTooltip
-            placement={'top'}
-            tooltipId="overlay-tooltip"
-            tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.remixYoutubePlaylist" />}
-            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-          >
-            <button
-              onClick={() => {
-                openLink('https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA')
-                _paq.push(['trackEvent', 'hometab', 'socialMedia', 'youtube'])
-              }}
-              className="border-0 px-1 h-100 btn fab fa-youtube"
-            ></button>
-          </CustomTooltip>
-          <CustomTooltip
-            placement={'top'}
-            tooltipId="overlay-tooltip"
-            tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.remixTwitterProfile" />}
-            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-          >
-            <button
-              onClick={() => {
-                openLink('https://twitter.com/EthereumRemix')
-                _paq.push(['trackEvent', 'hometab', 'socialMedia', 'twitter'])
-              }}
-              className="border-0 px-1 h-100 btn fab fa-x-twitter"
-            ></button>
-          </CustomTooltip>
-          <CustomTooltip
-            placement={'top'}
-            tooltipId="overlay-tooltip"
-            tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.remixLinkedinProfile" />}
-            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-          >
-            <button
-              onClick={() => {
-                openLink('https://www.linkedin.com/company/ethereum-remix/')
-                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'linkedin'])
-              }}
-              className="border-0 px-1 h-100 btn fab fa-linkedin"
-            ></button>
-          </CustomTooltip>
-          <CustomTooltip
-            placement={'top'}
-            tooltipId="overlay-tooltip"
-            tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.remixMediumPosts" />}
-            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-          >
-            <button
-              onClick={() => {
-                openLink('https://medium.com/remix-ide')
-                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'medium'])
-              }}
-              className="border-0 h-100 px-1 btn fab fa-medium"
-            ></button>
-          </CustomTooltip>
-
-          <CustomTooltip
-            placement={'top'}
+              placement={button.placement}
               tooltipId="overlay-tooltip"
               tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.joinUsOnDiscord" />}
+              tooltipText={button.textToolip}
               tooltipTextClasses="border bg-light text-dark p-1 pr-3"
             >
               <button
+                key={index}
                 onClick={() => {
-                openLink('https://discord.gg/mh9hFCKkEq')
-                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'discord'])
+                  openLink(button.urlLink)
+                  _paq.push(button.matomoTrackingEntry)
                 }}
-              className="border-0 h-100 pl-1 pr-0 btn fab fa-discord"
+                className={`border-0 h-100 pl-1 pr-0 btn fab ${button.iconClass}`}
               ></button>
             </CustomTooltip>
+          ))}
         </span>
       </div>
       <b className="py-1 text-dark" style={{ fontStyle: 'italic' }}>
@@ -163,7 +152,6 @@ function HomeTabTitle() {
           target="__blank"
           href="https://remix-plugin-docs.readthedocs.io/en/latest/"
         >
-          {/* <FormattedMessage id="home.remixPlugin" /> */}
           Remix Desktop
         </a>
         <a

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

@@ -114,3 +114,11 @@
   background-color: var(--body-bg);
   color: var(--text);
 }
+
+.remix_ui-carousel-container {
+  container: remix_ui-carousel-container / inline-size;
+}
+
+@container remix_ui-carousel-container (inline-size < 700px) {
+
+}