Merge conflicts remote-tracking branch 'origin/main' into ui

app/src/styles/components/input.scss

@@ -280,28 +280,24 @@ input {
 
   .dropdown-menu {
     position: absolute;
-    top: 100%;
-    left: 0;
-    background-color: #ffffff;
-    border: 1px solid #cccccc;
+    top: 110%;
+    right: -16px;
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
     border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: #{$box-shadow-medium};
     z-index: 1000;
     min-width: 200px;
     overflow: auto;
-    max-height: 600px;
+    max-height: 400px;
 
     .dropdown-content {
       display: flex;
       flex-direction: column;
       gap: 6px;
-
       .nested-dropdown {
-        // &:first-child{
         margin-left: 0;
-        // }
       }
-
       padding: 10px;
     }
 
@@ -309,13 +305,13 @@ input {
       display: block;
       padding: 5px 10px;
       text-decoration: none;
-      color: #000000;
+      color: var(--text-color);
       font-size: 14px;
       cursor: pointer;
       transition: background-color 0.3s ease;
 
       &:hover {
-        background-color: #f0f0f0;
+        background-color: var(--background-color);
       }
     }
 
@@ -329,15 +325,20 @@ input {
         padding: 5px 10px;
         cursor: pointer;
         font-size: 14px;
-        color: #000000;
+        color: var(--text-color);
         transition: background-color 0.3s ease;
+        border-radius: #{$border-radius-small};
+        .arrow-container{
+          @include flex-center;
+        }
 
         &:hover {
-          background-color: #f0f0f0;
+          background-color: var(--background-color);
         }
 
         &.open {
-          background-color: #e0e0e0;
+          color: var(--accent-color);
+          background-color: var(--highlight-accent-color);
         }
 
         .icon {
@@ -349,7 +350,7 @@ input {
       .submenu {
         margin-top: 5px;
         padding-left: 20px;
-        border-left: 2px solid #cccccc;
+        border-left: 2px solid var(--border-color);
         display: flex;
         flex-direction: column;
         gap: 6px;
@@ -576,26 +577,26 @@ input {
         color: var(--text-disabled);
       }
     }
-    .entered-emails{
+    .entered-emails {
       @include flex-center;
       gap: 2px;
       background: var(--background-color-gray);
       padding: 0 4px;
       border-radius: #{$border-radius-large};
-      span{
+      span {
         height: 14px;
         width: 14px;
         line-height: 12px;
         text-align: center;
         border-radius: #{$border-radius-small};
-        &:hover{
+        &:hover {
           background: var(--accent-color);
           color: var(--primary-color);
         }
       }
     }
   }
-  .invite-button{
+  .invite-button {
     padding: 4px 12px;
     border-radius: #{$border-radius-large};
     background: var(--accent-color);

app/src/styles/components/marketPlace/marketPlace.scss

@@ -8,17 +8,17 @@
   background-color: var(--background-color-secondary);
   position: absolute;
   left: 0;
-  padding: 95px 8px;
+  padding: 100px 50px;
   padding-bottom: 32px;
+  backdrop-filter: blur(6px);
 
   .marketplace-container {
+    position: relative;
     padding: 20px 2px;
-    // height: calc(100vh - 120px);
     height: 100%;
     background-color: var(--background-color);
     box-shadow: #{$box-shadow-medium};
     border-radius: #{$border-radius-extra-large};
-    position: relative;
   }
 
   .marketPlace {
@@ -37,47 +37,34 @@
       width: 100%;
       display: flex;
       align-items: center;
-      gap: 20px;
+      gap: 12px;
 
-      .asset-search-wrapper {
+      .search-wrapper {
         min-width: 60%;
         max-width: 684px;
         padding: 0;
         border-radius: $border-radius-large;
-        .search-wrapper {
-          padding: 0 12px;
-          .search-container {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            border: none !important;
-            border-radius: $border-radius-large;
-            overflow: hidden;
-            padding: 6px 12px;
-            outline: 1px solid var(--border-color);
 
-            input {
-              border: none !important;
-              outline: none;
-            }
+        .search-container {
+          border: none !important;
+          box-shadow: $box-shadow-medium;
+          border-radius: $border-radius-large;
+
+          input {
+            border: none !important;
+            outline: none;
           }
         }
       }
 
       .regularDropdown-container {
         max-width: 159px;
-        max-height: 30px;
-        height: 100%;
-        .dropdown-header {
-          align-items: center;
-        }
       }
 
       .button {
         padding: 5px 20px;
         border: 1px solid var(--accent-color);
         border-radius: 14px;
-        color: var(--accent-color);
       }
 
       .rating-container {
@@ -102,7 +89,6 @@
         color: var(--text-color);
         font-weight: $medium-weight;
         font-size: $xlarge;
-        margin: 10px 0;
       }
 
       .cards-wrapper-container {
@@ -131,7 +117,6 @@
             border-radius: 10px;
             padding: 5px;
             background-color: var(--accent-color);
-            cursor: pointer;
           }
 
           .image-container {