This commit is contained in:
Paul Wackerow 2022-11-30 12:05:47 -08:00
parent ab06e6456b
commit 8ad35ea5b4
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
4 changed files with 26 additions and 21 deletions

View File

@ -2,7 +2,7 @@ import { FC } from 'react';
import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { Search } from '../UI' import { Search } from '../UI';
import { MoonIcon, SunIcon } from '../UI/icons'; import { MoonIcon, SunIcon } from '../UI/icons';
import { HeaderButtons } from './'; import { HeaderButtons } from './';

View File

@ -3,16 +3,12 @@ import { DocSearch } from '@docsearch/react';
import '@docsearch/css'; import '@docsearch/css';
export const Search: React.FC = () => { export const Search: React.FC = () => {
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '' const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '';
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '' const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '';
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || '' const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || '';
// TODO: Replace Algolia test keys with above env vars when ready // TODO: Replace Algolia test keys with above env vars when ready
return ( return (
<DocSearch <DocSearch appId='R2IYF7ETH7' apiKey='599cec31baffa4868cae4e79f180729b' indexName='docsearch' />
appId="R2IYF7ETH7"
apiKey="599cec31baffa4868cae4e79f180729b"
indexName="docsearch"
/>
); );
} };

View File

@ -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 { CloseIcon } from '@chakra-ui/icons';
import { HamburgerIcon } from '../UI/icons'; import { HamburgerIcon } from '../UI/icons';

View File

@ -76,7 +76,7 @@
background: var(--chakra-colors-bg); background: var(--chakra-colors-bg);
} }
svg[aria-label="Algolia"] * { svg[aria-label='Algolia'] * {
fill: var(--chakra-colors-body); fill: var(--chakra-colors-body);
} }
@ -86,16 +86,16 @@ svg[aria-label="Algolia"] * {
border-radius: 0; border-radius: 0;
} }
.DocSearch-Hit[aria-selected="true"] a { .DocSearch-Hit[aria-selected='true'] a {
background: var(--chakra-colors-secondary); background: var(--chakra-colors-secondary);
color: var(--chakra-colors-button-bg); color: var(--chakra-colors-button-bg);
} }
.DocSearch-Hit[aria-selected="false"] a { .DocSearch-Hit[aria-selected='false'] a {
background: var(--chakra-colors-button-bg); 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); color: var(--chakra-colors-body);
} }
@ -120,8 +120,8 @@ svg[aria-label="Algolia"] * {
border-radius: 0; 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 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 span,
.DocSearch-Hit-title mark, .DocSearch-Hit-title mark,
.DocSearch-Hit-path mark, .DocSearch-Hit-path mark,
.DocSearch-Prefill { .DocSearch-Prefill {
@ -137,7 +137,7 @@ svg[aria-label="Algolia"] * {
.DocSearch-Input::placeholder { .DocSearch-Input::placeholder {
font-style: italic; font-style: italic;
font-size: var(--chakra-fontSizes-md) font-size: var(--chakra-fontSizes-md);
} }
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
@ -155,7 +155,7 @@ svg[aria-label="Algolia"] * {
.DocSearch-Button::before { .DocSearch-Button::before {
position: absolute; position: absolute;
content: "search"; content: 'search';
font-size: var(--chakra-fontSizes-md); font-size: var(--chakra-fontSizes-md);
color: var(--chakra-colors-bg); color: var(--chakra-colors-bg);
inset: 0; inset: 0;
@ -168,7 +168,8 @@ svg[aria-label="Algolia"] * {
} }
/* Mobile modal styling */ /* Mobile modal styling */
.DocSearch-Container, .DocSearch-Modal { .DocSearch-Container,
.DocSearch-Modal {
position: fixed; position: fixed;
inset: 1rem; inset: 1rem;
max-width: calc(100vw - 2rem); max-width: calc(100vw - 2rem);