Updating Search using Primer Components (github#22677)

* updating search icon

* remove no fill

* update fill color

* using ActionList and Overlay

* update to ActionList, Overlay, add Label to Breadcrumbs, and change Mark

* add search-results test data and move header search results to right

* make search results scrollable and fix max-width in header search

* update header search and styling updates

* add highlight

* update styling

* styling and lint errors

* fix lint error and fetch

* Update components/Search.tsx

* update label color

* remove bottom margin

Co-authored-by: Rachael Sewell <rachmari@github.com>

components/Search.module.scss

@@ -3,29 +3,21 @@
   color: inherit;
 }
 
-.searchResultTitle mark {
-  color: var(--color-accent-fg);
-}
-
-.searchResultIntro mark {
-  border-bottom: 1px solid currentColor;
-}
-
 .searchResultContent {
   max-height: 4rem;
 }
 
 .searchResultContent mark {
-  text-decoration: none;
-  border-bottom: 1px dotted currentColor;
+  color: var(--color-fg-default);
+  background-color: var(--color-attention-subtle);
 }
 
 .searchResultTitle em {
   font-style: normal;
   text-decoration: underline;
 }
 
-.resultsContainerOverlay {
+.resultsContainerHeader {
   display: none;
   position: absolute;
   top: 0;
@@ -41,26 +33,29 @@
 .resultsContainerOpen {
   display: block;
 }
-.resultsContainerOpen.resultsContainerOverlay {
+
+.resultsContainerOpen.resultsContainerHeader {
   width: 60vw;
   max-width: 760px;
 }
 
 .searchInput {
   transition: width 0.3s ease-in-out;
 }
-.searchInputOverlay {
+
+.searchInputHeader {
   max-width: 690px;
   width: 256px;
 }
+
 .searchInputExpanded {
-  width: 55vw;
+  width: 53vw;
   position: absolute;
   right: 0;
   top: 0;
 }
 
-.searchOverlayOpen {
+.headerSearchOpen {
   background: var(--color-primer-canvas-backdrop);
   position: fixed;
   top: 0;