From 871f55587e3a6bced1529c7e52edd4c7510a13a1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 6 Dec 2022 21:09:09 -0800 Subject: [PATCH 01/17] search input directs query to google --- src/components/UI/search/Search.tsx | 42 +++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/src/components/UI/search/Search.tsx b/src/components/UI/search/Search.tsx index 27913e5e51..075de7cf37 100644 --- a/src/components/UI/search/Search.tsx +++ b/src/components/UI/search/Search.tsx @@ -1,29 +1,55 @@ -import { FC } from 'react'; -import { Input, InputGroup, Stack } from '@chakra-ui/react'; +import { FC, useState } from 'react'; +import { Input, InputGroup, Link, Stack } from '@chakra-ui/react'; import { BORDER_WIDTH } from '../../../constants'; import { LensIcon } from '../icons'; export const Search: FC = () => { + const [query, setQuery] = useState(''); + + // Handlers + const handleSubmit = (e: React.FormEvent): void => { + document.getElementById('search-link')?.click(); + }; + const handleKeyPress = (e: React.KeyboardEvent): void => { + if (e.key === 'Enter') handleSubmit(e); + }; + const handleChange = (e: React.ChangeEvent): void => { + setQuery(e.target.value); + }; + return ( + > - - - + + + ); From faa0640465ec9f0746024598b38d12eff6918242 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 7 Dec 2022 15:57:25 +0100 Subject: [PATCH 02/17] update green.900 value (#135) used for button background; increases contrast ratio --- src/theme/foundations/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts index ed3fef3533..16477ffa52 100644 --- a/src/theme/foundations/colors.ts +++ b/src/theme/foundations/colors.ts @@ -9,7 +9,7 @@ export const colors = { 600: '#11866f', 700: '#08715C', 800: '#25453f', - 900: '#02211B' + 900: '#01100D' }, gray: { 800: '#1d242c' From 11035bf0c4f179f0c416dcca224cd6ac6dfab14b Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 7 Dec 2022 18:26:23 +0100 Subject: [PATCH 03/17] adjusts light primary to green.700 for contrast (#137) Improves contrast ratio when paired with yellow.50 and removes browser a11y warnings --- src/theme/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/index.ts b/src/theme/index.ts index 4900f4df0e..0b2c3bfafe 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -27,7 +27,7 @@ const overrides = { textStyles, semanticTokens: { colors: { - primary: { _light: 'green.600', _dark: 'green.200' }, + primary: { _light: 'green.700', _dark: 'green.200' }, secondary: { _light: 'green.800', _dark: 'green.600' }, 'button-bg': { _light: 'green.50', _dark: 'green.900' }, body: { _light: 'gray.800', _dark: 'yellow.50' }, From af86168c2f73665f60295c4f5159634b006f9d3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Wed, 7 Dec 2022 14:30:09 -0300 Subject: [PATCH 04/17] feat: add empty state for platforms without releases --- src/components/UI/DataTable.tsx | 58 +++++++++++++------ .../UI/downloads/DownloadsTable.tsx | 2 +- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index 1aa5341ce9..810d92813a 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -1,4 +1,15 @@ -import { Link, Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react'; +import { + Link, + Table, + Thead, + Tr, + Th, + TableContainer, + Text, + Tbody, + Td, + Stack +} from '@chakra-ui/react'; import { FC } from 'react'; import { OpenPGPSignaturesData, ReleaseData } from '../../types'; import { getParsedDate } from '../../utils'; @@ -20,6 +31,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { css={{ '&::-webkit-scrollbar': { borderTop: '2px solid var(--chakra-colors-primary)', + borderBottom: '2px solid var(--chakra-colors-primary)', height: 18 }, '&::-webkit-scrollbar-thumb': { @@ -30,26 +42,34 @@ export const DataTable: FC = ({ columnHeaders, data }) => { pb={4} > - - - {columnHeaders.map((columnHeader, idx) => { - return ( - - ); - })} - - + {data.length > 0 && ( + + + {columnHeaders.map((columnHeader, idx) => { + return ( + + ); + })} + + + )} + {data.length === 0 && ( + + No builds found + + )} + {dataType === 'Releases' && data.map((r: ReleaseData, idx: number) => { return ( diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx index 7b3263313c..a5feab18c0 100644 --- a/src/components/UI/downloads/DownloadsTable.tsx +++ b/src/components/UI/downloads/DownloadsTable.tsx @@ -36,7 +36,7 @@ export const DownloadsTable: FC = ({ const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12; return ( - + setTotalReleases(totalReleases[idx])}> {DOWNLOADS_TABLE_TABS.map((tab, idx) => { From 527dad36352b602df28a66bab5dd321e2f15139b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Wed, 7 Dec 2022 16:59:44 -0300 Subject: [PATCH 05/17] fix: borderBottom on DownloadsTable --- src/components/UI/DataTable.tsx | 3 +-- src/components/UI/downloads/DownloadsTable.tsx | 11 ++++++++++- src/pages/downloads.tsx | 2 ++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index 810d92813a..55df07c493 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -31,7 +31,6 @@ export const DataTable: FC = ({ columnHeaders, data }) => { css={{ '&::-webkit-scrollbar': { borderTop: '2px solid var(--chakra-colors-primary)', - borderBottom: '2px solid var(--chakra-colors-primary)', height: 18 }, '&::-webkit-scrollbar-thumb': { @@ -52,7 +51,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { fontFamily='"JetBrains Mono", monospace' fontWeight={700} fontSize='md' - color='#868b87' //? Use theme color? Or add to theme? + color='#868b87' // TODO: Use theme color? Or add to theme? > {columnHeader} diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx index a5feab18c0..b8a45207c6 100644 --- a/src/components/UI/downloads/DownloadsTable.tsx +++ b/src/components/UI/downloads/DownloadsTable.tsx @@ -12,6 +12,7 @@ interface Props { windowsData: ReleaseData[]; iOSData: ReleaseData[]; androidData: ReleaseData[]; + totalReleasesNumber: number; amountOfReleasesToShow: number; setTotalReleases: (idx: number) => void; } @@ -22,6 +23,7 @@ export const DownloadsTable: FC = ({ windowsData, iOSData, androidData, + totalReleasesNumber, amountOfReleasesToShow, setTotalReleases }) => { @@ -36,7 +38,14 @@ export const DownloadsTable: FC = ({ const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12; return ( - + setTotalReleases(totalReleases[idx])}> {DOWNLOADS_TABLE_TABS.map((tab, idx) => { diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index 06f546df22..720f3020ed 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -368,6 +368,7 @@ const DownloadsPage: NextPage = ({ data }) => { windowsData={ALL_WINDOWS_STABLE_RELEASES} iOSData={ALL_IOS_STABLE_RELEASES} androidData={ALL_ANDROID_STABLE_RELEASES} + totalReleasesNumber={totalStableReleases} amountOfReleasesToShow={amountStableReleases} setTotalReleases={setTotalStableReleases} /> @@ -423,6 +424,7 @@ const DownloadsPage: NextPage = ({ data }) => { windowsData={ALL_WINDOWS_DEV_BUILDS} iOSData={ALL_IOS_DEV_BUILDS} androidData={ALL_ANDROID_DEV_BUILDS} + totalReleasesNumber={totalDevBuilds} amountOfReleasesToShow={amountDevBuilds} setTotalReleases={setTotalDevBuilds} /> From d8996d1c950e16bc8037f66a7b573e3d7732c279 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Wed, 7 Dec 2022 17:09:43 -0300 Subject: [PATCH 06/17] fix: adds missing legacyBehavior prop --- src/components/UI/ButtonLinkSecondary.tsx | 2 +- src/components/UI/Header.tsx | 6 ++++-- src/components/UI/HeaderButtons.tsx | 4 ++-- src/components/UI/docs/Breadcrumbs.tsx | 6 +++++- src/components/UI/docs/DocsLinks.tsx | 10 +++++----- src/components/UI/docs/DocumentNav.tsx | 8 ++++---- src/components/UI/docs/LinksList.tsx | 16 ++++++++++------ src/components/UI/docs/MDComponents.tsx | 19 +++++++++++++------ src/components/UI/downloads/DownloadsHero.tsx | 2 +- src/components/UI/homepage/HomeHero.tsx | 4 ++-- src/components/UI/homepage/QuickLinks.tsx | 6 +++--- src/components/layouts/Footer.tsx | 4 ++-- 12 files changed, 52 insertions(+), 35 deletions(-) diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx index 3cea28fd7f..509cdc2c4f 100644 --- a/src/components/UI/ButtonLinkSecondary.tsx +++ b/src/components/UI/ButtonLinkSecondary.tsx @@ -18,7 +18,7 @@ export const ButtonLinkSecondary: React.FC = ({ href, children, ...restPr {children} ) : ( - + {children} diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 18cac9ca19..2ff2b515b2 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -27,9 +27,11 @@ export const Header: FC = () => { borderColor='primary' flexGrow={2} > - + - go-ethereum + + go-ethereum + diff --git a/src/components/UI/HeaderButtons.tsx b/src/components/UI/HeaderButtons.tsx index 1c1d7f2cde..89f033dca4 100644 --- a/src/components/UI/HeaderButtons.tsx +++ b/src/components/UI/HeaderButtons.tsx @@ -25,7 +25,7 @@ export const HeaderButtons: FC = ({ close }) => { return ( {/* DOWNLOADS */} - + downloads @@ -34,7 +34,7 @@ export const HeaderButtons: FC = ({ close }) => { {/* DOCUMENTATION */} - + diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx index c451bb78fd..f1fa912500 100644 --- a/src/components/UI/docs/Breadcrumbs.tsx +++ b/src/components/UI/docs/Breadcrumbs.tsx @@ -16,7 +16,11 @@ export const Breadcrumbs: FC = () => { {pathSplit.map((path: string, idx: number) => { return ( - + {path} diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx index ab77e803ae..3f8ab35759 100644 --- a/src/components/UI/docs/DocsLinks.tsx +++ b/src/components/UI/docs/DocsLinks.tsx @@ -9,7 +9,7 @@ import { Stack, Text } from '@chakra-ui/react'; -import { AddIcon, MinusIcon } from '../svgs/' +import { AddIcon, MinusIcon } from '../svgs/'; import NextLink from 'next/link'; import { useRouter } from 'next/router'; @@ -27,7 +27,7 @@ export const DocsLinks: FC = ({ navLinks }) => { return ( {navLinks.map(({ id, to, items }, idx) => { - const split = to?.split('/') + const split = to?.split('/'); const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; return ( @@ -52,7 +52,7 @@ export const DocsLinks: FC = ({ navLinks }) => { _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }} > {to ? ( - + = ({ navLinks }) => { verticalAlign: '-1.25px', marginInlineEnd: 2, fontSize: 'lg', - display: isActive ? 'unset' : 'none', + display: isActive ? 'unset' : 'none' }} _groupHover={{ color: 'bg' }} > @@ -100,4 +100,4 @@ export const DocsLinks: FC = ({ navLinks }) => { })} ); -} +}; diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx index e5d0c39877..564e2ad8df 100644 --- a/src/components/UI/docs/DocumentNav.tsx +++ b/src/components/UI/docs/DocumentNav.tsx @@ -27,7 +27,7 @@ export const DocumentNav: FC = ({ content }) => { {parsedHeadings.map((heading, idx) => { return ( - + = ({ content }) => { _hover={{ background: 'primary', boxShadow: '0 0 0 6px var(--chakra-colors-primary)', - color: 'bg', + color: 'bg' }} _focus={{ background: 'primary', boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', color: 'bg', outline: '2px solid var(--chakra-colors-secondary) !important', - outlineOffset: '4px', + outlineOffset: '4px' }} _active={{ background: 'secondary', boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', - color: 'bg', + color: 'bg' }} > {heading?.title} diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx index 6c9d838e1d..e9b6f02653 100644 --- a/src/components/UI/docs/LinksList.tsx +++ b/src/components/UI/docs/LinksList.tsx @@ -15,11 +15,16 @@ export const LinksList: FC = ({ links }) => { return ( {links.map(({ id, to, items }) => { - const split = to?.split('/') + const split = to?.split('/'); const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; return to ? ( - - + + = ({ links }) => { verticalAlign: '-1.25px', marginInlineEnd: 2, fontSize: 'lg', - display: isActive ? 'unset' : 'none', + display: isActive ? 'unset' : 'none' }} _groupHover={{ color: 'bg', - boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)', - + boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)' }} > {id} diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx index 994809ca89..4a9625f968 100644 --- a/src/components/UI/docs/MDComponents.tsx +++ b/src/components/UI/docs/MDComponents.tsx @@ -35,14 +35,14 @@ const MDComponents = { {children} ) : ( - + {children} ); }, // headings h1: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( @@ -51,16 +51,23 @@ const MDComponents = { ); }, h2: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( - + {parsedChildren} ); }, h3: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( {parsedChildren} @@ -68,7 +75,7 @@ const MDComponents = { ); }, h4: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 3792864f71..6d9cfa7b99 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -81,7 +81,7 @@ export const DownloadsHero: FC = ({ {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; return ( - + @@ -48,7 +48,7 @@ export const HomeHero: FC = () => { - + diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx index 34307c5ff2..61e90988a6 100644 --- a/src/components/UI/homepage/QuickLinks.tsx +++ b/src/components/UI/homepage/QuickLinks.tsx @@ -28,7 +28,7 @@ export const QuickLinks: FC = () => { - + { - + { - + { borderColor='primary' p={4} > - + DOWNLOADS @@ -61,7 +61,7 @@ export const Footer: FC = () => { borderColor='primary' p={4} > - + DOCUMENTATION From 640b72abc699251cf2e7d4f2888bcb83aee85103 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Wed, 7 Dec 2022 18:40:13 -0300 Subject: [PATCH 07/17] fix: add :hover color for hero buttons on dark mode --- src/components/UI/downloads/DownloadsHero.tsx | 9 +++++++-- src/components/UI/homepage/HomeHero.tsx | 4 ++-- src/theme/foundations/textStyles.ts | 11 +++++++---- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 3792864f71..9588bded9f 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -80,12 +80,17 @@ export const DownloadsHero: FC = ({ {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; + return ( - @@ -49,7 +49,7 @@ export const HomeHero: FC = () => { - diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index ade07a1901..64d1949408 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -77,7 +77,8 @@ export const textStyles = { fontFamily: 'heading', color: 'bg', fontWeight: 700, - textTransform: 'uppercase' + textTransform: 'uppercase', + _groupHover: { color: 'yellow.50' } }, 'home-section-link-label': { fontFamily: 'heading', @@ -124,13 +125,15 @@ export const textStyles = { fontFamily: 'heading', color: 'bg', fontSize: { base: 'md', lg: 'xl' }, - textTransform: 'uppercase' + textTransform: 'uppercase', + _groupHover: { color: 'yellow.50' } }, 'downloads-button-sublabel': { fontFamily: 'heading', color: 'bg', fontSize: { base: 'xs', lg: 'sm' }, - textTransform: 'uppercase' + textTransform: 'uppercase', + _groupHover: { color: 'yellow.50' } }, 'download-tab-label': { fontFamily: 'heading', @@ -190,7 +193,7 @@ export const textStyles = { fontWeight: 400, fontSize: '13px', lineHeight: 5, - letterSpacing: '1%', + letterSpacing: '1%' }, 'note-text': { fontFamily: 'body', From 026757a5dbc47d652d1022a8db4fdebbf4644e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Wed, 7 Dec 2022 18:41:50 -0300 Subject: [PATCH 08/17] chore: prettier --- src/components/UI/Header.tsx | 4 +++- src/components/UI/docs/DocsLinks.tsx | 8 ++++---- src/components/UI/docs/DocumentNav.tsx | 6 +++--- src/components/UI/docs/LinksList.tsx | 14 +++++++++----- src/components/UI/docs/MDComponents.tsx | 17 ++++++++++++----- src/components/UI/svgs/AddIcon.tsx | 6 +++--- src/components/UI/svgs/MinusIcon.tsx | 4 ++-- src/pages/[...slug].tsx | 5 ++++- 8 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 18cac9ca19..8cb57d07c3 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -29,7 +29,9 @@ export const Header: FC = () => { > - go-ethereum + + go-ethereum + diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx index ab77e803ae..167ed00ffe 100644 --- a/src/components/UI/docs/DocsLinks.tsx +++ b/src/components/UI/docs/DocsLinks.tsx @@ -9,7 +9,7 @@ import { Stack, Text } from '@chakra-ui/react'; -import { AddIcon, MinusIcon } from '../svgs/' +import { AddIcon, MinusIcon } from '../svgs/'; import NextLink from 'next/link'; import { useRouter } from 'next/router'; @@ -27,7 +27,7 @@ export const DocsLinks: FC = ({ navLinks }) => { return ( {navLinks.map(({ id, to, items }, idx) => { - const split = to?.split('/') + const split = to?.split('/'); const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; return ( @@ -62,7 +62,7 @@ export const DocsLinks: FC = ({ navLinks }) => { verticalAlign: '-1.25px', marginInlineEnd: 2, fontSize: 'lg', - display: isActive ? 'unset' : 'none', + display: isActive ? 'unset' : 'none' }} _groupHover={{ color: 'bg' }} > @@ -100,4 +100,4 @@ export const DocsLinks: FC = ({ navLinks }) => { })} ); -} +}; diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx index e5d0c39877..25dc3e2d19 100644 --- a/src/components/UI/docs/DocumentNav.tsx +++ b/src/components/UI/docs/DocumentNav.tsx @@ -36,19 +36,19 @@ export const DocumentNav: FC = ({ content }) => { _hover={{ background: 'primary', boxShadow: '0 0 0 6px var(--chakra-colors-primary)', - color: 'bg', + color: 'bg' }} _focus={{ background: 'primary', boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', color: 'bg', outline: '2px solid var(--chakra-colors-secondary) !important', - outlineOffset: '4px', + outlineOffset: '4px' }} _active={{ background: 'secondary', boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', - color: 'bg', + color: 'bg' }} > {heading?.title} diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx index 6c9d838e1d..a7b870615a 100644 --- a/src/components/UI/docs/LinksList.tsx +++ b/src/components/UI/docs/LinksList.tsx @@ -15,10 +15,15 @@ export const LinksList: FC = ({ links }) => { return ( {links.map(({ id, to, items }) => { - const split = to?.split('/') + const split = to?.split('/'); const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; return to ? ( - + = ({ links }) => { verticalAlign: '-1.25px', marginInlineEnd: 2, fontSize: 'lg', - display: isActive ? 'unset' : 'none', + display: isActive ? 'unset' : 'none' }} _groupHover={{ color: 'bg', - boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)', - + boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)' }} > {id} diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx index 994809ca89..8fb2278bcc 100644 --- a/src/components/UI/docs/MDComponents.tsx +++ b/src/components/UI/docs/MDComponents.tsx @@ -42,7 +42,7 @@ const MDComponents = { }, // headings h1: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( @@ -51,16 +51,23 @@ const MDComponents = { ); }, h2: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( - + {parsedChildren} ); }, h3: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( {parsedChildren} @@ -68,7 +75,7 @@ const MDComponents = { ); }, h4: ({ children }: any) => { - const { children: parsedChildren, headingId} = parseHeadingId(children); + const { children: parsedChildren, headingId } = parseHeadingId(children); return ( diff --git a/src/components/UI/svgs/AddIcon.tsx b/src/components/UI/svgs/AddIcon.tsx index fe8f3016c9..c4ddec18af 100644 --- a/src/components/UI/svgs/AddIcon.tsx +++ b/src/components/UI/svgs/AddIcon.tsx @@ -8,9 +8,9 @@ const Icon = createIcon({ viewBox: `0 0 ${w} ${h}`, path: ( - - - + + + ) diff --git a/src/components/UI/svgs/MinusIcon.tsx b/src/components/UI/svgs/MinusIcon.tsx index 689f611370..71a72d1b92 100644 --- a/src/components/UI/svgs/MinusIcon.tsx +++ b/src/components/UI/svgs/MinusIcon.tsx @@ -8,8 +8,8 @@ const Icon = createIcon({ viewBox: `0 0 ${w} ${h}`, path: ( - - + + ) diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx index 1d1eab5cd0..86380e3a38 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -116,7 +116,10 @@ const DocPage: NextPage = ({ frontmatter, content, navLinks, lastModified - + Date: Wed, 7 Dec 2022 15:47:35 -0800 Subject: [PATCH 09/17] update search to form get request similar to existing site, using duckduckgo using the get method of a form element. Converted magnifying class wrapped in anchor tag to be a submit button instead --- src/components/UI/search/Search.tsx | 70 +++++++++++++++-------------- 1 file changed, 36 insertions(+), 34 deletions(-) diff --git a/src/components/UI/search/Search.tsx b/src/components/UI/search/Search.tsx index 075de7cf37..7b8ad0c3c1 100644 --- a/src/components/UI/search/Search.tsx +++ b/src/components/UI/search/Search.tsx @@ -1,5 +1,5 @@ import { FC, useState } from 'react'; -import { Input, InputGroup, Link, Stack } from '@chakra-ui/react'; +import { Button, Input, InputGroup, Stack } from '@chakra-ui/react'; import { BORDER_WIDTH } from '../../../constants'; import { LensIcon } from '../icons'; @@ -8,12 +8,6 @@ export const Search: FC = () => { const [query, setQuery] = useState(''); // Handlers - const handleSubmit = (e: React.FormEvent): void => { - document.getElementById('search-link')?.click(); - }; - const handleKeyPress = (e: React.KeyboardEvent): void => { - if (e.key === 'Enter') handleSubmit(e); - }; const handleChange = (e: React.ChangeEvent): void => { setQuery(e.target.value); }; @@ -24,33 +18,41 @@ export const Search: FC = () => { borderRight={{ base: 'none', md: BORDER_WIDTH }} borderColor={{ base: 'bg', md: 'primary' }} _hover={{ base: { bg: 'primary' }, md: { bg: 'none' } }} - > - - - - - - + > +
+ + + + + +
); }; From c9ef66acbf27e895ff0abe0b3850ea4b4e4f0c7e Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 9 Dec 2022 13:29:14 -0800 Subject: [PATCH 10/17] add submit type to search button --- src/components/UI/search/Search.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/UI/search/Search.tsx b/src/components/UI/search/Search.tsx index 7b8ad0c3c1..41a6b364cf 100644 --- a/src/components/UI/search/Search.tsx +++ b/src/components/UI/search/Search.tsx @@ -36,6 +36,7 @@ export const Search: FC = () => { outlineOffset={4} />
- - {columnHeader} - -
+ + {columnHeader} + +