diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 62c2a8b4e1..f22a6288c5 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import NextLink from 'next/link'; -import { Search } from '../UI' +import { Search } from '../UI'; import { MoonIcon, SunIcon } from '../UI/icons'; import { HeaderButtons } from './'; diff --git a/src/components/UI/Search.tsx b/src/components/UI/Search.tsx index 947a0950e6..6b49244d2b 100644 --- a/src/components/UI/Search.tsx +++ b/src/components/UI/Search.tsx @@ -3,16 +3,12 @@ import { DocSearch } from '@docsearch/react'; import '@docsearch/css'; export const Search: React.FC = () => { - const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '' - const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '' - const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || '' + const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || ''; + const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''; + const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || ''; // TODO: Replace Algolia test keys with above env vars when ready return ( - + ); -} +}; diff --git a/src/components/layouts/MobileMenu.tsx b/src/components/layouts/MobileMenu.tsx index 24797ab810..4629b8d113 100644 --- a/src/components/layouts/MobileMenu.tsx +++ b/src/components/layouts/MobileMenu.tsx @@ -1,4 +1,12 @@ -import { Box, Flex, Modal, ModalContent, ModalOverlay, Stack, useDisclosure } from '@chakra-ui/react'; +import { + Box, + Flex, + Modal, + ModalContent, + ModalOverlay, + Stack, + useDisclosure +} from '@chakra-ui/react'; import { CloseIcon } from '@chakra-ui/icons'; import { HamburgerIcon } from '../UI/icons'; diff --git a/src/theme/search.css b/src/theme/search.css index 936143cfba..aed6fbb507 100644 --- a/src/theme/search.css +++ b/src/theme/search.css @@ -76,7 +76,7 @@ background: var(--chakra-colors-bg); } -svg[aria-label="Algolia"] * { +svg[aria-label='Algolia'] * { fill: var(--chakra-colors-body); } @@ -86,16 +86,16 @@ svg[aria-label="Algolia"] * { border-radius: 0; } -.DocSearch-Hit[aria-selected="true"] a { +.DocSearch-Hit[aria-selected='true'] a { background: var(--chakra-colors-secondary); color: var(--chakra-colors-button-bg); } -.DocSearch-Hit[aria-selected="false"] a { +.DocSearch-Hit[aria-selected='false'] a { background: var(--chakra-colors-button-bg); } -.DocSearch-Hit[aria-selected="false"] > a > div > div.DocSearch-Hit-icon > svg > path { +.DocSearch-Hit[aria-selected='false'] > a > div > div.DocSearch-Hit-icon > svg > path { color: var(--chakra-colors-body); } @@ -120,8 +120,8 @@ svg[aria-label="Algolia"] * { border-radius: 0; } -.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg, -.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span, +.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper svg, +.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper span, .DocSearch-Hit-title mark, .DocSearch-Hit-path mark, .DocSearch-Prefill { @@ -137,7 +137,7 @@ svg[aria-label="Algolia"] * { .DocSearch-Input::placeholder { font-style: italic; - font-size: var(--chakra-fontSizes-md) + font-size: var(--chakra-fontSizes-md); } .DocSearch-Container--Stalled .DocSearch-MagnifierLabel, @@ -155,7 +155,7 @@ svg[aria-label="Algolia"] * { .DocSearch-Button::before { position: absolute; - content: "search"; + content: 'search'; font-size: var(--chakra-fontSizes-md); color: var(--chakra-colors-bg); inset: 0; @@ -168,7 +168,8 @@ svg[aria-label="Algolia"] * { } /* Mobile modal styling */ - .DocSearch-Container, .DocSearch-Modal { + .DocSearch-Container, + .DocSearch-Modal { position: fixed; inset: 1rem; max-width: calc(100vw - 2rem); @@ -177,5 +178,5 @@ svg[aria-label="Algolia"] * { .DocSearch-Cancel { color: var(--chakra-colors-primary); - } + } }