refactor: more converting modal to tailwind

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