refactor: better organise options orders

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

@@ -7,6 +7,71 @@
 @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;
+  right: 3rem;
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+/* modal transition */
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
+}
+
+#modal {
+  height: 80vh;
+  width: clamp(60vw, 1400px, 90vw);
+
+  @include themed {
+    background-color: t($modal-background);
+  }
+}
+
 .closePositioning {
   position: absolute;
   top: 3rem;

src/components/Layout/Settings/Section/Section.jsx

@@ -11,15 +11,14 @@ function Section({ id, title, subtitle, icon, onClick, children }) {
       onClick();
     }
   };
-  
 
   return (
     <div className="moreSettings" onClick={handleClick}>
       <div className="left">
         {icon}
         <div className="content">
-          <span className="title">{title}</span>
-          <span className="subtitle">{subtitle}</span>
+          <span className="text-xl font-semibold">{title}</span>
+          <span className="text-neutral-800 dark:text-neutral-300 ">{subtitle}</span>
         </div>
       </div>
       <div className="action">