refactor: begin converting modal from sass to tailwind

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

@@ -14,7 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
     [setSubTab, setSubSection],
   );
 
-
   const hideReminder = () => {
     localStorage.setItem('showReminder', false);
     document.querySelector('.reminder-info').style.display = 'none';
@@ -27,16 +26,12 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
         style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
       >
         <div className="shareHeader">
-          <span className="title">
-            {variables.getMessage('settings:reminder.title')}
-          </span>
+          <span className="title">{variables.getMessage('settings:reminder.title')}</span>
           <span className="closeModal" onClick={hideReminder}>
             <MdClose />
           </span>
         </div>
-        <span className="subtitle">
-          {variables.getMessage('settings:reminder.message')}
-        </span>
+        <span className="subtitle">{variables.getMessage('settings:reminder.message')}</span>
         <button onClick={() => window.location.reload()}>
           <MdRefresh />
           {variables.getMessage('modals.main.error_boundary.refresh')}
@@ -84,7 +79,7 @@ const Tabs = ({ sections }) => {
   const { subTab, setSubTab, setSubSection } = useTab();
 
   return (
-    <div className="flex flex-row w-full">
+    <div className="flex flex-row w-full gap-2">
       <Sidebar sections={sections} currentTab={subTab} />
       <Content sections={sections} currentTab={subTab} />
     </div>

src/components/Elements/MainModal/scss/index.scss

@@ -7,40 +7,6 @@
 @import 'settings/main';
 @import 'marketplace/main';
 
-.Overlay {
-  position: fixed;
-  z-index: 100;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  place-items: center;
-}
-
-.Modal {
-  @include themed {
-    color: t($color);
-  }
-
-  box-shadow: 0 0 20px rgb(0 0 0 / 30%);
-  opacity: 1;
-  z-index: -2;
-  transition-timing-function: ease-in;
-  border-radius: map-get($modal, 'border-radius');
-  user-select: none;
-  overflow-y: auto;
-  transform: scale(0);
-  transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  &:focus {
-    outline: 0;
-  }
-
-  .modalInfoPage {
-    user-select: text;
-  }
-}
-
 .closePositioning {
   position: absolute;
   top: 3rem;
@@ -84,19 +50,6 @@
   transform: scale(0);
 }
 
-#modal {
-  height: 80vh;
-  width: clamp(60vw, 1400px, 90vw);
-  background: rgba(14, 16, 19, .85);
-  backdrop-filter: blur(60px);
-  border: 3px solid rgba(14, 16, 19, .3);
-
-  /*@include themed {
-    background-color: t($modal-sidebar);
-  }*/
-}
-
-
 /* fixes for font size on extension */
 label,
 p,

src/features/misc/modals/Modals.jsx

@@ -32,7 +32,6 @@ function Modals() {
     localStorage.setItem('showReminder', false);
   }, []);
 
-
   const toggleModal = (type, action) => {
     switch (type) {
       case 'main':
@@ -48,21 +47,17 @@ function Modals() {
     if (action !== false) {
       variables.stats.postEvent('modal', `Opened ${type.replace('Modal', '')}`);
     }
-  }
-  
+  };
 
   return (
     <>
-      {welcome === false && (
-        <Navbar openModal={(modal) => toggleModal('main', true)} />
-      )}
+      {welcome === false && <Navbar openModal={(modal) => toggleModal('main', true)} />}
       <Modal
         closeTimeoutMS={300}
-        id="modal"
         onRequestClose={() => toggleModal('main', false)}
         isOpen={main}
-        className="Modal mainModal"
-        overlayClassName="Overlay"
+        className="h-[80vh] w-modal border-3 border-modal ease-in-out duration-800 transition-all backdrop-blur-3xl bg-modal-light dark:bg-modal-dark text-black dark:text-white overflow-y-auto shadow-xl rounded"
+        overlayClassName="grid place-content-center absolute top-0 left-0 h-screen w-screen"
         ariaHideApp={false}
       >
         <MainModal modalClose={() => toggleModal('main', false)} />
@@ -71,4 +66,4 @@ function Modals() {
   );
 }
 
-export default Modals;
+export default Modals;

src/scss/index.scss

@@ -85,7 +85,6 @@ body {
   height: 100%;
 }
 
-
 /* error */
 .criticalError {
   display: grid;
@@ -209,3 +208,7 @@ body {
     }
   }
 }
+
+.modal-clamp-width {
+  width: clamp(60vw, 1400px, 90vw);
+}

tailwind.config.js

@@ -1,10 +1,31 @@
+const { light } = require('@mui/material/styles/createPalette');
 const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {
+      colors: {
+        modal: {
+          light: 'rgba(255, 255, 255, .85)',
+          dark: 'rgba(14, 16, 19, .85)',
+        },
+        background: {
+          light: 'rgba(255, 255, 255, 0.7)',
+          dark: 'rgba(0, 0, 0, 0.7)',
+        },
+      },
+      width: {
+        modal: 'clamp(60vw, 1400px, 90vw)',
+      },
+      borderRadius: {
+        DEFAULT: '12px',
+      },
+      borderColor: {
+        modal: 'rgba(14, 16, 19, 0.3)', // Define your custom border color
+      },
       textShadow: {
         sm: '0 1px 4px var(--tw-shadow-color)',
         DEFAULT: '0 2px 8px var(--tw-shadow-color)',