Fix header and mobile search borders
Luke Karrys committed
Oct 16, 2023 at 21:23 UTC
551c269b9b5640b00ecb9fde482eaaa5e857fe3b
4 files changed
+31
-24
src/components/header.js
+3
-1
@@ -49,6 +49,8 @@ function Header() {
49
justifyContent: 'space-between',
50
bg: 'canvas.default',
51
border: '1px solid',
52
+ borderLeftWidth: 0,
53
+ borderRightWidth: 0,
54
borderColor: 'border.muted',
55
}}
56
>
@@ -74,7 +76,7 @@ function Header() {
76
<Box sx={{display: 'flex'}}>
77
<Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
78
{headerNavItems.map((item, index) => (
77
- <Link key={index} href={item.url} sx={{display: 'block', ml: 4}}>
79
+ <Link key={index} href={item.url} sx={{display: 'block', ml: 4, color: 'fg.default'}}>
80
{item.title}
81
</Link>
82
))}
src/components/mobile-search.js
+5
@@ -55,6 +55,11 @@ function MobileSearch({onDismiss, ...props}) {
55
flex: '0 0 auto',
56
px: 3,
57
alignItems: 'center',
58
+ border: '1px solid',
59
+ borderTopWidth: 0,
60
+ borderLeftWidth: 0,
61
+ borderRightWidth: 0,
62
+ borderColor: 'border.muted',
63
}}
64
>
65
<motion.div
src/components/nav-items.js
+4
-6
@@ -1,4 +1,5 @@
1
import React from 'react'
2
+import {Box} from '@primer/react'
3
import {Link as GatsbyLink} from 'gatsby'
4
import {NavList} from '@primer/react/drafts'
5
import {LinkExternalIcon} from '@primer/octicons-react'
@@ -56,12 +57,9 @@ const Navigation = () => {
57
<NavItems items={items} path={path} />
58
<NavList.Divider />
59
{headerNavItems.map(item => (
59
- <ExternalNavItem
60
- key={item.title}
61
- title={item.title}
62
- href={item.url}
63
- sx={{display: ['flex', null, null, 'none']}}
64
- />
60
+ <Box key={item.title} sx={{display: ['flex', null, null, 'none']}}>
61
+ <ExternalNavItem title={item.title} href={item.url} />
62
+ </Box>
63
))}
64
<ExternalNavItem title="GitHub" href={repositoryUrl} />
65
</NavList>
src/components/search.js
+19
-17
@@ -1,5 +1,5 @@
1
import React from 'react'
2
-import {Box} from '@primer/react'
2
+import {Box, ThemeProvider} from '@primer/react'
3
import TextInput from './text-input'
4
import SearchResults from './search-results'
5
import useSiteMetadata from '../hooks/use-site-metadata'
@@ -18,22 +18,24 @@ function Search(props) {
18
/>
19
<Box sx={{position: 'absolute', left: 0, right: 0, pt: 2}} {...getMenuProps()}>
20
{isOpen ? (
21
- <Box
22
- sx={{
23
- overflow: 'auto',
24
- minWidth: 300,
25
- maxHeight: '70vh',
26
- p: 2,
27
- boxShadow: 'shadow.large',
28
- borderColor: 'border.muted',
29
- bg: 'canvas.overlay',
30
- borderRadius: '12px',
31
- borderWidth: '1px',
32
- borderStyle: 'solid',
33
- }}
34
- >
35
- <SearchResults {...{results, getItemProps, highlightedIndex}} />
36
- </Box>
21
+ <ThemeProvider colorMode="light">
22
+ <Box
23
+ sx={{
24
+ overflow: 'auto',
25
+ minWidth: 300,
26
+ maxHeight: '70vh',
27
+ p: 2,
28
+ boxShadow: 'shadow.large',
29
+ borderColor: 'border.muted',
30
+ bg: 'canvas.overlay',
31
+ borderRadius: '12px',
32
+ borderWidth: '1px',
33
+ borderStyle: 'solid',
34
+ }}
35
+ >
36
+ <SearchResults {...{results, getItemProps, highlightedIndex}} />
37
+ </Box>
38
+ </ThemeProvider>
39
) : null}
40
</Box>
41
</Box>