diff --git a/src/components/Elements/MainModal/backend/TabContext.jsx b/src/components/Elements/MainModal/backend/TabContext.jsx index 76193903..f18193c0 100644 --- a/src/components/Elements/MainModal/backend/TabContext.jsx +++ b/src/components/Elements/MainModal/backend/TabContext.jsx @@ -1,4 +1,5 @@ import { createContext, useContext, useState } from 'react'; +import variables from 'config/variables'; const TabContext = createContext(); @@ -8,7 +9,7 @@ export const useTab = () => { export const TabProvider = ({ children }) => { const [activeTab, setActiveTab] = useState('settings'); - const [subTab, setSubTab] = useState('Overview'); + const [subTab, setSubTab] = useState(variables.getMessage('modals.main.marketplace.product.overview')); const [subSection, setSubSection] = useState(''); const [direction, setDirection] = useState(1); @@ -24,7 +25,11 @@ export const TabProvider = ({ children }) => { setDirection(newIndex > currentIndex ? 1 : -1); setActiveTab(type); - setSubTab(''); + if(type === 'settings') { + setSubTab(variables.getMessage('modals.main.marketplace.product.overview')); + } else { + setSubTab(''); + } }; const setSection = (type) => { diff --git a/src/components/Elements/MainModal/backend/TabNavbar.jsx b/src/components/Elements/MainModal/backend/TabNavbar.jsx index 5cb54216..16df0b7e 100644 --- a/src/components/Elements/MainModal/backend/TabNavbar.jsx +++ b/src/components/Elements/MainModal/backend/TabNavbar.jsx @@ -144,11 +144,11 @@ const TabNavbar = ({ modalClose }) => {
{navbarLogo}
- {activeTab} + {variables.getMessage(`modals.main.navbar.${activeTab}`)} {subTab !== '' && ( <> - setSubSection('')} className={clsx("text-xl capitalize tracking-normal transition-all duration-300 ease-in-out", { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' })}>{subTab} + setSubSection('')} className={clsx("text-xl capitalize tracking-normal transition-all duration-150 ease-in-out", { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' })}>{subTab} )} {subSection !== '' && ( diff --git a/src/components/Elements/MainModal/backend/newTabs.jsx b/src/components/Elements/MainModal/backend/newTabs.jsx index 4efde949..4612bcaa 100644 --- a/src/components/Elements/MainModal/backend/newTabs.jsx +++ b/src/components/Elements/MainModal/backend/newTabs.jsx @@ -1,31 +1,63 @@ -import { useState, useCallback, memo } from 'react'; +import { useState, useCallback, memo, useMemo } from 'react'; import variables from 'config/variables'; import Tab from './Tab'; import { useTab } from './TabContext'; +import { MdRefresh, MdClose } from 'react-icons/md'; const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => { const { subTab, setSubTab, setSubSection } = useTab(); const handleClick = useCallback( (label) => () => { - setCurrentTab(variables.getMessage(label)); setSubTab(variables.getMessage(label)); setSubSection(''); }, - [setCurrentTab, setSubTab, setSubSection], + [setSubTab, setSubSection], ); + + const hideReminder = () => { + localStorage.setItem('showReminder', false); + document.querySelector('.reminder-info').style.display = 'none'; + }; + + const reminderInfo = useMemo( + () => ( +
+
+ + {variables.getMessage('modals.main.settings.reminder.title')} + + + + +
+ + {variables.getMessage('modals.main.settings.reminder.message')} + + +
+ ), + [], + ); return (
{sections.map((section, index) => ( ))} + {reminderInfo}
); }); @@ -49,12 +81,12 @@ const Content = memo(({ sections, currentTab }) => ( )); const Tabs = ({ sections }) => { - const [currentTab, setCurrentTab] = useState(variables.getMessage(sections[0].label)); + const { subTab, setSubTab, setSubSection } = useTab(); return (
- - + +
); }; diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index 66af66b1..72c65913 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -89,7 +89,7 @@ width: clamp(60vw, 1400px, 90vw); background: rgba(14, 16, 19, .85); backdrop-filter: blur(60px); - border: 3px solid rgba(14, 16, 19, .1); + border: 3px solid rgba(14, 16, 19, .3); /*@include themed { background-color: t($modal-sidebar);