fix(search-tab): improved user experience and icon-positioning issue …

…in search-tab of projects page
FrancescoXX · Mar 26, 2023 · 83f1d1f · 83f1d1f
1 parent ec6e479
commit 83f1d1f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/src/components/GetProjects.js b/src/components/GetProjects.js
@@ -55,7 +55,7 @@ const GetProjects = () => {
           <div className="max-w-bodyContainer">
             <div className="mx-4 mt-5 mb-10 flex list-none flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem]">
               <div className="py-2">
-                <div className="bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl flex items-center flex-row ">
+                <div className="before-multiselect bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl flex items-center flex-row ">
                   <Multiselect
                     options={options}
                     displayValue={"value"}
@@ -64,13 +64,14 @@ const GetProjects = () => {
                     onRemove={getSelectedValues}
                     placeholder="Filter By Tech Stack"
                     ref={multiselectRef}
+                    // className="bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl"
                     showCheckbox={true}
                     closeOnSelect={true}
                     avoidHighlightFirstOption={true}
                   />
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 rotate-90 text-white sm:text-slate-400"
+                    className="searchIcon h-5 w-5 rotate-90 text-white sm:text-slate-400"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="#000000"

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -49,6 +49,38 @@ h6 {
   }
 }
 
+@media (max-width: 613px) {
+  body .before-multiselect{
+    @apply bg-transparent shadow-none outline-none backdrop-blur-none;
+  }
+
+  body #multiselectContainerReact .searchWrapper input {
+    @apply bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-3 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl ml-0 p-2;
+  }
+
+  body #multiselectContainerReact .searchWrapper .chip {
+    @apply mb-3;
+  }
+
+  .searchIcon {
+    @apply absolute right-8 bottom-[15px];
+  }
+}
+
+/* @media (max-width: 600px) {
+  body .before-multiselect{
+    @apply bg-transparent shadow-none outline-none backdrop-blur-none;
+  }
+
+  body #multiselectContainerReact .searchWrapper input {
+    @apply bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-3 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl ml-0 h-10 my-3;
+  }
+
+  body #multiselectContainerReact{
+    @apply bg-transparent shadow-none outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500;
+  }
+} */
+
 @media (max-width: 430px){
   .backToTop{
     right: 20px;
@@ -118,12 +150,24 @@ h6 {
   @apply translate-x-0 transform rounded-full rounded-bl-none bg-gray-900 font-medium text-white shadow-2xl hover:translate-y-1 hover:bg-[rgb(29,161,242)] hover:shadow-md;
 }
 
+#multiselectContainerReact {
+  @apply w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500;
+}
+
 #multiselectContainerReact .searchWrapper{
-  @apply border-none;
+  @apply text-[#314c89] border-none flex flex-wrap items-center h-auto;
+}
+
+#multiselectContainerReact .searchWrapper .chip{
+  @apply mb-0; 
 }
 
+/* #multiselectContainerReact .searchWrapper{
+  @apply border-none;
+} */
+
 #multiselectContainerReact .searchWrapper input{
-  @apply placeholder:text-slate-700 text-white font-bold;
+  @apply placeholder:text-slate-700 text-white font-bold ml-2 mt-0;
 }
 
 #get-projects-scroll{