docs: update search ui

chakra-ui · Nov 29, 2020 · f170723 · f170723
1 parent 0c46cd0
commit f170723
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 30 deletions.
diff --git a/website/pages/index.tsx b/website/pages/index.tsx
@@ -128,10 +128,10 @@ const HomePage = ({ members, sponsors }: HomePageProps) => {
           <Container>
             <Box maxW="760px" mx="auto" textAlign="center">
               <chakra.h1
-                fontSize={{ base: "2.25rem", sm: "3rem", lg: "3.75rem" }}
+                fontSize={{ base: "2.25rem", sm: "3rem", lg: "4rem" }}
                 fontFamily="heading"
                 letterSpacing="tight"
-                fontWeight="bold"
+                fontWeight="800"
                 mb="16px"
                 lineHeight="1.2"
               >
@@ -195,7 +195,7 @@ const HomePage = ({ members, sponsors }: HomePageProps) => {
                 px="6"
                 py="4"
               >
-                <Img h="64px" src="/git-nation-badge.png" />
+                <Img h="55px" src="/git-nation-badge.png" />
               </Box>
             </Center>
           </Container>

diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   chakra,
   Flex,
   HStack,
@@ -62,7 +63,7 @@ function HeaderContent() {
               <Logo />
             </chakra.a>
           </NextLink>
-          <HStack
+          {/* <HStack
             as="nav"
             spacing="4"
             ml="24px"
@@ -71,13 +72,12 @@ function HeaderContent() {
             <NavLink href="/docs/getting-started">Docs</NavLink>
             <NavLink href="/guides/integrations/with-cra">Guides</NavLink>
             <NavLink href="/team">Team</NavLink>
-          </HStack>
+          </HStack> */}
         </Flex>
 
-        <Search />
-
-        <Flex maxW="720px" align="center" color="gray.400">
-          <VersionSwitcher display={{ base: "none", md: "flex" }} />
+        <Flex w="100%" maxW="824px" align="center" color="gray.400">
+          <Search />
+          <VersionSwitcher w="64px" display={{ base: "none", md: "flex" }} />
           <HStack spacing="5" display={{ base: "none", md: "flex" }}>
             <Link isExternal aria-label="GitHub" href={siteConfig.repo.url}>
               <Icon
@@ -143,8 +143,8 @@ function Header(props) {
       bg={bg}
       left="0"
       right="0"
-      // borderTop="6px solid"
-      // borderTopColor="teal.400"
+      borderTop="6px solid"
+      borderTopColor="teal.400"
       width="full"
       {...props}
     >

diff --git a/website/src/components/search.styles.tsx b/website/src/components/search.styles.tsx
@@ -55,8 +55,8 @@ const SearchStyle = () => (
         display: flex;
         flex-direction: column;
         min-height: 0;
-        border-radius: 1rem;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        border-radius: 0.75rem;
+        box-shadow: ${theme.shadows.lg};
         background: white;
       }
 

diff --git a/website/src/components/search.tsx b/website/src/components/search.tsx
@@ -15,6 +15,7 @@ import {
 import SearchStyle from "./search.styles"
 import { get, startsWith } from "lodash/fp"
 import _ from "lodash"
+import { SearchIcon } from "@chakra-ui/icons"
 
 const getLvl1 = get("hierarchy.lvl1")
 const startsWithCss = startsWith("css-")
@@ -43,8 +44,9 @@ const SearchButton = React.forwardRef(function SearchButton(
   return (
     <chakra.button
       flex="1"
-      maxW="400px"
+      maxW="448px"
       type="button"
+      mx="6"
       ref={ref}
       lineHeight="1.2"
       {...rest}
@@ -56,27 +58,12 @@ const SearchButton = React.forwardRef(function SearchButton(
           display={{ base: "hidden", sm: "flex" }}
           alignItems="center"
           color="gray.400"
-          fontSize="sm"
           py="3"
           px="4"
           shadow="base"
           rounded="md"
         >
-          <chakra.svg
-            viewBox="0 0 24 24"
-            w="16px"
-            h="16px"
-            fill="none"
-            color="gray.400"
-          >
-            <path
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </chakra.svg>
+          <SearchIcon />
           <HStack w="full" ml="3" spacing="4px">
             <Text textAlign="left" flex="1">
               Search the docs
@@ -164,6 +151,7 @@ export function Search() {
       {isOpen && (
         <Portal>
           <DocSearchModal
+            placeholder="Search the docs"
             initialQuery={initialQuery}
             initialScrollY={window.scrollY}
             onClose={onClose}