refactor(client): searchbar - remove float values (#48292)

* feat(client): refactor searchbar by removing float values

* polish the style by adding border radius and removing padding

* Polish the style and account for donation text

* WIP: remove float values

* Revert "WIP: remove float values"

This reverts commit c1c32aa9d1.

* adjust magic numbers

* Adjust spacing to account and add position absolute

* revert the deletion of ais hits values

* move the padding value to searchbar file

* Remove RTL Values

* feat: allow for hint expansions

* Remove the left value on submit icon

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* add display none and remove their values

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/src/components/Header/components/universal-nav.css

@@ -41,6 +41,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  gap: 10px;
   flex: 1 0 33%;
   height: var(--header-height);
 }
@@ -332,7 +333,6 @@ button.nav-link[aria-disabled='true'] {
   background-color: var(--theme-color);
   cursor: pointer;
   max-height: calc(var(--header-height) - 8px);
-  margin-right: 10px;
   display: flex;
   align-items: center;
 }
@@ -445,16 +445,14 @@ button.nav-link[aria-disabled='true'] {
 
 .universal-nav-right .fcc_searchBar {
   position: absolute;
-  top: 0;
+  top: var(--header-height);
   left: 0;
 }
 
 .universal-nav-right .fcc_searchBar .ais-SearchBox-form {
   width: 100vw;
-  height: var(--search-box-form);
   max-width: unset;
   padding: 0 15px;
-  left: 0;
 }
 
 /* In mobile layout, prevent search input from hanging around if the
@@ -477,19 +475,12 @@ button.nav-link[aria-disabled='true'] {
 
 .universal-nav-right .ais-SearchBox-input {
   width: calc(100vw - 17rem);
-  padding-left: 27px;
 }
 
 .universal-nav-right .fcc_searchBar .ais-Hits {
   width: calc(100vw - 17rem);
 }
 
-.universal-nav-right .fcc_searchBar .ais-SearchBox-submit {
-  top: unset;
-  margin-top: 19px;
-  left: 18px;
-}
-
 .ais-SearchBox-input:focus {
   outline: 3px solid var(--blue-mid);
 }
@@ -529,9 +520,7 @@ button.nav-link[aria-disabled='true'] {
 
   .fcc_searchBar .ais-SearchBox-form {
     display: flex;
-    position: absolute;
-    top: var(--header-height);
-    left: 15px;
+    justify-content: flex-end;
     max-width: calc(100vw - 350px);
   }
 

client/src/components/search/searchBar/searchbar-base.css

@@ -24,8 +24,7 @@
 .ais-Menu-showMore,
 .ais-RangeInput-submit,
 .ais-RefinementList-showMore,
-.ais-SearchBox-submit,
-.ais-SearchBox-reset {
+.ais-SearchBox-submit {
   padding: 0;
   overflow: visible;
   font: inherit;
@@ -48,8 +47,7 @@
 .ais-Menu-showMore::-moz-focus-inner,
 .ais-RangeInput-submit::-moz-focus-inner,
 .ais-RefinementList-showMore::-moz-focus-inner,
-.ais-SearchBox-submit::-moz-focus-inner,
-.ais-SearchBox-reset::-moz-focus-inner {
+.ais-SearchBox-submit::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
@@ -62,8 +60,7 @@
 .ais-Menu-showMore[disabled],
 .ais-RangeInput-submit[disabled],
 .ais-RefinementList-showMore[disabled],
-.ais-SearchBox-submit[disabled],
-.ais-SearchBox-reset[disabled] {
+.ais-SearchBox-submit[disabled] {
   cursor: default;
 }
 .ais-Breadcrumb-list,
@@ -611,25 +608,17 @@ a[class^='ais-'] {
 .ais-SearchBox-input:-moz-placeholder {
   color: var(--gray-15);
 }
-.ais-SearchBox-submit,
-.ais-SearchBox-reset,
-.ais-SearchBox-loadingIndicator {
+.ais-SearchBox-submit {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  position: absolute;
   z-index: 100;
   width: 20px;
   height: 20px;
-  top: 50%;
-  right: 0.3rem;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
 }
-.ais-SearchBox-reset {
-  right: 0.3rem;
+.ais-SearchBox-submit {
+  position: absolute;
 }
-.ais-SearchBox-submitIcon,
 .ais-SearchBox-resetIcon,
 .ais-SearchBox-loadingIcon {
   position: absolute;
@@ -639,8 +628,7 @@ a[class^='ais-'] {
   transform: translateX(-50%) translateY(-50%);
 }
 .ais-SearchBox-submitIcon path,
-.ais-SearchBox-resetIcon path,
-.ais-SearchBox-loadingIndicator {
+.ais-SearchBox-resetIcon path {
   fill: var(--gray-15);
 }
 .ais-SearchBox-submitIcon {

client/src/components/search/searchBar/searchbar.css

@@ -1,6 +1,5 @@
 .fcc_searchBar {
   flex-grow: 1;
-  padding: 0 10px;
   max-height: 33px;
   font-family: 'Lato', sans-serif;
 }
@@ -10,12 +9,13 @@
   color: var(--gray-00);
 }
 
-.ais-SearchBox-reset {
+.ais-SearchBox-reset,
+.ais-SearchBox-loadingIndicator {
   display: none;
 }
 
 .ais-SearchBox-input {
-  padding: 0 10px 0 30px;
+  padding: 0 10px;
   font-size: 18px;
   display: inline-block;
   margin-top: 6px;
@@ -23,8 +23,11 @@
 }
 
 .ais-SearchBox-submit {
-  left: 0.3rem;
-  top: 59.5%;
+  margin-top: 6px;
+  height: 26px;
+  width: 26px;
+  background-color: var(--gray-75);
+  padding-inline: 3px;
 }
 
 .fcc_searchBar .ais-SearchBox-input,
@@ -34,18 +37,12 @@
   color: var(--gray-00);
 }
 
-.fcc_searchBar .ais-Hits {
-  top: 70px;
-  width: calc(100vw - 350px);
-  left: 15px;
+.fcc_searchBar .ais-SearchBox-input {
+  padding-inline-start: 1.5em;
 }
 
-.fcc_searchBar .ais-SearchBox-form {
-  margin-bottom: 0;
-  display: flex;
-  position: absolute;
-  top: var(--header-height);
-  right: 5px;
+.fcc_searchBar .ais-Hits {
+  left: 15px;
 }
 
 /* hits */
@@ -130,13 +127,13 @@ and arrow keys */
 }
 
 .fcc_searchBar .ais-SearchBox-form {
+  margin-bottom: 0;
   display: flex;
-  position: absolute;
-  top: var(--header-height);
-  right: 15px;
+  flex-direction: row-reverse;
+  gap: 0.25em;
 }
 
-@media (min-width: 980px) {
+@media (min-width: 981px) {
   .ais-SearchBox-input {
     width: 100%;
     max-width: 500px;
@@ -147,17 +144,13 @@ and arrow keys */
   }
   .fcc_searchBar .ais-Hits {
     top: auto;
-    width: calc(100% - 20px);
+    width: 100%;
     max-width: 500px;
-    left: 10px;
+    left: 0px;
   }
   .fcc_searchBar .ais-SearchBox-form {
     display: flex;
-    position: static;
+    justify-content: flex-end;
     top: auto;
-    right: 15px;
-  }
-  .ais-SearchBox-submit {
-    left: 0.85rem;
   }
 }