Skip to content

Commit 6170f1c

Browse files
zenoachtigzenoachtig
committed
Initial styling
1 parent 7d7806d commit 6170f1c

File tree

8 files changed

+192
-200
lines changed

8 files changed

+192
-200
lines changed

‎packages/gitbook/src/components/Search/HighlightQuery.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ export function HighlightQuery(props: {
1818
'text-bold',
1919
'bg-primary',
2020
'text-contrast-primary',
21-
'px-0.5',
22-
'-mx-0.5',
21+
'px-1',
2322
'py-0.5',
2423
'rounded',
2524
'straight-corners:rounded-sm',

‎packages/gitbook/src/components/Search/SearchAskAnswer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function SearchAskAnswer(props: { query: string }) {
9494
);
9595

9696
return (
97-
<div className={tcls('max-h-[60vh]', 'overflow-y-auto')}>
97+
<>
9898
{askState?.type === 'answer' ? (
9999
<React.Suspense fallback={loading}>
100100
<TransitionAnswerBody answer={askState.answer} placeholder={loading} />
@@ -104,7 +104,7 @@ export function SearchAskAnswer(props: { query: string }) {
104104
<div className={tcls('p-4')}>{t(language, 'search_ask_error')}</div>
105105
) : null}
106106
{askState?.type === 'loading' ? loading : null}
107-
</div>
107+
</>
108108
);
109109
}
110110

‎packages/gitbook/src/components/Search/SearchModal.tsx

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
'use client';
2-
3-
import { Icon } from '@gitbook/icons';
42
import { AnimatePresence, motion } from 'framer-motion';
53
import { useRouter } from 'next/navigation';
64
import React from 'react';
@@ -219,8 +217,9 @@ function SearchModalBody(
219217
'flex',
220218
'flex-col',
221219
'bg-tint-base',
222-
'max-w-prose',
220+
'max-w-screen-lg',
223221
'mx-auto',
222+
'min-h-[30dvh]',
224223
'max-h-[70dvh]',
225224
'w-full',
226225
'rounded-lg',
@@ -236,69 +235,72 @@ function SearchModalBody(
236235
event.stopPropagation();
237236
}}
238237
>
239-
<div
240-
className={tcls(
241-
'flex',
242-
'flex-row',
243-
'items-start',
244-
state.query !== null ? 'border-b' : null,
245-
'border-tint-subtle'
246-
)}
247-
>
248-
<div className={tcls('p-2', 'pl-4', 'pt-4')}>
249-
<Icon icon="magnifying-glass" className={tcls('size-4', 'text-tint-subtle')} />
250-
</div>
238+
<div className="grid grow grid-rows-[auto_1fr_1fr] overflow-hidden md:grid-cols-[1fr_1fr] md:grid-rows-[auto_1fr]">
251239
<div
252240
className={tcls(
253-
'w-full',
254241
'flex',
255242
'flex-row',
256-
'flex-wrap',
257-
'gap-y-0',
258-
'gap-x-4',
259-
'items-end'
243+
'items-start',
244+
state.query !== null ? 'border-b' : null,
245+
'border-tint-subtle',
246+
'col-span-full'
260247
)}
261248
>
262-
<input
263-
ref={inputRef}
264-
value={state.query}
265-
onKeyDown={onKeyDown}
266-
onChange={onChange}
249+
<div
267250
className={tcls(
268-
'text-tint-strong',
269-
'placeholder:text-tint',
251+
'w-full',
270252
'flex',
271-
'resize-none',
272-
'flex-1',
273-
'h-12',
274-
'p-2',
275-
'focus:outline-none',
276-
'bg-transparent',
277-
'whitespace-pre-line'
253+
'flex-row',
254+
'flex-wrap',
255+
'gap-y-0',
256+
'gap-x-4',
257+
'items-end'
278258
)}
279-
placeholder={tString(
280-
language,
281-
withAsk ? 'search_ask_input_placeholder' : 'search_input_placeholder'
282-
)}
283-
spellCheck="false"
284-
autoComplete="off"
285-
autoCorrect="off"
259+
>
260+
<input
261+
ref={inputRef}
262+
value={state.query}
263+
onKeyDown={onKeyDown}
264+
onChange={onChange}
265+
className={tcls(
266+
'text-tint-strong',
267+
'placeholder:text-tint',
268+
'flex',
269+
'resize-none',
270+
'flex-1',
271+
'py-4',
272+
'px-8',
273+
'focus:outline-none',
274+
'bg-transparent',
275+
'whitespace-pre-line'
276+
)}
277+
placeholder={tString(
278+
language,
279+
withAsk
280+
? 'search_ask_input_placeholder'
281+
: 'search_input_placeholder'
282+
)}
283+
spellCheck="false"
284+
autoComplete="off"
285+
autoCorrect="off"
286+
/>
287+
{isMultiVariants ? <SearchScopeToggle spaceTitle={spaceTitle} /> : null}
288+
</div>
289+
</div>
290+
291+
<div className="overflow-y-auto md:col-start-1 md:row-start-2">
292+
<SearchResults
293+
ref={resultsRef}
294+
global={isMultiVariants && state.global}
295+
query={normalizedQuery}
296+
withAsk={withAsk}
297+
onSwitchToAsk={onSwitchToAsk}
286298
/>
287-
{isMultiVariants ? <SearchScopeToggle spaceTitle={spaceTitle} /> : null}
299+
</div>
300+
<div className="overflow-y-auto border-tint-subtle bg-tint-subtle max-md:border-t md:col-start-2 md:row-start-2 md:border-l">
301+
<SearchAskAnswer query={normalizedQuery} />
288302
</div>
289303
</div>
290-
{!state.ask || !withAsk ? (
291-
<SearchResults
292-
ref={resultsRef}
293-
global={isMultiVariants && state.global}
294-
query={normalizedQuery}
295-
withAsk={withAsk}
296-
onSwitchToAsk={onSwitchToAsk}
297-
/>
298-
) : null}
299-
{normalizedQuery && state.ask && withAsk ? (
300-
<SearchAskAnswer query={normalizedQuery} />
301-
) : null}
302304
</motion.div>
303305
);
304306
}

‎packages/gitbook/src/components/Search/SearchPageResultItem.tsx

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { tcls } from '@/lib/tailwind';
22
import { Icon, type IconName } from '@gitbook/icons';
33
import React from 'react';
44

5-
import { Link } from '../primitives';
5+
import { useLanguage } from '@/intl/client';
6+
import { tString } from '@/intl/translate';
7+
import { Button, Link } from '../primitives';
68
import { HighlightQuery } from './HighlightQuery';
79
import type { ComputedPageResult } from './server-actions';
810

@@ -14,6 +16,7 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
1416
},
1517
ref: React.Ref<HTMLAnchorElement>
1618
) {
19+
const language = useLanguage();
1720
const { query, item, active } = props;
1821

1922
const breadcrumbs =
@@ -34,16 +37,19 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
3437
'flex-row',
3538
'items-center',
3639
'p-4',
37-
'border-t',
38-
'border-tint-subtle',
39-
'first:border-none',
40+
'rounded-lg',
41+
'straight-corners:rounded-none',
4042
'text-base',
4143
'font-medium',
44+
'text-tint-strong',
4245
'hover:bg-tint-hover',
4346
'group',
44-
active
45-
? ['is-active', 'bg-primary', 'text-contrast-primary', 'hover:bg-primary-hover']
46-
: null
47+
active && [
48+
'is-active',
49+
'bg-primary',
50+
'text-primary-strong',
51+
'hover:bg-primary-hover',
52+
]
4753
)}
4854
insights={{
4955
type: 'search_open_result',
@@ -56,16 +62,17 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
5662
>
5763
<div className="size-4">
5864
<Icon
59-
icon="file-lines"
60-
className={tcls('size-4', active ? 'text-primary' : 'text-tint-subtle')}
65+
icon="file"
66+
className={tcls('size-4', active ? 'text-primary-subtle' : 'text-tint-subtle')}
6167
/>
6268
</div>
6369
<div className={tcls('flex', 'flex-col', 'w-full')}>
6470
{breadcrumbs.length > 0 ? (
6571
<div
6672
className={tcls(
6773
'text-xs',
68-
'opacity-6',
74+
active ? 'text-primary-subtle' : 'text-neutral-subtle',
75+
// 'opacity-6',
6976
'contrast-more:opacity-11',
7077
'font-normal',
7178
'uppercase',
@@ -103,19 +110,15 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
103110
) : null}
104111
<HighlightQuery query={query} text={item.title} />
105112
</div>
106-
<div
107-
className={tcls(
108-
'p-2',
109-
'rounded',
110-
'straight-corners:rounded-none',
111-
active ? ['bg-primary-solid', 'text-contrast-primary-solid'] : ['opacity-6']
112-
)}
113-
>
114-
<Icon
115-
icon={active ? 'arrow-turn-down-left' : 'chevron-right'}
116-
className={tcls('size-4')}
113+
{active ? (
114+
<Button
115+
icon="arrow-turn-down-left"
116+
size="small"
117+
label={tString(language, 'view')}
117118
/>
118-
</div>
119+
) : (
120+
<Icon icon="chevron-right" className="size-4 text-tint-subtle/6" />
121+
)}
119122
</Link>
120123
);
121124
});

‎packages/gitbook/src/components/Search/SearchQuestionResultItem.tsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Icon } from '@gitbook/icons';
22
import React from 'react';
33

4-
import { t, useLanguage } from '@/intl/client';
4+
import { t, tString, useLanguage } from '@/intl/client';
55
import { tcls } from '@/lib/tailwind';
66

7-
import { Link } from '../primitives';
7+
import { Button, Link } from '../primitives';
88
import { useSearchLink } from './useSearch';
99

1010
export const SearchQuestionResultItem = React.forwardRef(function SearchQuestionResultItem(
@@ -28,14 +28,16 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
2828
className={tcls(
2929
'flex',
3030
'px-4',
31-
recommended ? ['py-2', 'text-tint'] : 'py-4',
31+
'py-2',
32+
'text-tint',
33+
'rounded-lg',
34+
'straight-corners:rounded-none',
3235
'hover:bg-tint-hover',
33-
'first:mt-0',
34-
'last:pb-3',
36+
'gap-4',
3537
active && [
3638
'is-active',
3739
'bg-primary',
38-
'text-contrast-primary',
40+
'text-primary-strong',
3941
'hover:bg-primary-hover',
4042
]
4143
)}
@@ -50,7 +52,6 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
5052
'size-4',
5153
'shrink-0',
5254
'mt-1.5',
53-
'mr-4',
5455
active ? ['text-primary'] : ['text-tint-subtle']
5556
)}
5657
/>
@@ -66,19 +67,16 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
6667
</>
6768
)}
6869
</div>
69-
<div
70-
className={tcls(
71-
'p-2',
72-
'rounded',
73-
'self-center',
74-
'straight-corners:rounded-none',
75-
active ? ['bg-primary-solid', 'text-contrast-primary-solid'] : ['opacity-6']
70+
<div className="self-center">
71+
{active ? (
72+
<Button
73+
icon="arrow-turn-down-left"
74+
size="small"
75+
label={tString(language, 'search')}
76+
/>
77+
) : (
78+
<Icon icon="chevron-right" className="size-4 text-tint-subtle/6" />
7679
)}
77-
>
78-
<Icon
79-
icon={active ? 'arrow-turn-down-left' : 'chevron-right'}
80-
className={tcls('size-4')}
81-
/>
8280
</div>
8381
</Link>
8482
);

0 commit comments

Comments
 (0)