chore: cleanup modal variable names

src/features/modals/main/Main.jsx

@@ -10,10 +10,10 @@ const Marketplace = lazy(() => import('./tabs/Marketplace'));
 
 const renderLoader = () => (
   <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-    <ul className="sidebar">
+    <div className="modalSidebar">
       <span className="mainTitle">Mue</span>
-    </ul>
-    <div className="tab-content">
+    </div>
+    <div className="modalTabContent">
       <div className="emptyItems">
         <div className="emptyMessage">
           <div className="loaderHolder">

src/features/modals/main/scss/index.scss

@@ -1,7 +1,7 @@
 @import 'scss/variables';
 @import 'modules/sidebar';
 @import 'modules/navbar';
-@import 'modules/tab-content';
+@import 'modules/modalTabContent';
 @import 'modules/links';
 @import 'modules/scrollbars';
 @import 'settings/main';

src/features/modals/main/scss/modules/_modalTabContent.scss

@@ -1,6 +1,6 @@
 @import 'scss/variables';
 
-.tab-content {
+.modalTabContent {
   width: 100% !important;
 
   /* button {

src/features/modals/main/scss/modules/_sidebar.scss

@@ -1,6 +1,6 @@
 @import 'scss/variables';
 
-.sidebar {
+.modalSidebar {
   @include themed {
     top: 0;
     left: 0;

src/features/modals/main/settings/sections/Message.jsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { TextareaAutosize } from '@mui/material';
 
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Button } from 'components/Elements';
 import EventBus from 'utils/eventbus';
 
 export default class Message extends PureComponent {
@@ -72,9 +73,12 @@ export default class Message extends PureComponent {
           <Row final={true}>
             <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
             <Action>
-              <button onClick={() => this.modifyMessage('add')}>
-                {variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
-              </button>
+              <Button
+                type="settings"
+                onClick={() => this.modifyMessage('add')}
+                icon={<MdAdd />}
+                label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+              />
             </Action>
           </Row>
           <div className="messagesContainer">
@@ -123,10 +127,12 @@ export default class Message extends PureComponent {
                 <span className="subtitle">
                   {variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
                 </span>
-                <button onClick={() => this.modifyMessage('add')}>
-                  {variables.getMessage(`${MESSAGE_SECTION}.add`)}
-                  <MdAdd />
-                </button>
+                <Button
+                  type="settings"
+                  onClick={() => this.modifyMessage('add')}
+                  icon={<MdAdd />}
+                  label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+                />
               </div>
             </div>
           )}

src/features/modals/main/tabs/backend/Tabs.jsx

@@ -78,7 +78,7 @@ class Tabs extends PureComponent {
 
     return (
       <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-        <ul className="sidebar">
+        <div className="modalSidebar">
           {this.props.children.map((tab, index) => (
             <Tab
               currentTab={this.state.currentTab}
@@ -89,8 +89,8 @@ class Tabs extends PureComponent {
             />
           ))}
           {reminderInfo}
-        </ul>
-        <div className="tab-content">
+        </div>
+        <div className="modalTabContent">
           <div className="modalNavbar">
             {navbarButtons.map(({ tab, icon }) => (
               <Button

src/features/modals/welcome/Welcome.jsx

@@ -1,3 +1,4 @@
+// Importing necessary libraries and components
 import { useState, useEffect } from 'react';
 import variables from 'config/variables';
 import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
@@ -20,12 +21,16 @@ import {
   Final,
 } from './Sections';
 
+// WelcomeModal component
 function WelcomeModal({ modalClose, modalSkip }) {
+  // State variables
   const [currentTab, setCurrentTab] = useState(0);
   const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
   const finalTab = 6;
 
+  // useEffect hook to handle tab changes and event bus listener
   useEffect(() => {
+    // Get the current welcome tab from local storage
     const welcomeTab = localStorage.getItem('welcomeTab');
     if (welcomeTab) {
       const tab = Number(welcomeTab);
@@ -37,6 +42,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
       );
     }
 
+    // Listener for the 'refresh' event
     const refreshListener = (data) => {
       if (data === 'welcomeLanguage') {
         localStorage.setItem('welcomeTab', currentTab);
@@ -45,13 +51,16 @@ function WelcomeModal({ modalClose, modalSkip }) {
       }
     };
 
+    // Subscribe to the 'refresh' event
     EventBus.on('refresh', refreshListener);
 
+    // Cleanup function to unsubscribe from the 'refresh' event
     return () => {
       EventBus.off('refresh', refreshListener);
     };
   }, [currentTab, finalTab]);
 
+  // Function to update the current tab and button text
   const updateTabAndButtonText = (newTab) => {
     setCurrentTab(newTab);
     setButtonText(
@@ -64,6 +73,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
     localStorage.removeItem('welcomeTab');
   };
 
+  // Functions to navigate to the previous and next tabs
   const prevTab = () => {
     updateTabAndButtonText(currentTab - 1);
   };
@@ -76,10 +86,12 @@ function WelcomeModal({ modalClose, modalSkip }) {
     updateTabAndButtonText(currentTab + 1);
   };
 
+  // Function to switch to a specific tab
   const switchToTab = (tab) => {
     updateTabAndButtonText(tab);
   };
 
+  // Navigation component
   const Navigation = () => {
     return (
       <div className="welcomeButtons">
@@ -109,6 +121,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
     );
   };
 
+  // Mapping of tab numbers to components
   const tabComponents = {
     0: <Intro />,
     1: <ChooseLanguage />,
@@ -119,8 +132,10 @@ function WelcomeModal({ modalClose, modalSkip }) {
     6: <Final currentTab={currentTab} switchTab={switchToTab} />,
   };
 
+  // Current tab component
   let CurrentTab = tabComponents[currentTab] || <Intro />;
 
+  // Render the WelcomeModal component
   return (
     <Wrapper>
       <Panel type="aside">
@@ -140,4 +155,5 @@ function WelcomeModal({ modalClose, modalSkip }) {
   );
 }
 
+// Export the WelcomeModal component
 export default WelcomeModal;