init of getStarted section

builtincomp
lianahus 2 years ago committed by Aniket
parent 0c9a66fdae
commit 4cec832e65
  1. 1
      apps/remix-ide/src/app/panels/file-panel.js
  2. 2
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  3. 24
      libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
  4. 13
      libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
  5. 2
      libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
  6. 66
      libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
  7. 118
      libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
  8. 1
      libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
  9. 16
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
  10. 27
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
  11. 24
      libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
  12. 2
      libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@ -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)

@ -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
}

@ -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>

@ -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

@ -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>

@ -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)
function HomeTabGetStarted () {
const [state, setState] = useState<{
searchInput: string
}>({
searchInput: ''
})
const createWorkspace = async (templateName) => {
await plugin.appManager.activatePlugin('filePanel')
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>
)
}

@ -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>

@ -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

@ -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;

@ -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>
)
}

@ -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
export default BasicLogo

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

Loading…
Cancel
Save