refactored UI of templates on hometab

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -284,19 +284,19 @@ template {
     color:#fff
 }
 .h1,h1 {
-    font-size:4rem
+    font-size:3rem
 }
 .h2,h2 {
-    font-size:3rem
+    font-size:2.5rem
 }
 .h3,h3 {
-    font-size:2.5rem
+    font-size:2rem
 }
 .h4,h4 {
-    font-size:2rem
+    font-size:1.6rem
 }
 .h5,h5 {
-    font-size:1.5rem
+    font-size:1.3rem
 }
 .h6,h6 {
     font-size:.875rem

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

@@ -106,48 +106,54 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
           >
             <WorkspaceTemplate
               gsID="sUTLogo"
-              workspaceTitle="Gnosis Safe MultiSig"
+              workspaceTitle="MultiSig"
               description={
                 intl.formatMessage({ id: 'home.gnosisSafeMultisigTemplateDesc' })
               }
+              projectLogo="assets/img/gnosissafeLogo.png"
               callback={() => createWorkspace("gnosisSafeMultisig")}
             />
             <WorkspaceTemplate
               gsID="sUTLogo"
-              workspaceTitle="0xProject ERC20"
+              workspaceTitle="ERC20"
               description={
                 intl.formatMessage({ id: 'home.zeroxErc20TemplateDesc' })
               }
+              projectLogo="assets/img/oxprojectLogo.png"
               callback={() => createWorkspace("zeroxErc20")}
             />
             <WorkspaceTemplate
               gsID="sourcifyLogo"
-              workspaceTitle="OpenZeppelin ERC20"
+              workspaceTitle="ERC20"
               description={intl.formatMessage({id: 'home.ozerc20TemplateDesc'})}
+              projectLogo="assets/img/openzeppelinLogo.png"
               callback={() => createWorkspace('ozerc20')}
             />
             <WorkspaceTemplate
               gsID="sUTLogo"
-              workspaceTitle="OpenZeppelin ERC721"
+              workspaceTitle="ERC721"
               description={intl.formatMessage({
                 id: 'home.ozerc721TemplateDesc'
               })}
+              projectLogo="assets/img/openzeppelinLogo.png"
               callback={() => createWorkspace("ozerc721")}
             />
             <WorkspaceTemplate
               gsID="sUTLogo"
-              workspaceTitle="OpenZeppelin ERC1155"
+              workspaceTitle="ERC1155"
               description={intl.formatMessage({
                 id: 'home.ozerc1155TemplateDesc'
               })}
+              projectLogo="assets/img/openzeppelinLogo.png"
               callback={() => createWorkspace("ozerc1155")}
             />
             <WorkspaceTemplate
               gsID="solhintLogo"
-              workspaceTitle="Remix Basic"
+              workspaceTitle="Basic"
               description={intl.formatMessage({
                 id: 'home.remixDefaultTemplateDesc'
               })}
+              projectLogo="assets/img/remixverticaltextLogo.png"
               callback={() => createWorkspace("remixDefault")}
             />
           </Carousel>

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

@@ -1,23 +1,34 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, {useContext} from 'react'
+import {CustomTooltip} from '@remix-ui/helper'
+import {ThemeContext} from '../themeContext'
+
 interface WorkspaceTemplateProps {
   gsID: string
   workspaceTitle: string
+  projectLogo: string
   callback: any
   description: string
 }
 
-function WorkspaceTemplate({gsID, workspaceTitle, description, callback}: WorkspaceTemplateProps) {
+function WorkspaceTemplate({gsID, workspaceTitle, description, projectLogo, callback}: WorkspaceTemplateProps) {
+  const themeFilter = useContext(ThemeContext)
+
+  console.log("theme ", themeFilter)
   return (
     <div className="d-flex remixui_home_workspaceTemplate">
       <button
-        className="btn border-secondary p-1 d-flex flex-column  text-nowrap justify-content-center align-items-center mr-2 remixui_home_workspaceTemplate"
+        className="btn border-secondary p-1 d-flex flex-column  text-nowrap justify-content-center mr-2 remixui_home_workspaceTemplate"
         data-id={'landingPageStart' + gsID}
         onClick={() => callback()}
       >
-        <div className="mb-2 w-100 p-2 h-100 align-items-start d-flex flex-column">
+        <div className="w-100 p-1 h-100 align-items-center d-flex flex-column">
-          <label className="h6 pb-1 text-uppercase text-dark remixui_home_cursorStyle">{workspaceTitle}</label>
+          <CustomTooltip placement={'top'} tooltipClasses="text-wrap" tooltipId="etherscan-receipt-proxy-status" tooltipText={description}>
-          <div className="remixui_home_gtDescription">{description}</div>
+            <div className='d-flex flex-column align-items-center'>
+              <label className="h5 pb-1 mt-1 text-uppercase remixui_home_cursorStyle" style={{color: themeFilter.name == "dark" ? "var(--white)" : "var(--black)"}}>{workspaceTitle}</label>
+              <img className="" src={projectLogo} alt="" style={{height: "20px", width: "fit-content", filter: themeFilter.name == "dark" ? "invert(1)" : "invert(0)"}} />
+            </div>
+          </CustomTooltip>
         </div>
       </button>
     </div>

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

@@ -77,7 +77,7 @@
 }
 .remixui_home_cursorStyle {
   cursor: pointer;  
-  font-size: 0.8rem;
+  font-weight: 900;
 }
 .remixui_home_envButton {
   width: 220px;