init of getStarted section

apps/remix-ide/src/app/panels/file-panel.js

@@ -119,6 +119,7 @@ module.exports = class Filepanel extends ViewPlugin {
   }
 
   createWorkspace (workspaceName, workspaceTemplateName, isEmpty) {
+    console.log("in createWorkspace")
     return new Promise((resolve, reject) => {
       this.emit('createWorkspaceReducerEvent', workspaceName, workspaceTemplateName, isEmpty, (err, data) => {
         if (err) reject(err)

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -10,7 +10,7 @@ const profile = {
   methods: [],
   events: [],
   description: 'Remix home tab ',
-  icon: 'assets/img/remixLogo.webp',
+  icon: 'assets/img/home.webp',
   location: 'mainPanel',
   version: packageJson.version
 }

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

@@ -1,16 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
 import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
 
 function HomeTabFeatured() {
-  const [state, setState] = useState<{
-    themeQuality: { filter: string, name: string },
-  }>({
-    themeQuality: themes.light,
-  })
+  const themeFilter = useContext(ThemeContext)
 
   useEffect(() => {
     return () => {
@@ -26,11 +22,11 @@ function HomeTabFeatured() {
   }
 
   return (
-    <div className="pt-4 pl-2" id="hTFeaturedeSection">
+    <div className="pt-3 pl-2" id="hTFeaturedeSection">
       <label style={{ fontSize: "1.2rem" }}>Featured</label>
-      <div className="mb-4">
-        <div className="w-100 d-flex flex-column" style={{ height: "230px" }}>
-          <ThemeContext.Provider value={state.themeQuality}>
+      <div className="mb-2">
+        <div className="w-100 d-flex flex-column" style={{ height: "200px" }}>
+          <ThemeContext.Provider value={ themeFilter }>
             <Carousel
               customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
               arrows={false}
@@ -47,19 +43,19 @@ function HomeTabFeatured() {
               containerClass="border carousel-container"
               sliderClass="px-2 h-100 justify-content-between"
               deviceType={"desktop"}
-              itemClass="p-2 carousel-item-padding-10-px"
+              itemClass="px-2 carousel-item-padding-10-px"
               autoPlaySpeed={15000}
               dotListClass="position-relative mt-2"
             >
               <div className="d-flex">
-                <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "200px", maxWidth: "max-content"}} alt="" ></img>
+                <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "max-content"}} alt="" ></img>
                 <div className="h6 w-50 p-4" style={{ flex: "1"}}>
                   <h5>JUMP INTO WEB3</h5>
                   <span>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</span>
                 </div>
               </div>
               <div className="d-flex">
-                <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "200px", maxWidth: "max-content" }} alt="" ></img>
+                <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "max-content" }} alt="" ></img>
                 <div className="h6 p-4" style={{ flex: "1"}}>
                   <h5>REMIX REWARDS</h5>
                   <p style={{fontStyle: 'italic'}}>NFTs for our users!</p>
@@ -67,7 +63,7 @@ function HomeTabFeatured() {
                 </div>
               </div>
               <div className="d-flex">
-                <img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "200px", maxWidth: "max-content" }} alt="" ></img>
+                <img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "max-content" }} alt="" ></img>
                 <div className="h6 p-4" style={{ flex: "1"}}>
                   <h5>BETA TESTING</h5>
                   <p style={{fontStyle: 'italic'}}>Our community supports us.</p>

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
 import PluginButton from './pluginButton'
 import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
@@ -17,12 +17,8 @@ interface  HomeTabFeaturedPluginsProps {
 }
 
 function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
-  const [state, setState] = useState<{
-    themeQuality: { filter: string, name: string },
-  }>({
-    themeQuality: themes.light,
-  })
 
+  const themeFilter = useContext(ThemeContext)
   const carouselRef = useRef(null)
 
   // Todo doesn't work
@@ -37,7 +33,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
     console.log("e = ", e)   
   }
 
-
   const startSolidity = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
     plugin.verticalIcons.select('solidity')
@@ -71,9 +66,9 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   
     return (
     <div className="pl-2 w-100" id="hTFeaturedPlugins">
-      <label className="pl-2" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
+      <label className="" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
       <div className="w-100 d-flex flex-column">
-        <ThemeContext.Provider value={ state.themeQuality }>
+        <ThemeContext.Provider value={ themeFilter }>
           <Carousel 
             ref={carouselRef}
             focusOnSelect

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

@@ -145,7 +145,7 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
           plugin.verticalIcons.select('filePanel')
           uploadFile(event.target)
         }} multiple />
-        <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}>Connect for Localhost</button>
+        <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}>Connect to Localhost</button>
         <label className="pt-2">Load From</label>
         <div className="d-flex">
           <button className="btn p-2 border mr-2" data-id="landingPageImportFromGitHubButton" onClick={() => showFullMessage('GitHub', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>

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

@@ -1,18 +1,62 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
+import { ThemeContext, themes } from '../themeContext'
+import Carousel from 'react-multi-carousel'
+import WorkspaceTemplate from './workspaceTemplate'
+import 'react-multi-carousel/lib/styles.css'
+import CustomNavButtons from './customNavButtons'
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = window._paq = window._paq || [] //eslint-disable-line
+
+interface  HomeTabGetStartedProps {
+  plugin: any
+}
+
+function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
+  const themeFilter = useContext(ThemeContext)
+
+  const createWorkspace = async (templateName) => {
+    await plugin.appManager.activatePlugin('filePanel')
     
-function HomeTabGetStarted () {
-  const [state, setState] = useState<{
-    searchInput: string
-  }>({
-    searchInput: ''
-  })
+    await plugin.call('filePanel', 'createWorkspace', templateName + "_workspace", templateName)
+    console.log("templateName ", templateName)
+    plugin.verticalIcons.select('filePanel')
+    _paq.push(['trackEvent', 'homeGetStarted', templateName])
+  }
 
   return (
-    <div className="pl-2 pb-2" id="hTGetStartedSection">
-      <label style={{fontSize: "1.2rem"}}>Get Started<span className="ml-2">- Project Templatea</span></label>
-      <div className="border"></div>
-    </div>
+    <div className="pl-2" id="hTGetStartedSection">
+      <label style={{fontSize: "1.2rem"}}>Get Started<span className="ml-2" style={{ opacity: "0.7"}}>- Project Templates</span></label>
+      <div className="w-100 d-flex flex-column">
+        <ThemeContext.Provider value={ themeFilter }>
+          <Carousel 
+            focusOnSelect
+            customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+            arrows={false}
+            swipeable={false}
+            draggable={true}
+            showDots={false}
+            responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }}
+            renderButtonGroupOutside={true}
+            ssr={true} // means to render carousel on server-side.
+            keyBoardControl={true}
+            containerClass="carousel-container"
+            deviceType={"desktop"}
+            itemClass="w-100"
+          >
+            <WorkspaceTemplate gsID="starkNetLogo" workspaceTitle="Blank" description="Create an empty workspace." callback={() => createWorkspace("blank")} />
+            <WorkspaceTemplate gsID="solhintLogo" workspaceTitle="Remix Default" description="Create a workspace with sample files." callback={() => createWorkspace("remixDefault")} />
+            <WorkspaceTemplate gsID="sourcifyLogo" workspaceTitle="OpenZeppelin ERC20" description="Create an ERC20 token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc20")} />
+            <WorkspaceTemplate gsID="sUTLogo" workspaceTitle="OpenZeppelin ERC721" description="Create an NFT token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc721")} />
+            <WorkspaceTemplate gsID="sUTLogo" workspaceTitle="0xProject ERC20" description="Create an ERC20 token by importing 0xProject contract." callback={() => createWorkspace("zeroxErc20")} />
+            <WorkspaceTemplate gsID="solidityLogo" workspaceTitle="Add a workspace" description="Create and configure a workspace manually." callback={() => createWorkspace("")} />
+          </Carousel>
+        </ThemeContext.Provider>
+      </div>    </div>
   )
 }
 

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

@@ -1,19 +1,24 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo'
+import { ThemeContext } from '../themeContext'
+import React, { useEffect, useState, useRef, useContext } from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line
 
-function HomeTabTitle () {
-  const [state, setState] = useState<{
-    searchInput: string
-  }>({
-    searchInput: ''
-  })
+function HomeTabTitle() {
   useEffect(() => {
     document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
     return () => {
       document.removeEventListener("keyup", handleSearchKeyDown)
     }
   }, [])
+  const [state, setState] = useState<{
+    searchDisable: boolean
+  }>({
+    searchDisable: true
+  })
 
+  const themeFilter = useContext(ThemeContext)
   const searchInputRef = useRef(null)
   const remiAudioEl = useRef(null)
 
@@ -24,16 +29,18 @@ function HomeTabTitle () {
     if (e.target !== searchInputRef.current) return
     if (e.key === "Enter") {
       openLink()
+      searchInputRef.current.value = ""
+    } else {
+      console.log("handleSearchKeyDown")
       setState(prevState => {
-        return { ...prevState, searchInput: '' }
+        return { ...prevState, searchDisable: searchInputRef.current.value === "" }
       })
-      searchInputRef.current.value = ""
     }
   }
 
   const openLink = (url = "") => {
     if (url === "") {
-      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank')
+      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + searchInputRef.current.value + "&check_keywords=yes&area=default", '_blank')
     } else {
       window.open(url, '_blank')
     }
@@ -42,7 +49,9 @@ function HomeTabTitle () {
   return (
     <div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection">
       <div className="mr-4 d-flex">
-        <img className="align-self-end remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
+        <div onClick={() => playRemi()} style={{ filter: themeFilter.filter}} >
+          <BasicLogo classList="align-self-end remixui_home_logoImg" solid={false} />
+        </div>
         <audio
           id="remiAudio"
           muted={false}
@@ -51,37 +60,74 @@ function HomeTabTitle () {
         ></audio>
       </div>
       <div className="d-flex justify-content-between">
-        <span className="h-80" style={ { fontSize: 'x-large', fontFamily: "Noah" } }>Remix</span>
+        <span className="h-80" style={{ fontSize: 'xx-large', fontFamily: "Noah" }}>Remix</span>
         <span>
-          <button
-            onClick={ ()=> openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
-            className="h-100 btn fab fa-youtube">
-          </button>
-          <button
-            onClick={ ()=> openLink("https://twitter.com/EthereumRemix")}
-            className="h-100 pl-2 btn fab fa-twitter">
-          </button>
-          <button
-            onClick={ ()=> openLink(" https://www.linkedin.com/company/ethereum-remix/")}
-            className="h-100 pl-2 btn fab fa-linkedin-in">
-          </button>
+          <OverlayTrigger placement={'top'} overlay={
+            <Tooltip className="text-nowrap" id="overlay-tooltip">
+              <span className="border bg-light text-dark p-1 pr-3">Remix Youtube Playlist</span>
+            </Tooltip>
+          }>
+            <button
+              onClick={() => openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
+              className="h-100 btn fab fa-youtube">
+            </button>
+          </OverlayTrigger>
+
+          <OverlayTrigger placement={'top'} overlay={
+            <Tooltip className="text-nowrap" id="overlay-tooltip">
+              <span className="border bg-light text-dark p-1 pr-3">Remix Twitter Profile</span>
+            </Tooltip>
+          }>
+            <button
+              onClick={() => openLink("https://twitter.com/EthereumRemix")}
+              className="h-100 pl-2 btn fab fa-twitter">
+            </button>
+          </OverlayTrigger>
+
+          <OverlayTrigger placement={'top'} overlay={
+            <Tooltip className="text-nowrap" id="overlay-tooltip">
+              <span className="border bg-light text-dark p-1 pr-3">Remix Linkedin Profile</span>
+            </Tooltip>
+          }>
+            <button
+              onClick={() => openLink("https://www.linkedin.com/company/ethereum-remix/")}
+              className="h-100 pl-2 btn fa fa-linkedin">
+            </button>
+          </OverlayTrigger>
+
+          <OverlayTrigger placement={'top'} overlay={
+            <Tooltip className="text-nowrap" id="overlay-tooltip">
+              <span className="border bg-light text-dark p-1 pr-3">Remix Medium Posts</span>
+            </Tooltip>
+          }>
+            <button
+              onClick={() => openLink("https://medium.com/remix-ide")}
+              className="h-100 pl-2 btn fab fa-medium">
+            </button>
+          </OverlayTrigger>
+
+          <OverlayTrigger placement={'top'} overlay={
+            <Tooltip className="text-nowrap" id="overlay-tooltip">
+              <span className="border bg-light text-dark p-1 pr-3">Remix Gitter channel</span>
+            </Tooltip>
+          }>
+            <button
+              onClick={() => openLink("https://gitter.im/ethereum/remix")}
+              className="h-100 pl-2 btn fab fa-gitter">
+            </button>
+          </OverlayTrigger>
         </span>
       </div>
-      <b className="pb-1 text-dark" style={{fontStyle: 'italic'}}>The Native IDE for Solidity Development.</b>
+      <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>
       <div className="pb-1" id="hTGeneralLinks">
-        <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Learn more</a>
+        <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Project Website</a>
         <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">more</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">more</a>
+        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugins</a>
+        <a className="pl-2 remixui_home_text" target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
       </div>
       <div className="d-flex pb-1 align-items-center">
         <input
           ref={searchInputRef}
-          onChange={(event) => {
-            setState(prevState => {
-              return { ...prevState, searchInput: event.target.value.trim() }
-            })
-          }}
           type="text"
           className="border form-control border-right-0"
           id="searchInput"
@@ -90,9 +136,9 @@ function HomeTabTitle () {
         />
         <button
           className="form-control border d-flex align-items-center p-2 justify-content-center fas fa-search bg-light"
-          onClick={ (e) => openLink() }
-          disabled={state.searchInput === ""}
-          style={{width: "3rem"}}
+          onClick={(e) => openLink()}
+          disabled={state.searchDisable}
+          style={{ width: "3rem" }}
         >
         </button>
       </div>

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

@@ -15,6 +15,7 @@ interface PluginButtonProps {
 function PluginButton ({ imgPath, envID, envText, callback, l2, description, remixMaintained }: PluginButtonProps) {
   const themeFilter = useContext(ThemeContext)
 
+  console.log("themeFilter ", themeFilter)
   return (
     <div className="d-flex remixui_home_envButton">
       <button

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

@@ -58,27 +58,37 @@
 .remixui_home_importFrom p {
   margin-right: 10px;
 }
-.remixui_home_logoContainer img{
+.remixui_home_logoContainer img {
   height: 150px;
   opacity: 0.7;
 }
 .remixui_home_envLogo {
   height: 2.5rem;
 }
-.remixui_home_envLogoDescription{
+.remixui_home_envLogoDescription {
   white-space: pre-wrap;
   font-size: x-small;
   line-height: 0.8rem;
   text-align: left;
 }
+.remixui_home_gtDescription {
+  white-space: pre-wrap;
+  font-size: small;
+  line-height: 0.8rem;
+  text-align: left;
+}
 .remixui_home_cursorStyle {
   cursor: pointer;
   font-size: 0.7rem;
 }
 .remixui_home_envButton {
+  width: 220px;
+  cursor: pointer;
+  height: 80px;
+}
+.remixui_home_workspaceTemplate {
   width: 220px;
   height: 80px;
-
 }
 .remixui_home_media {
   overflow: hidden;

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

@@ -40,6 +40,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   useEffect(() => {
     plugin.call('theme', 'currentTheme').then((theme) => {
       // update theme quality. To be used for for images
+      console.log("currentTheme on ", theme.quality )
       setState(prevState => {
         return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
       })
@@ -76,19 +77,19 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   
   return (
     <div className="d-flex flex-row w-100" id="remixUIHTAll">
-      <div className="px-2 pl-3 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "35%"}}>
-        <HomeTabTitle />
-        <HomeTabFile plugin={plugin} />
-        <ThemeContext.Provider value={ state.themeQuality }>
-          <HomeTabLearn plugin={plugin}/>
-        </ThemeContext.Provider>
-      </div>
-      <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
-        <HomeTabFeatured></HomeTabFeatured>
-        <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
-        <HomeTabGetStarted></HomeTabGetStarted>
-        <HomeTabScamAlert></HomeTabScamAlert>
-      </div>
+      <ThemeContext.Provider value={ state.themeQuality }>
+        <div className="px-2 pl-3 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "35%"}}>
+          <HomeTabTitle />
+          <HomeTabFile plugin={plugin} />
+          <HomeTabLearn plugin={plugin} />
+        </div>
+        <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
+          <HomeTabFeatured></HomeTabFeatured>
+          <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
+          <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
+          <HomeTabScamAlert></HomeTabScamAlert>
+        </div>
+      </ThemeContext.Provider>
     </div>
   )
 }

libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx

@@ -1,12 +1,20 @@
 import React from 'react'
+interface  BasicLogoProps {
+  classList?: string,
+  solid?: boolean
+}
 
-function BasicLogo () {
-  return (<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
-    <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
-    <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
-    <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
-  </svg>
-  )
+function BasicLogo ({classList = "", solid = true}: BasicLogoProps) {
+  if (solid) {
+    return (<svg id="Ebene_2" className={classList} data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+      <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
+      <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
+      <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
+    </svg>
+    )
+  } else {
+    return (<img className="" src="assets/img/remix_logo_light.webp" style={{height: "3rem"}} alt=""></img>)
+  }
 }
 
 export default BasicLogo

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -31,8 +31,6 @@ const RemixUiVerticalIconsPanel = ({
   const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
   const [theme, setTheme] = useState<string>('dark')
 
-
-
   const evaluateScrollability = () => {
     dispatchScrollAction({
       type: 'resize',