fix(search-tab): Improved search-tab of the projects page

Styled the search-tab to match the design theme of the website
FrancescoXX · Mar 12, 2023 · 13a0c15 · 13a0c15
1 parent 6dd3d23
commit 13a0c15
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/GetProjects.js b/src/components/GetProjects.js
@@ -63,7 +63,7 @@ const GetProjects = () => {
                   onRemove={getSelectedValues}
                   placeholder="Filter By Tech Stack"
                   ref={multiselectRef}
-                  className="bg-[#FEFEFE] text-[#314c89]"
+                  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}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -118,6 +118,14 @@ 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 .searchWrapper{
+  @apply border-none;
+}
+
+#multiselectContainerReact .searchWrapper input{
+  @apply placeholder:text-slate-700 text-white font-bold;
+}
+
 #get-projects-scroll{
   overflow: hidden;