fix: translation support for new breadrcrumbs

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) => {

src/components/Elements/MainModal/backend/TabNavbar.jsx

@@ -144,11 +144,11 @@ const TabNavbar = ({ modalClose }) => {
       <div className="flex flex-row gap-5 items-center">
         {navbarLogo}
         <div className="flex flex-row items-center gap-2">
-          <span className="text-xl capitalize tracking-normal">{activeTab}</span>
+          <span className="text-xl capitalize tracking-normal">{variables.getMessage(`modals.main.navbar.${activeTab}`)}</span>
           {subTab !== '' && (
             <>
               <MdOutlineKeyboardArrowRight />
-              <span onClick={() => 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}</span>
+              <span onClick={() => 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}</span>
             </>
           )}
           {subSection !== '' && (

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(
+    () => (
+      <div
+        className="reminder-info"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
+        <div className="shareHeader">
+          <span className="title">
+            {variables.getMessage('modals.main.settings.reminder.title')}
+          </span>
+          <span className="closeModal" onClick={hideReminder}>
+            <MdClose />
+          </span>
+        </div>
+        <span className="subtitle">
+          {variables.getMessage('modals.main.settings.reminder.message')}
+        </span>
+        <button onClick={() => window.location.reload()}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.error_boundary.refresh')}
+        </button>
+      </div>
+    ),
+    [],
+  );
 
   return (
     <div className="modalSidebar">
       {sections.map((section, index) => (
         <Tab
           key={index}
-          currentTab={currentTab}
+          currentTab={subTab}
           label={variables.getMessage(section.label)}
           onClick={handleClick(section.label)}
           navbarTab={section.navbar || false}
         />
       ))}
+      {reminderInfo}
     </div>
   );
 });
@@ -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 (
     <div className="flex flex-row w-full">
-      <Sidebar sections={sections} currentTab={currentTab} setCurrentTab={setCurrentTab} />
-      <Content sections={sections} currentTab={currentTab} />
+      <Sidebar sections={sections} currentTab={subTab} />
+      <Content sections={sections} currentTab={subTab} />
     </div>
   );
 };

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