Skip to content

Commit

Permalink
Improve styling of search & ask AI box (#2576)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zenoachtig
zenoachtig authored Nov 20, 2024
1 parent 07cf835 commit 4d56f11
Show file tree
Hide file tree
Showing 20 changed files with 186 additions and 141 deletions.
5 changes: 5 additions & 0 deletions .changeset/fifty-frogs-itch.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'gitbook': patch
---

Update styling of search+ask modal
21 changes: 18 additions & 3 deletions packages/gitbook/src/components/Search/HighlightQuery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,32 @@ export function HighlightQuery(props: {
/** Style to apply on matching parts (default to primary) */
highlight?: ClassValue;
}): React.ReactElement {
const { query, text, highlight = ['text-bold', 'text-primary'] } = props;
const {
query,
text,
highlight = [
'text-bold',
'bg-primary-100',
'text-contrast-primary-100',
'dark:bg-primary-700',
'dark:text-contrast-primary-700',
'px-0.5',
'-mx-0.5',
'py-0.5',
'rounded',
'straight-corners:rounded-sm',
],
} = props;
const matches = matchString(text, query);

return (
<span className={tcls('whitespace-break-spaces')}>
<div className={tcls('whitespace-break-spaces')}>
{matches.map((entry, index) => (
<span key={index} className={tcls(entry.match ? highlight : null)}>
{entry.text}
</span>
))}
</span>
</div>
);
}

Expand Down
73 changes: 40 additions & 33 deletions packages/gitbook/src/components/Search/SearchAskAnswer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,20 +101,12 @@ export function SearchAskAnswer(props: { spaceId: string; query: string }) {

const loading = (
<div className={tcls('w-full', 'flex', 'items-center', 'justify-center')}>
<Loading className={tcls('w-5', 'py-4', 'text-primary')} />
<Loading className={tcls('w-6', 'py-8', 'text-primary')} />
</div>
);

return (
<div
className={tcls(
'max-h-[60vh]',
'overflow-y-auto',
'border-t',
'border-dark/2',
'dark:border-light/1',
)}
>
<div className={tcls('max-h-[60vh]', 'overflow-y-auto')}>
{state?.type === 'answer' ? (
<>
{state.answer ? (
Expand Down Expand Up @@ -166,13 +158,20 @@ function AnswerBody(props: { answer: AskAnswerResult }) {
<>
<div
data-test="search-ask-answer"
className={tcls('mt-4', 'px-4', 'text-dark/9', 'dark:text-light/8')}
className={tcls(
'mt-4',
'sm:mt-6',
'px-4',
'sm:px-12',
'text-dark/9',
'dark:text-light/8',
)}
>
{answer.hasAnswer ? answer.body : t(language, 'search_ask_no_answer')}
{answer.followupQuestions.length > 0 ? (
<AnswerFollowupQuestions followupQuestions={answer.followupQuestions} />
) : null}
</div>
{answer.followupQuestions.length > 0 ? (
<AnswerFollowupQuestions followupQuestions={answer.followupQuestions} />
) : null}
{answer.sources.length > 0 ? (
<AnswerSources
hasAnswer={answer.hasAnswer}
Expand All @@ -189,23 +188,25 @@ function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
const getSearchLinkProps = useSearchLink();

return (
<div className={tcls('mt-7 mb-4', 'flex', 'flex-col', 'flex-wrap', 'gap-1')}>
<div className={tcls('flex', 'flex-col', 'flex-wrap', 'mt-4', 'sm:mt-6')}>
{followupQuestions.map((question) => (
<Link
key={question}
className={tcls(
'text-sm',
'font-medium',
'inline-flex',
'items-start',
'flex',
'items-center',
'gap-2',
'px-4',
'py-1',
'text-primary-500',
'focus-within:text-primary-700',
'hover:bg-primary/2',
'dark:text-primary-400',
'dark:hover:bg-primary-500/3',
'-mx-4',
'py-2',
'rounded',
'straight-corners:rounded-none',
'text-dark/7',
'dark:text-light/8',
'hover:bg-dark-4/2',
'dark:hover:bg-light-4/2',
'focus-within:bg-dark-4/2',
'dark:focus-within:bg-light-4/2',
)}
{...getSearchLinkProps({
query: question,
Expand All @@ -214,7 +215,13 @@ function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
>
<Icon
icon="magnifying-glass"
className={tcls('size-[15px]', 'shrink-0', 'mt-0.5', '[opacity:0.64]')}
className={tcls(
'size-4',
'shrink-0',
'mr-2',
'text-dark/5',
'dark:text-light/5',
)}
/>
<span>{question}</span>
</Link>
Expand All @@ -236,15 +243,16 @@ function AnswerSources(props: {
'flex',
'flex-wrap',
'gap-2',
'mt-7',
'mt-4',
'sm:mt-6',
'py-4',
'px-4',
'border-t',
'border-dark/2',
'dark:border-light/1',
)}
>
<span className={tcls('text-sm')}>
<span>
{t(language, hasAnswer ? 'search_ask_sources' : 'search_ask_sources_no_answer')}
</span>

Expand All @@ -253,7 +261,9 @@ function AnswerSources(props: {
<Link
className={tcls(
'flex',
'text-sm',
'flex-wrap',
'gap-1',
'items-center',
'text-dark/7',
'hover:underline',
'focus-within:text-primary-700',
Expand All @@ -266,11 +276,8 @@ function AnswerSources(props: {
icon="arrow-up-right"
className={tcls(
'text-dark/6',
'w-[15px]',
'h-[15px]',
'size-4',
'shrink-0',
'mt-0.5',
'mr-0.5',
'dark:text-light/6',
)}
/>
Expand Down
49 changes: 36 additions & 13 deletions packages/gitbook/src/components/Search/SearchModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ function SearchModalBody(
};

return (
<div
<motion.div
role="dialog"
aria-label={tString(language, 'search')}
className={tcls(
Expand All @@ -193,29 +193,55 @@ function SearchModalBody(
'max-w-[768px]',
'mt-[-1px]',
'w-full',
'max-h',
'rounded-lg',
'straight-corners:rounded-sm',
'ring-1',
'ring-dark/1',
'shadow-2xl',
'backdrop-blur-lg',
'overflow-hidden',
'dark:ring-inset',
'dark:bg-dark-3',
'dark:ring-light/2',
)}
initial={{
scale: 0.95,
opacity: 0,
}}
animate={{
scale: 1,
opacity: 1,
}}
onClick={(event) => {
event.stopPropagation();
}}
>
<div className={tcls('flex', 'flex-row', 'items-center')}>
<div className={tcls('p-2', 'pl-4')}>
<div
className={tcls(
'flex',
'flex-row',
'items-start',
state.query !== null ? 'border-b' : null,
'border-dark/2',
'dark:border-light/2',
)}
>
<div className={tcls('p-2', 'pl-4', 'pt-4')}>
<Icon
icon="magnifying-glass"
className={tcls('size-4', 'text-dark/4', 'dark:text-light/5')}
/>
</div>
<div className={tcls('flex-1')}>
<div
className={tcls(
'w-full',
'flex',
'flex-row',
'flex-wrap',
'gap-y-0',
'gap-x-4',
'items-end',
)}
>
<input
ref={inputRef}
value={state.query}
Expand All @@ -226,7 +252,7 @@ function SearchModalBody(
'placeholder:text-dark/7',
'flex',
'resize-none',
'w-full',
'flex-1',
'h-12',
'p-2',
'focus:outline-none',
Expand All @@ -243,6 +269,7 @@ function SearchModalBody(
autoComplete="off"
autoCorrect="off"
/>
{isMultiVariants ? <SearchScopeToggle spaceTitle={spaceTitle} /> : null}
</div>
</div>
{!state.ask || !withAsk ? (
Expand All @@ -261,15 +288,11 @@ function SearchModalBody(
global: state.global,
});
}}
>
{isMultiVariants && state.query ? (
<SearchScopeToggle spaceTitle={spaceTitle} />
) : null}
</SearchResults>
></SearchResults>
) : null}
{state.query && state.ask && withAsk ? (
<SearchAskAnswer spaceId={spaceId} query={state.query} />
) : null}
</div>
</motion.div>
);
}
42 changes: 32 additions & 10 deletions packages/gitbook/src/components/Search/SearchPageResultItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Icon } from '@gitbook/icons';
import React from 'react';

import { tcls } from '@/lib/tailwind';
Expand All @@ -23,25 +24,46 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
className={tcls(
'flex',
'flex-row',
'px-6',
'py-3',
'items-center',
'px-4',
'sm:px-12',
'py-4',
'sm:py-6',
'border-t',
'first:border-t-0',
'border-dark/2',
'dark:border-light/2',
'hover:bg-dark-4/2',
'text-base',
'text-dark',
'font-semibold',
'font-medium',
'first:mt-0',
'[&:has(+.search-section-result-item):not(:first-child)]:mt-6',
'dark:text-light',
'dark:hover:bg-light-4/2',
active ? ['bg-dark/1', 'dark:bg-light/1'] : null,
)}
>
{item.spaceTitle ? (
<span className={tcls('opacity-6', 'font-normal', 'mr-2')}>
{item.spaceTitle + ' ›'}
</span>
) : null}
<HighlightQuery query={query} text={item.title} />
<div className={tcls('flex', 'flex-col', 'w-full')}>
{item.spaceTitle ? (
<div
className={tcls(
'text-xs',
'opacity-6',
'font-normal',
'uppercase',
'tracking-wider',
'mb-1',
)}
>
{item.spaceTitle}
</div>
) : null}
<HighlightQuery query={query} text={item.title} />
</div>
<Icon
icon="chevron-right"
className={tcls('size-4', 'text-dark', 'dark:text-light', 'opacity-6')}
/>
</Link>
);
});
6 changes: 2 additions & 4 deletions packages/gitbook/src/components/Search/SearchQuestionResultItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
'py-2',
'hover:bg-dark-4/2',
'text-dark/7',
'text-sm',
'font-medium',
'first:mt-0',
'last:pb-3',
'dark:text-light/8',
Expand All @@ -47,11 +45,11 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
<Icon
icon="magnifying-glass"
className={tcls(
'w-[15px]',
'h-[15px]',
'size-4',
'shrink-0',
'mt-0.5',
'mr-4',
'mt-1',
'text-dark/5',
'dark:text-light/5',
)}
Expand Down
Loading

0 comments on commit 4d56f11

Please sign in to comment.