feat: Enhancements for the creators filter (decentraland#1456)

* feat: Enhancements for the creators filter * chore: update event handler types * feat: introduce ProfilesCache to avoid duplicated requests * feat: profiles cache to return promise and update tests
awaisshah228 · Mar 8, 2023 · d1f57b0 · d1f57b0
1 parent 9d71fb4
commit d1f57b0
Show file tree

Hide file tree

Showing 18 changed files with 421 additions and 267 deletions.
diff --git a/webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.css b/webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.css
@@ -1,15 +1,17 @@
-.CreatorsFilter .creators-filter-dropdown.ui.fluid.search.selection.dropdown {
-  height: 44px;
-}
-
 .CreatorsFilter .pill-container {
   display: flex;
   flex-wrap: wrap;
   margin-top: 12px;
 }
 
+.CreatorsFilter .ui.dropdown .menu > .header {
+  border-bottom: 1px solid grey;
+  padding-bottom: 16px;
+  color: var(--text);
+}
+
 @media (max-width: 768px) {
-  .CreatorsFilter .ui.selection.dropdown:not(.loading) .menu {
+  .CreatorsFilter .menu {
     min-height: 170px;
   }
 
@@ -27,149 +29,116 @@
     margin-bottom: 12px;
   }
 
-  .CreatorsFilter .ui.fluid.search.selection.dropdown {
-    padding: 0.53em 2.1em 0.53em 0.6em;
-    min-height: 37px;
-  }
-
-  .CreatorsFilter .ui.search.selection.dropdown > input.search {
-    padding: 0.43em 2.1em 0.43em 0.6em;
-    right: 0.74em;
-    font-size: 16px;
-  }
-
-  .CreatorsFilter
-    .ui.search.selection.dropdown
-    > input.search::-webkit-input-placeholder {
-    padding-left: 20px;
-  }
-
-  .CreatorsFilter .ui.selection.dropdown > .dropdown.icon {
-    padding: 0.63em;
-  }
-
-  .CreatorsFilter .ui.selection.dropdown > .search.icon {
-    padding: 0.63em;
-    color: var(--text);
-    top: 35%;
-    left: 93%;
-    font-size: 1rem;
+  .CreatorsFilter .creators-filter-dropdown-container .search.icon {
+    font-size: 14px;
   }
+}
 
-  .CreatorsFilter .ui.selection.dropdown > .search.icon.search-loading::before {
-    top: 40%;
-  }
+.CreatorsFilter .creators-filter-dropdown-container {
+  position: relative;
+  height: 44px;
+}
 
-  .CreatorsFilter .ui.selection.dropdown > .search.icon.search-loading::after {
-    top: 40%;
-  }
+.CreatorsFilter .creators-filter-dropdown-container .menu {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+  box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
+  background-color: var(--dropdown);
+  border: var(--outline);
+  padding: 8px 0px;
+  max-height: 16.02857143rem;
+  border-radius: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: 100%;
+  margin-top: 12px;
 }
 
-.CreatorsFilter .ui.dropdown .text {
+.CreatorsFilter .creators-filter-dropdown-container .item {
+  cursor: pointer;
   color: var(--text);
-  font-weight: 500;
-  margin-top: auto;
-  margin-bottom: auto;
-  font-family: var(--font-family);
+  font-size: 15px;
+  line-height: 24px;
+  padding: 10px 16px;
+  font-weight: normal;
+  min-width: 210px;
 }
 
-@media (min-width: 769px) {
-  .CreatorsFilter .ui.selection.dropdown > .dropdown.icon {
-    color: var(--text);
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .CreatorsFilter .ui.selection.dropdown > .search.icon {
-    color: var(--text);
-    top: 30%;
-    padding: 0.71em;
-  }
+.CreatorsFilter .creators-filter-dropdown-container .item.no-results {
+  cursor: default;
+}
 
-  .CreatorsFilter .ui.selection.dropdown > .search.icon.search-loading::before {
-    top: 45%;
-  }
+.CreatorsFilter .creators-filter-dropdown-container .header {
+  color: var(--text);
+  font-size: 13px;
+  line-height: 24px;
+  padding: 0 16px;
+  padding-bottom: 8px;
+  font-weight: normal;
+  min-width: 210px;
+  text-transform: uppercase;
+  font-weight: bold;
+  border-bottom: 1px solid grey;
+  color: var(--text);
+}
 
-  .CreatorsFilter .ui.selection.dropdown > .search.icon.search-loading::after {
-    top: 45%;
-  }
+.CreatorsFilter
+  .creators-filter-dropdown-container
+  .item:not(.no-results):hover {
+  color: var(--text);
+  background-color: var(--dropdown-hover);
+}
 
-  .CreatorsFilter .ui.fluid.search.selection.dropdown {
-    min-height: 33px;
-  }
+.CreatorsFilter .ui.small.active.loader {
+  left: unset;
+  right: -6px;
+  top: 26px;
 }
 
-.CreatorsFilter .ui.selection.dropdown .menu {
-  border-radius: 6px;
-  margin-top: 13px;
-  border-color: transparent !important;
-  box-shadow: var(--shadow-2);
+.CreatorsFilter .ui.small.active.loader::after {
+  border-color: #767676 transparent transparent !important;
+  width: 18px;
+  height: 18px;
 }
 
-.CreatorsFilter .ui.fluid.search.selection.dropdown {
+.CreatorsFilter .creators-filter-dropdown-container input {
+  height: 44px;
   display: flex;
   border-radius: 6px !important;
   padding: 0.58571429em 2.1em 0.58571429em 0.6em;
   padding: 0.53em 2.1em 0.53em 0.6em;
-  color: var(--secondary-text);
   border: 1px solid var(--divider) !important;
   background-color: transparent;
-}
-
-.CreatorsFilter .ui.search.selection.dropdown > input.search {
+  width: 100%;
   color: var(--text);
   font-weight: 500;
   font-family: var(--font-family);
-  padding: 0.47857143em 2.1em 0.47857143em 0.6em;
   height: 100%;
 }
 
-.CreatorsFilter .ui.search.selection.dropdown > input.search::selection {
-  color: var(--text);
+.CreatorsFilter .creators-filter-dropdown-container input:focus {
+  outline: 1px solid;
 }
 
-.CreatorsFilter .ui.dropdown.visible .menu.wrapper {
-  overflow-y: hidden;
-  height: auto;
-  display: flex !important;
-  flex-direction: column;
-}
-
-.CreatorsFilter .ui.dropdown .options-wrapper {
-  flex: 1;
-  width: 100% !important;
-}
-
-.CreatorsFilter .ui.dropdown:hover .menu {
-  border-color: transparent !important;
-  box-shadow: var(--shadow-2) !important;
-}
-
-.CreatorsFilter .ui.selection.dropdown .menu > .item {
-  border-top: none;
-}
-
-.CreatorsFilter .ui.selection.dropdown .menu > .item::selection .text {
-  border-top: none;
-  color: var(--text);
-}
-
-.CreatorsFilter .ui.selection.dropdown .menu > .message:not(.ui) {
-  color: var(--text);
-  white-space: initial;
-  line-height: 24px;
+.CreatorsFilter .creators-filter-dropdown-container input::placeholder {
+  text-transform: uppercase;
+  color: rgba(191, 191, 191, 0.87);
+  font-weight: 500;
+  font-family: var(--font-family);
 }
 
-.CreatorsFilter .ui.selection.visible.dropdown > .text:not(.default) {
-  color: var(--text);
+.CreatorsFilter .creators-filter-dropdown-container .search.icon {
+  position: absolute;
+  top: 13px;
+  right: 8px;
+  color: #d9d7d8;
 }
 
-.CreatorsFilter .ui.selection.visible.dropdown > .text.default {
-  padding-left: 4px;
+.CreatorsFilter .creators-filter-dropdown-container .search.icon.clear {
+  cursor: pointer;
 }
 
-.CreatorsFilter .ui.search.selection.dropdown > input.search:focus {
-  border: 2px solid var(--text) !important;
-  border-radius: 6px;
+.CreatorsFilter .creators-filter-dropdown-container .search.icon.clear::before {
+  content: '\f00d';
 }