From b1f9a2cb361627df6354ddd5643d7a31a83d23ea Mon Sep 17 00:00:00 2001
From: esemyonov <132259164+esemyonov@users.noreply.github.com>
Date: Mon, 4 Dec 2023 10:15:07 +0600
Subject: [PATCH] feat: header template (#272)

* feat: header template

* fix: button styles
---
 src/components/Layout.tsx        |  2 +-
 src/components/Search.tsx        | 23 +++++------------------
 src/components/ThemeSelector.tsx |  2 +-
 tailwind.config.ts               |  1 -
 4 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f697fbbf..af37efb5 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -32,7 +32,7 @@ function Header() {
         "!dark:bg-black": scrollY > 10,
       })}
     >
-      <div className="mx-auto flex w-full max-w-[1212px] items-center justify-between py-2 lg:py-6 lg:pr-5">
+      <div className="mx-auto box-content flex min-h-[52px] w-full max-w-[1180px] items-center justify-between py-2 lg:py-5">
         <div className="mr-6 flex lg:hidden">
           <MobileNavigation />
         </div>
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 4548f380..734419bb 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -265,7 +265,7 @@ const SearchInput = forwardRef<
 
   return (
     <div className="group relative flex h-12">
-      <SearchIcon className="pointer-events-none absolute left-4 top-0 h-full w-5 fill-slate-500" />
+      <SearchIcon />
       <input
         ref={inputRef}
         className={clsx(
@@ -437,32 +437,19 @@ function useSearchProps() {
 }
 
 export function Search() {
-  let [modifierKey, setModifierKey] = useState<string>();
   let { buttonProps, dialogProps } = useSearchProps();
 
-  useEffect(() => {
-    setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ",
-    );
-  }, []);
-
   return (
     <>
       <button
         type="button"
-        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:bg-slate-800/75 md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1  md:ring-inset md:ring-slate-200 md:ring-white/5 md:hover:bg-slate-700/40 md:hover:ring-slate-500 lg:w-96"
+        className="group flex h-6 w-6 items-center justify-center rounded-xl bg-transparent p-3.5 pr-5 hover:bg-white hover:ring-2 hover:ring-pink sm:justify-start md:h-auto md:w-80 md:flex-none md:text-sm md:ring-1 md:ring-inset md:ring-gray-600 lg:w-96"
         {...buttonProps}
       >
-        <SearchIcon className="h-5 w-5 flex-none fill-slate-500 group-hover:fill-slate-500  md:group-hover:fill-slate-400" />
-        <span className="sr-only md:not-sr-only md:ml-2 md:text-slate-400">
-          Search docs
+        <SearchIcon className="h-5 w-5 flex-none fill-white opacity-50 group-hover:fill-gray-600" />
+        <span className="sr-only text-base group-hover:text-black md:not-sr-only md:ml-1.5 md:text-white/75">
+          Search
         </span>
-        {modifierKey && (
-          <kbd className="ml-auto hidden font-medium text-slate-500 md:block">
-            <kbd className="font-sans">{modifierKey}</kbd>
-            <kbd className="font-sans">K</kbd>
-          </kbd>
-        )}
       </button>
       <SearchDialog {...dialogProps} />
     </>
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index adfce2a5..513b7945 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -69,7 +69,7 @@ export function ThemeSelector(
         <LightIcon
           className={clsx(
             "h-4 w-4 dark:hidden",
-            theme === "system" ? "fill-slate-400" : "fill-pink-400",
+            theme === "system" ? "fill-gray-600" : "fill-pink-400",
           )}
         />
         <DarkIcon
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 802a4003..af69b4c4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,6 @@ export default {
       fontSize: {
         // xs: ["0.75rem", { lineHeight: "1rem" }],
         // sm: ["0.875rem", { lineHeight: "1.5rem" }],
-        base: ["1rem", { lineHeight: "2rem" }],
         lg: ["1.125rem", { lineHeight: "1.75rem" }],
         xl: ["1.25rem", { lineHeight: "2rem" }],
         "2xl": ["1.5rem", { lineHeight: "2.5rem" }],