refactor: more converting modal to tailwind

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

@@ -37,16 +37,12 @@ const Tabs = (props) => {
         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')}
@@ -72,7 +68,7 @@ const Tabs = (props) => {
           {reminderInfo}
         </div>
       )}
-      <div className="modalTabContent">
+      <div className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col">
         {props.children.map((tab, index) => {
           if (tab.props.label !== currentTab) {
             return null;

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

@@ -63,7 +63,7 @@ const Content = memo(({ sections, currentTab }) => (
       ({ label, name, component: Component }) =>
         variables.getMessage(label) === currentTab && (
           <div
-            className="modalTabContent"
+            className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col"
             key={name}
             label={variables.getMessage(label)}
             name={name}

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -1,67 +1,43 @@
 @import 'scss/variables';
 
-.modalTabContent {
-  width: 100% !important;
-  border-radius: 15px;
-  min-height: 69vh;
-  /* button {
-    @include modal-button(standard);
-  } */
+.settingsRow {
+  display: flex;
+  align-items: center;
+  min-height: 100px;
+  justify-content: space-between;
+  transition: 0.4s ease-in-out;
+  @extend %tabText;
 
-  @include themed {
-    padding: 1rem 3rem 3rem;
+  /* border-top: 1px solid #ccc; */
+  border-bottom: 1px solid #676767;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  &.settingsNoBorder {
+    border-bottom: none;
+  }
+
+  .content {
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    background: t($modal-sidebar);
+    flex-flow: column;
+    max-width: 50%;
+  }
 
-    @extend %tabText;
+  .action {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    width: 300px;
 
-    hr {
-      width: 100%;
-      background: rgb(196 196 196 / 74%);
-      outline: none;
+    button {
+      margin-top: 10px;
     }
 
-    .settingsRow {
+    .link {
       display: flex;
+      flex-flow: row;
+      gap: 15px;
       align-items: center;
-      min-height: 100px;
-      justify-content: space-between;
-      transition: 0.4s ease-in-out;
-
-      /* border-top: 1px solid #ccc; */
-      border-bottom: 1px solid #676767;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-
-      &.settingsNoBorder {
-        border-bottom: none;
-      }
-
-      .content {
-        display: flex;
-        flex-flow: column;
-        max-width: 50%;
-      }
-
-      .action {
-        display: flex;
-        flex-flow: column;
-        align-items: flex-end;
-        width: 300px;
-
-        button {
-          margin-top: 10px;
-        }
-
-        .link {
-          display: flex;
-          flex-flow: row;
-          gap: 15px;
-          align-items: center;
-        }
-      }
     }
   }
 }

src/features/marketplace/views/ItemPage.jsx

@@ -21,8 +21,7 @@ import { Carousel } from '../components/Elements/Carousel';
 const ItemPage = () => {
   const [count, setCount] = useState(5);
   const [shareModal, setShareModal] = useState(false);
-  const { installedItems, selectedItem, installItem, uninstallItem } =
-    useMarketData();
+  const { installedItems, selectedItem, installItem, uninstallItem } = useMarketData();
 
   const [isInstalled, setIsInstalled] = useState(false);
 
@@ -376,35 +375,33 @@ const ItemPage = () => {
       <div className="itemPage flex flex-row gap-8 2xl:gap-16 justify-between">
         <div class="flex flex-col-reverse xl:flex-row gap-8 2xl:gap-16">
           <ItemDetails />
-            <div className="itemShowcase">
-              <div className="subHeader">
-                {itemWarning()}
-              </div>
-              {selectedItem.photos && (
-                <div className="carousel">
-                  <div className="carousel_container">
-                    <Carousel data={selectedItem.photos} />
-                  </div>
+          <div className="itemShowcase">
+            <div className="subHeader">{itemWarning()}</div>
+            {selectedItem.photos && (
+              <div className="carousel">
+                <div className="carousel_container">
+                  <Carousel data={selectedItem.photos} />
                 </div>
-              )}
-              {selectedItem.settings && selectedItem.screenshot_url !== null && (
-                <img
-                  alt="product"
-                  draggable={false}
-                  src={selectedItem.screenshot_url}
-                  onError={(e) => {
-                    e.target.onerror = null;
-                    e.target.src = '/icons/marketplace-placeholder.png';
-                  }}
-                />
-              )}
-              <div className="marketplaceDescription">
-                <span className="title">
-                  {variables.getMessage('marketplace:product.description')}
-                </span>
-                <Markdown>{selectedItem.description}</Markdown>
               </div>
-              <ItemShowcase />
+            )}
+            {selectedItem.settings && selectedItem.screenshot_url !== null && (
+              <img
+                alt="product"
+                draggable={false}
+                src={selectedItem.screenshot_url}
+                onError={(e) => {
+                  e.target.onerror = null;
+                  e.target.src = '/icons/marketplace-placeholder.png';
+                }}
+              />
+            )}
+            <div className="marketplaceDescription">
+              <span className="title">
+                {variables.getMessage('marketplace:product.description')}
+              </span>
+              <Markdown>{selectedItem.description}</Markdown>
+            </div>
+            <ItemShowcase />
           </div>
         </div>
 

src/features/marketplace/views/oldItemPage.jsx

@@ -28,10 +28,11 @@ import Markdown from 'markdown-to-jsx';
 class ItemPage extends PureComponent {
   constructor(props) {
     super(props);
-    console.log(this.props)
+    console.log(this.props);
     this.state = {
       showUpdateButton:
-        this.props.data.local.installed === true && this.props.data.local.version !== this.props.data.version,
+        this.props.data.local.installed === true &&
+        this.props.data.local.version !== this.props.data.version,
       shareModal: false,
       count: 5,
       moreByCurator: [],
@@ -74,11 +75,11 @@ class ItemPage extends PureComponent {
     document.querySelector('#modal').scrollTop = 0;
     this.setState({
       button: this.props.data.local.installed ? this.buttons.uninstall : this.buttons.install,
-    })
+    });
   }
 
   updateAddon() {
-   // uninstall(this.props.data.type, this.props.data.display_name);
+    // uninstall(this.props.data.type, this.props.data.display_name);
     //install(this.props.data.type, this.props.data);
     toast(variables.getMessage('toasts.updated'));
     this.setState({
@@ -106,9 +107,9 @@ class ItemPage extends PureComponent {
 
   manage(type) {
     if (type === 'install') {
-     // install(this.props.data.type, this.props.data.data);
+      // install(this.props.data.type, this.props.data.data);
     } else {
-     // uninstall(this.props.data.type,this.props.data.display_name);
+      // uninstall(this.props.data.type,this.props.data.display_name);
     }
 
     toast(variables.getMessage('toasts.' + type + 'ed'));
@@ -332,9 +333,7 @@ class ItemPage extends PureComponent {
               </>
             )}
             <div className="marketplaceDescription">
-              <span className="title">
-                {variables.getMessage('marketplace:product.details')}
-              </span>
+              <span className="title">{variables.getMessage('marketplace:product.details')}</span>
               <div className="moreInfo">
                 {this.props.data.data.updated_at &&
                   moreInfoItem(
@@ -364,9 +363,8 @@ class ItemPage extends PureComponent {
                 {moreInfoItem(
                   <MdStyle />,
                   variables.getMessage('settings:sections.background.type.title'),
-                  variables.getMessage(
-                    'marketplace:' + this.getName(this.props.data.data.type),
-                  ) || 'marketplace',
+                  variables.getMessage('marketplace:' + this.getName(this.props.data.data.type)) ||
+                    'marketplace',
                 )}
               </div>
             </div>
@@ -392,9 +390,7 @@ class ItemPage extends PureComponent {
                 this.state.button
               ) : (
                 <p style={{ textAlign: 'center' }}>
-                  {variables.getMessage(
-                    'marketplace:product.buttons.not_available_preview',
-                  )}
+                  {variables.getMessage('marketplace:product.buttons.not_available_preview')}
                 </p>
               )}
               {this.props.data.data.sideload !== true && (
@@ -416,9 +412,7 @@ class ItemPage extends PureComponent {
                       )
                     }
                     icon={<MdFlag />}
-                    tooltipTitle={variables.getMessage(
-                      'marketplace:product.buttons.report',
-                    )}
+                    tooltipTitle={variables.getMessage('marketplace:product.buttons.report')}
                     tooltipKey="report"
                   />
                 </div>

src/features/misc/modals/Modals.jsx

@@ -56,7 +56,8 @@ function Modals() {
         closeTimeoutMS={300}
         onRequestClose={() => toggleModal('main', false)}
         isOpen={main}
-        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"
+        id="#modal"
+        className="z-[100] 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}
       >

src/features/misc/views/Addons.jsx

@@ -16,7 +16,7 @@ function Addons(props) {
     </Tabs>*/
     },
     (
-      <div className="modalTabContent">
+      <div className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col">
         <Added />
       </div>
     )

src/features/misc/views/Marketplace.jsx

@@ -54,7 +54,7 @@ function Marketplace() {
   return (
     <AnimatePresence mode="wait">
       <motion.div
-        className="modalTabContent"
+        className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -79,9 +79,7 @@ function Marketplace() {
             <ItemPage />
           </motion.div>
         )}
-        {selectedCollection !== null && (
-          <CollectionPage />
-        )}
+        {selectedCollection !== null && <CollectionPage />}
       </motion.div>
     </AnimatePresence>
   );

tailwind.config.js

@@ -12,6 +12,10 @@ module.exports = {
           light: 'rgba(255, 255, 255, .85)',
           dark: 'rgba(14, 16, 19, .85)',
         },
+        'modal-content': {
+          light: 'rgba(255, 255, 255, .95)',
+          dark: 'rgba(14, 16, 19, .95)',
+        },
         background: {
           light: 'rgba(255, 255, 255, 0.7)',
           dark: 'rgba(0, 0, 0, 0.7)',