style: glass effect on modal

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

@@ -148,7 +148,7 @@ const TabNavbar = ({ modalClose }) => {
           {subTab !== '' && (
             <>
               <MdOutlineKeyboardArrowRight />
-              <span onClick={() => setSubSection('')} className={clsx("text-xl capitalize tracking-normal", { 'text-neutral-300 cursor-pointer': subSection !== '' })}>{subTab}</span>
+              <span onClick={() => setSubSection('')} className={clsx("text-xl capitalize tracking-normal transition-all duration-300 ease-in-out", { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' })}>{subTab}</span>
             </>
           )}
           {subSection !== '' && (

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

@@ -87,12 +87,16 @@
 #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, .1);
 
-  @include themed {
+  /*@include themed {
     background-color: t($modal-sidebar);
-  }
+  }*/
 }
 
+
 /* fixes for font size on extension */
 label,
 p,

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

@@ -13,7 +13,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    background: t($modal-background);
+    background: t($modal-sidebar);
 
     @extend %tabText;
 

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

@@ -7,7 +7,6 @@
     position: sticky;
     margin: 0;
     padding: 0 5px;
-    background: t($modal-sidebar);
     border-radius: 12px 0 0 12px;
     overflow: hidden auto;
     height: 67vh;