diff --git a/src/components/Cookies/CookiesToast.tsx b/src/components/Cookies/CookiesToast.tsx index 7e844d6e5..275c5307e 100644 --- a/src/components/Cookies/CookiesToast.tsx +++ b/src/components/Cookies/CookiesToast.tsx @@ -1,15 +1,17 @@ 'use client'; +import IconX from '@geist-ui/icons/x'; import * as React from 'react'; +import { Button } from '@/components/primitives'; import { useLanguage } from '@/intl/client'; import { t } from '@/intl/translate'; import { isCookiesTrackingDisabled, setCookiesTracking } from '@/lib/analytics'; import { tcls } from '@/lib/tailwind'; - /** * Toast to accept or reject the use of cookies. */ + export function CookiesToast(props: { privacyPolicy?: string }) { const { privacyPolicy = 'https://policies.gitbook.com/privacy/cookies' } = props; const [show, setShow] = React.useState(false); @@ -36,17 +38,18 @@ export function CookiesToast(props: { privacyPolicy?: string }) { 'fixed', 'z-10', 'bg-white', - 'dark:bg-slate-800', 'rounded', - 'border-slate-400', - 'dark:border-slate-700', - 'shadow-md', + 'ring-1', + 'ring-dark/2', + 'shadow-1xs', 'p-4', 'bottom-4', 'right-4', - 'left-4', + 'left-16', 'max-w-sm', 'sm:left-auto', + 'dark:ring-light/2', + 'dark:bg-dark', )} >

@@ -55,56 +58,54 @@ export function CookiesToast(props: { privacyPolicy?: string }) { 'cookies_prompt', {t(language, 'cookies_prompt_privacy')} , )}

-
- setShow(false)} + className={tcls( + 'absolute', + 'top-2', + 'right-2', + 'w-5', + 'h-5', + 'flex', + 'justify-center', + 'items-center', + 'rounded-sm', + 'hover:bg-dark/2', + 'dark:hover:bg-light/1', + )} + > + + +
+
); } - -function ToastButton(props: { onClick: () => void; children: React.ReactNode }) { - const { onClick, children } = props; - - return ( - - ); -} diff --git a/src/components/DocumentView/ListItem.tsx b/src/components/DocumentView/ListItem.tsx index 85b1e0473..dc6486ed5 100644 --- a/src/components/DocumentView/ListItem.tsx +++ b/src/components/DocumentView/ListItem.tsx @@ -1,6 +1,6 @@ import { DocumentBlockListItem } from '@gitbook/api'; -import { Checkbox } from '@/components/utils'; +import { Checkbox } from '@/components/primitives'; import { tcls } from '@/lib/tailwind'; import { BlockProps } from './Block'; diff --git a/src/components/DocumentView/Table/RecordColumnValue.tsx b/src/components/DocumentView/Table/RecordColumnValue.tsx index a1b077b07..20b2647e5 100644 --- a/src/components/DocumentView/Table/RecordColumnValue.tsx +++ b/src/components/DocumentView/Table/RecordColumnValue.tsx @@ -1,7 +1,7 @@ import { DocumentBlockTable, DocumentTableViewCards } from '@gitbook/api'; import Link from 'next/link'; -import { Checkbox } from '@/components/utils'; +import { Checkbox } from '@/components/primitives'; import { getNodeFragmentByName } from '@/lib/document'; import { resolveContentRef } from '@/lib/references'; import { ClassValue, tcls } from '@/lib/tailwind'; diff --git a/src/components/PageBody/PageLoading.tsx b/src/components/PageBody/PageLoading.tsx index bd7c15c03..7045d9614 100644 --- a/src/components/PageBody/PageLoading.tsx +++ b/src/components/PageBody/PageLoading.tsx @@ -1,9 +1,9 @@ 'use client'; +import { Loading } from '@/components/primitives'; import { tcls } from '@/lib/tailwind'; import { useIsLoadingPage } from '../state'; -import { Loading } from '../utils/Loading'; /** * When navigating between pages, display an overlay on top of the page. @@ -12,31 +12,31 @@ export function PageLoading(props: {}) { const loading = useIsLoadingPage(); return ( -
+
+
- +
); diff --git a/src/components/PageFeedback/PageFeedbackForm.tsx b/src/components/PageFeedback/PageFeedbackForm.tsx index 8981d4831..f48d0307a 100644 --- a/src/components/PageFeedback/PageFeedbackForm.tsx +++ b/src/components/PageFeedback/PageFeedbackForm.tsx @@ -26,24 +26,38 @@ export function PageFeedbackForm(props: { spaceId: string; pageId: string }) { return (
-

{t(languages, 'was_this_helpful')}

+

+ {t(languages, 'was_this_helpful')} +

{submitted ? (

{t(languages, 'was_this_helpful_thank_you')}

) : ( -
+
*:not(:last-child,_:first-child)]:rounded-none', + )} + > onSubmit(PageFeedbackRating.Bad)} /> onSubmit(PageFeedbackRating.Ok)} /> onSubmit(PageFeedbackRating.Good)} /> @@ -53,8 +67,12 @@ export function PageFeedbackForm(props: { spaceId: string; pageId: string }) { ); } -function RatingButton(props: { emoji: string; label: string; onClick: () => void }) { - const { emoji, label, onClick } = props; +function RatingButton(props: { rating: number; label: string; onClick: () => void }) { + const { rating, label, onClick } = props; + + const ratingIcon = + rating === 0 ? : rating === 1 ? : rating === 2 ? : null; + return ( ); } + +const Icon0 = () => ( + + + + +); +const Icon1 = () => ( + + + + +); +const Icon2 = () => ( + + + + +); diff --git a/src/components/Search/SearchAskAnswer.tsx b/src/components/Search/SearchAskAnswer.tsx index a309f31f4..eedbbae48 100644 --- a/src/components/Search/SearchAskAnswer.tsx +++ b/src/components/Search/SearchAskAnswer.tsx @@ -3,11 +3,11 @@ import IconSearch from '@geist-ui/icons/search'; import Link from 'next/link'; import React from 'react'; +import { Loading } from '@/components/primitives'; import { tcls } from '@/lib/tailwind'; import { AskAnswerResult, askQuestion } from './server-actions'; import { useSearch, useSearchLink } from './useSearch'; -import { Loading } from '../utils/Loading'; /** * Fetch and render the answers to a question. diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index 949c9046c..22c78a155 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -33,6 +33,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV 'justify-center', 'items-center', 'px-2', + 'text-dark/6', 'min-h-[2.5rem]', 'w-[2.5rem]', 'rounded-lg', @@ -45,6 +46,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV 'dark:bg-light/1', 'dark:border-light/1', 'dark:hover:bg-light/2', + 'dark:text-light/6', '[&>span]:hidden', 'md:justify-between', 'md:[&>span]:flex', @@ -54,7 +56,14 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV )} > {children} - + ); } diff --git a/src/components/TableOfContents/Trademark.tsx b/src/components/TableOfContents/Trademark.tsx index 7823623af..d9216e1c3 100644 --- a/src/components/TableOfContents/Trademark.tsx +++ b/src/components/TableOfContents/Trademark.tsx @@ -62,6 +62,7 @@ export function Trademark(props: { space: Space; customization: CustomizationSet 'rounded-md', 'hover:backdrop-blur-sm', 'lg:ring-0', + 'tracking-[-0.016em]', 'dark:hover:bg-light/1', 'dark:ring-light/1', 'dark:font-normal', diff --git a/src/components/primitives/Button.tsx b/src/components/primitives/Button.tsx new file mode 100644 index 000000000..aa9d82faa --- /dev/null +++ b/src/components/primitives/Button.tsx @@ -0,0 +1,65 @@ +import { tcls, ClassValue } from '@/lib/tailwind'; + +type ButtonProps = { + onClick: () => void; + children: React.ReactNode; + variant?: 'primary' | 'secondary'; + size?: 'default' | 'small'; + className?: ClassValue; +}; + +export function Button({ + onClick, + children, + variant = 'primary', + size = 'default', + className, +}: ButtonProps) { + const variantClasses = + variant === 'primary' + ? //PRIMARY + [ + 'bg-primary-600', + 'text-white', + 'ring-dark/2', + 'hover:bg-primary-500', + 'dark:ring-light/3', + 'dark:bg-primary-500', + 'dark:hover:bg-primary-400', + ] + : // SECONDARY + [ + 'bg-dark/2', + 'ring-dark/1', + 'hover:bg-dark/3', + 'dark:bg-light/2', + 'dark:ring-light/1', + 'dark:hover:bg-light/3', + ]; + + const sizeClasses = + size === 'default' + ? // DEFAULT + ['text-base', 'px-4', 'py-2'] + : // SMALL + ['text-xs', 'px-3 py-2']; + + return ( + + ); +} diff --git a/src/components/utils/Checkbox.tsx b/src/components/primitives/Checkbox.tsx similarity index 100% rename from src/components/utils/Checkbox.tsx rename to src/components/primitives/Checkbox.tsx diff --git a/src/components/utils/Loading.tsx b/src/components/primitives/Loading.tsx similarity index 100% rename from src/components/utils/Loading.tsx rename to src/components/primitives/Loading.tsx diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts new file mode 100644 index 000000000..058eb94ef --- /dev/null +++ b/src/components/primitives/index.ts @@ -0,0 +1,3 @@ +export * from './Checkbox'; +export * from './Button'; +export * from './Loading'; diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts index 526d03da5..4bbac9014 100644 --- a/src/components/utils/index.ts +++ b/src/components/utils/index.ts @@ -1,2 +1 @@ export * from './Image'; -export * from './Checkbox';