docs(nxdev): refresh search ui (#9002)

nx-dev/feature-search/src/lib/algolia-search.global.css

@@ -108,7 +108,7 @@
   height: 4.5rem;
   font-size: 1rem;
   font-weight: 500;
-  color: black;
+  color: #374151;
   margin-left: 1rem;
   margin-right: 1rem;
   flex: auto;
@@ -117,6 +117,7 @@
 
 .DocSearch-Input:focus {
   outline: 2px dotted transparent;
+  border-color: #143157 !important;
 }
 
 .DocSearch-Input::-webkit-search-cancel-button,
@@ -205,7 +206,7 @@
 }
 
 .DocSearch-Hit-title {
-  color: black;
+  color: #374151;
   line-height: 1.5rem;
   font-weight: 600;
   overflow: hidden;

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -1,3 +1,4 @@
+import { SearchIcon } from '@heroicons/react/solid';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Link from 'next/link';
@@ -72,23 +73,15 @@ export function AlgoliaSearch() {
         type="button"
         ref={searchButtonRef}
         onClick={handleOpen}
-        className="group flex w-full items-center space-x-3 py-2 font-medium leading-6 text-white opacity-90 transition-colors duration-200 hover:opacity-100 sm:space-x-4"
+        className="flex w-full items-center rounded-md py-1.5 pl-2 pr-3 text-sm leading-6 text-slate-300 ring-1 ring-slate-600 transition hover:text-slate-200 hover:ring-slate-500"
       >
-        <svg width="24" height="24" fill="none" className="text-white">
+        <SearchIcon className="mr-3 h-4 w-4 flex-none" />
-          <path
+        <span className="mx-3">
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          <span className="hidden lg:inline">Quick </span>search
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-        <span>
-          <span className="hidden sm:inline">Quick </span>search
         </span>
         <span
           style={{ opacity: browserDetected ? '1' : '0' }}
-          className="hidden rounded-md border border-white py-0.5 px-1.5 text-sm leading-5 sm:block"
+          className="ml-auto hidden flex-none pl-3 text-xs font-semibold md:block"
         >
           <span className="sr-only">Press </span>
           <kbd className="font-sans">

nx-dev/nx-dev/pages/[...segments].tsx

@@ -41,7 +41,7 @@ export default function DocumentationPage({
 
   return (
     <>
-      <Header showSearch={true} isDocViewer={true} />
+      <Header isDocViewer={true} />
       <main>
         <DocViewer
           document={document}

nx-dev/nx-dev/pages/community.tsx

@@ -4,10 +4,13 @@ import {
   ClipboardListIcon,
 } from '@heroicons/react/solid';
 import { Footer, Header } from '@nrwl/nx-dev/ui-common';
-import { ConnectWithUs, PluginDirectory } from '@nrwl/nx-dev/ui-community';
+import {
+  ConnectWithUs,
+  PluginDirectory,
+  CreateNxPlugin,
+} from '@nrwl/nx-dev/ui-community';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import CreateNxPlugin from '../../ui-community/src/lib/create-nx-plugin';
 
 declare const fetch: any;
 
@@ -57,7 +60,7 @@ export function Community(props: CommunityProps) {
           type: 'website',
         }}
       />
-      <Header useDarkBackground={false} showSearch={false} />
+      <Header useDarkBackground={false} />
       <main>
         <div className="w-full">
           <article

nx-dev/nx-dev/pages/conf.tsx

@@ -35,7 +35,7 @@ export function ConfPage() {
           type: 'website',
         }}
       />
-      <Header useDarkBackground={true} showSearch={false} />
+      <Header useDarkBackground={true} />
       <main
         style={{
           background: 'linear-gradient(180deg, #143055 0%, #0b1a2d 100%)',

nx-dev/nx-dev/pages/index.tsx

@@ -50,7 +50,7 @@ export function Index() {
         }}
       />
       <h1 className="sr-only">Next generation monorepo tool</h1>
-      <Header showSearch={true} useDarkBackground={false} />
+      <Header useDarkBackground={false} />
       <main role="main">
         <div className="w-full">
           {/*INTRO COMPONENT*/}

nx-dev/ui-common/src/lib/header.tsx

@@ -3,13 +3,11 @@ import Link from 'next/link';
 import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
 
 export interface HeaderProps {
-  showSearch: boolean;
   isDocViewer?: boolean;
   useDarkBackground?: boolean;
 }
 
 export function Header(props: HeaderProps) {
-  const showSearch = props.showSearch;
   return (
     <div
       className={cx(
@@ -56,7 +54,9 @@ export function Header(props: HeaderProps) {
           </a>
         </div>
         {/*SEARCH*/}
-        <div className="inline">{!!showSearch ? <AlgoliaSearch /> : null}</div>
+        <div className="inline">
+          <AlgoliaSearch />
+        </div>
         {/*NAVIGATION*/}
         <div className="flex-shrink-0 text-sm">
           <nav className="items-justified flex justify-center space-x-1">