refactor(theme): use design tokens and fix dark mode visuals
- Replace hardcoded Tailwind colors (bg-white, bg-gray-50/100, text-gray-, border-gray-, divide-gray-*, text-blue-600/800, bg-blue-50) with design tokens (bg-card, bg-muted, text-foreground, text-muted-foreground, border-
border, text-primary, hover:bg-accent, bg-primary/10).
- ClipboardApp: update RichTextEditor toolbar/editor, FileUploadHandler, ShareCard, FileListDisplay, SendTabPanel, RetrieveTabPanel, FileTransferButton.
- Blog UI: unify styles in list page, tag page, post page, ArticleListItem, and TableOfContents.
- MDX/prose: normalize pre/code/table/blockquote/lists and figure captions; switch rehype table divider to theme token.
- Misc: adjust HomeClient and HowItWorks copy colors to tokens.
- No functional changes; light mode parity; improved contrast and consistency in dark mode.
This commit is contained in:
david_bai
@@ -394,7 +394,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2 p-2 sm:p-3 border border-gray-100 rounded-lg"
|
||||
className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2 p-2 sm:p-3 border border-border rounded-lg"
|
||||
>
|
||||
<Tooltip content={tooltipContent}>
|
||||
<div className="flex-1 min-w-0">
|
||||
@@ -404,7 +404,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
|
||||
? `${item.name.slice(0, filenameDisplayLen - 3)}...`
|
||||
: item.name}
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm text-gray-500">
|
||||
<span className="text-xs sm:text-sm text-muted-foreground">
|
||||
{isFolder
|
||||
? `${formatFolderDis(
|
||||
messages!.text.FileListDisplay.folder_dis_template,
|
||||
|
||||
@@ -59,7 +59,7 @@ const FileTransferButton = ({
|
||||
if (isSavedToDisk) {
|
||||
return {
|
||||
variant: "ghost" as const,
|
||||
className: "mr-2 text-gray-500",
|
||||
className: "mr-2 text-muted-foreground",
|
||||
};
|
||||
}
|
||||
if (isCurrentFileTransferring) {
|
||||
@@ -70,20 +70,19 @@ const FileTransferButton = ({
|
||||
}
|
||||
if (isPendingSave) {
|
||||
return {
|
||||
variant: "default" as const, // 使用更明显的样式
|
||||
className: "mr-2 bg-green-600 hover:bg-green-700 text-white",
|
||||
variant: "default" as const,
|
||||
className: "mr-2",
|
||||
};
|
||||
}
|
||||
if (isOtherFileTransferring) {
|
||||
return {
|
||||
variant: "outline" as const,
|
||||
className:
|
||||
"mr-2 cursor-not-allowed bg-gray-100 border-gray-300 text-gray-500",
|
||||
className: "mr-2 cursor-not-allowed bg-muted text-muted-foreground",
|
||||
};
|
||||
}
|
||||
return {
|
||||
variant: "outline" as const,
|
||||
className: "mr-2 hover:bg-blue-50",
|
||||
className: "mr-2 hover:bg-accent",
|
||||
};
|
||||
};
|
||||
|
||||
@@ -118,10 +117,7 @@ const FileTransferButton = ({
|
||||
</Button>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="top"
|
||||
className="bg-gray-800 text-white px-3 py-2 rounded-md text-sm"
|
||||
>
|
||||
<TooltipContent side="top" className="px-3 py-2 rounded-md text-sm">
|
||||
{getTooltipContent()}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
@@ -160,14 +160,14 @@ const FileUploadHandler: React.FC<FileUploadHandlerProps> = ({
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer"
|
||||
className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer"
|
||||
onClick={handleZoneClick}
|
||||
>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{messages.text.fileUploadHandler.chooseFileTips}
|
||||
</p>
|
||||
<Upload className="h-12 w-12 mx-auto mb-4 text-blue-500" />
|
||||
<p className="text-sm text-gray-600">{fileText}</p>
|
||||
<Upload className="h-12 w-12 mx-auto mb-4 text-primary" />
|
||||
<p className="text-sm text-muted-foreground">{fileText}</p>
|
||||
|
||||
<Input
|
||||
id="file-upload"
|
||||
@@ -202,13 +202,13 @@ const FileUploadHandler: React.FC<FileUploadHandlerProps> = ({
|
||||
<div className="flex justify-center gap-4 mt-6">
|
||||
<button
|
||||
onClick={handleSelectFile}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
className="px-4 py-2 rounded transition-colors bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
{messages.text.fileUploadHandler.SelectFile_dis}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSelectFolder}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
|
||||
className="px-4 py-2 rounded transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
||||
>
|
||||
{messages.text.fileUploadHandler.SelectFolder_dis}
|
||||
</button>
|
||||
|
||||
@@ -98,7 +98,7 @@ export function RetrieveTabPanel({
|
||||
|
||||
return (
|
||||
<div id="retrieve-panel" role="tabpanel" aria-labelledby="retrieve-tab">
|
||||
<div className="mb-3 text-sm text-gray-600">
|
||||
<div className="mb-3 text-sm text-muted-foreground">
|
||||
{retrieveRoomStatusText ||
|
||||
(isReceiverInRoom
|
||||
? messages.text.ClipboardApp.roomStatus.connected_dis
|
||||
@@ -178,7 +178,7 @@ export function RetrieveTabPanel({
|
||||
saveType={getReceiverSaveType()}
|
||||
/>
|
||||
{retrieveMessage && (
|
||||
<p className="mt-3 text-sm text-blue-600">{retrieveMessage}</p>
|
||||
<p className="mt-3 text-sm text-primary">{retrieveMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,7 @@ const RichTextEditor = dynamic(
|
||||
{
|
||||
ssr: false, // This component is client-side only
|
||||
loading: () => (
|
||||
<div className="p-4 border rounded-lg min-h-[200px] md:min-h-[400px] bg-gray-50 flex items-center justify-center">
|
||||
<div className="p-4 border rounded-lg min-h-[200px] md:min-h-[400px] bg-muted flex items-center justify-center">
|
||||
Loading Editor...
|
||||
</div>
|
||||
),
|
||||
@@ -136,7 +136,7 @@ export function SendTabPanel({
|
||||
|
||||
return (
|
||||
<div id="send-panel" role="tabpanel" aria-labelledby="send-tab">
|
||||
<div className="mb-3 text-sm text-gray-600">
|
||||
<div className="mb-3 text-sm text-muted-foreground">
|
||||
{shareRoomStatusText ||
|
||||
(isSenderInRoom
|
||||
? messages.text.ClipboardApp.roomStatus.onlyOneMsg
|
||||
@@ -166,7 +166,7 @@ export function SendTabPanel({
|
||||
<div className="space-y-3 mb-4">
|
||||
{/* Room ID input section */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{messages.text.ClipboardApp.html.inputRoomId_tips}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
@@ -243,7 +243,7 @@ export function SendTabPanel({
|
||||
</div>
|
||||
</div>
|
||||
{shareMessage && (
|
||||
<p className="mt-3 text-sm text-blue-600">{shareMessage}</p>
|
||||
<p className="mt-3 text-sm text-primary">{shareMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -120,21 +120,21 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
return (
|
||||
<div className="bg-blue-50 p-2 sm:p-4 rounded-lg border border-blue-200">
|
||||
<p className="text-blue-700 mb-3 sm:mb-4 text-sm sm:text-base">
|
||||
<div className="bg-primary/10 p-2 sm:p-4 rounded-lg border border-primary/20">
|
||||
<p className="text-primary mb-3 sm:mb-4 text-sm sm:text-base">
|
||||
{messages.text.RetrieveMethod.P}
|
||||
</p>
|
||||
|
||||
{/* Mobile-first responsive layout */}
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{/* RoomID section */}
|
||||
<div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
|
||||
<div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{messages.text.RetrieveMethod.RoomId_tips}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2">
|
||||
<code className="flex-1 bg-gray-100 px-2 py-1 rounded text-sm font-mono break-all">
|
||||
<code className="flex-1 bg-muted px-2 py-1 rounded text-sm font-mono break-all">
|
||||
{RoomID}
|
||||
</code>
|
||||
<WriteClipboardButton
|
||||
@@ -146,12 +146,12 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
</div>
|
||||
|
||||
{/* URL section */}
|
||||
<div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
|
||||
<div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{messages.text.RetrieveMethod.url_tips}
|
||||
</p>
|
||||
<div className="bg-gray-100 px-2 py-2 rounded text-xs sm:text-sm break-all font-mono">
|
||||
<div className="bg-muted px-2 py-2 rounded text-xs sm:text-sm break-all font-mono">
|
||||
{shareLink}
|
||||
</div>
|
||||
<div className="flex justify-start">
|
||||
@@ -164,15 +164,15 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
</div>
|
||||
|
||||
{/* QR Code section */}
|
||||
<div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
|
||||
<div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{messages.text.RetrieveMethod.scanQR_tips}
|
||||
</p>
|
||||
|
||||
{/* QR Code display area - moved up for better mobile UX */}
|
||||
<div className="flex justify-center">
|
||||
<div className="inline-block border-2 p-2 sm:p-4 bg-gray-50 rounded-lg">
|
||||
<div className="inline-block border-2 p-2 sm:p-4 bg-muted rounded-lg">
|
||||
<div ref={qrRef}>
|
||||
<QRCodeSVG
|
||||
value={shareLink}
|
||||
|
||||
@@ -9,21 +9,21 @@ export function AlignmentTools({ alignText }: AlignmentToolsProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={() => alignText("left")}
|
||||
title="Align left"
|
||||
>
|
||||
<AlignLeft className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={() => alignText("center")}
|
||||
title="Align center"
|
||||
>
|
||||
<AlignCenter className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={() => alignText("right")}
|
||||
title="Align right"
|
||||
>
|
||||
|
||||
@@ -14,7 +14,7 @@ export function BasicFormatTools({
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`p-1.5 rounded ${
|
||||
isStyleActive("bold") ? "bg-gray-200" : "hover:bg-gray-200"
|
||||
isStyleActive("bold") ? "bg-accent" : "hover:bg-accent"
|
||||
}`}
|
||||
onClick={() => formatText("bold")}
|
||||
title="Bold"
|
||||
@@ -23,7 +23,7 @@ export function BasicFormatTools({
|
||||
</button>
|
||||
<button
|
||||
className={`p-1.5 rounded ${
|
||||
isStyleActive("italic") ? "bg-gray-200" : "hover:bg-gray-200"
|
||||
isStyleActive("italic") ? "bg-accent" : "hover:bg-accent"
|
||||
}`}
|
||||
onClick={() => formatText("italic")}
|
||||
title="Italic"
|
||||
@@ -32,7 +32,7 @@ export function BasicFormatTools({
|
||||
</button>
|
||||
<button
|
||||
className={`p-1.5 rounded ${
|
||||
isStyleActive("underline") ? "bg-gray-200" : "hover:bg-gray-200"
|
||||
isStyleActive("underline") ? "bg-accent" : "hover:bg-accent"
|
||||
}`}
|
||||
onClick={() => formatText("underline")}
|
||||
title="Underline"
|
||||
|
||||
@@ -14,21 +14,21 @@ export function InsertTools({
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={insertLink}
|
||||
title="Insert url"
|
||||
>
|
||||
<Link2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={insertImage}
|
||||
title="Upload image"
|
||||
>
|
||||
<Image className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-200 rounded"
|
||||
className="p-1.5 hover:bg-accent rounded"
|
||||
onClick={insertCodeBlock}
|
||||
title="Insert code"
|
||||
>
|
||||
|
||||
@@ -129,7 +129,7 @@ const RichTextEditor: React.FC<EditorProps> = ({ onChange, value = "" }) => {
|
||||
<div className="w-full space-x-2 mb-4">
|
||||
<div className="border rounded-lg shadow-sm overflow-hidden">
|
||||
{/* Toolbar - Add light gray background and bottom border */}
|
||||
<div className="flex flex-wrap gap-1 p-2 bg-gray-50 border-b">
|
||||
<div className="flex flex-wrap gap-1 p-2 bg-muted border-b border-border">
|
||||
{/* Basic format tool group */}
|
||||
<BasicFormatTools
|
||||
isStyleActive={isStyleActive}
|
||||
@@ -158,10 +158,10 @@ const RichTextEditor: React.FC<EditorProps> = ({ onChange, value = "" }) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Editor area - Add pure white background and inner shadow effect */}
|
||||
{/* Editor area - use theme tokens for background */}
|
||||
<div
|
||||
ref={editorRef}
|
||||
className="p-4 min-h-[200px] md:min-h-[400px] focus:outline-none bg-white shadow-inner"
|
||||
className="p-4 min-h-[200px] md:min-h-[400px] focus:outline-none bg-card shadow-inner"
|
||||
contentEditable
|
||||
onPaste={handlePaste}
|
||||
onInput={handleChange}
|
||||
|
||||
@@ -10,7 +10,7 @@ export const SelectMenu: React.FC<SelectMenuProps> = ({
|
||||
}) => (
|
||||
<div className="relative inline-block">
|
||||
<select
|
||||
className={`appearance-none bg-transparent border rounded p-1.5 pr-6 hover:bg-gray-200 focus:outline-none ${className}`}
|
||||
className={`appearance-none bg-transparent border border-border rounded p-1.5 pr-6 hover:bg-accent focus:outline-none ${className}`}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
>
|
||||
<option value="">{placeholder}</option>
|
||||
|
||||
@@ -11,7 +11,7 @@ interface ArticleListItemProps {
|
||||
|
||||
export function ArticleListItem({ post, lang, messages }: ArticleListItemProps) {
|
||||
return (
|
||||
<article className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<article className="bg-card rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<div className="relative h-80 w-full">
|
||||
<Image
|
||||
src={post.frontmatter.cover}
|
||||
@@ -24,7 +24,7 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
|
||||
<time className="font-medium">
|
||||
{new Date(post.frontmatter.date).toLocaleDateString(lang, {
|
||||
year: "numeric",
|
||||
@@ -37,7 +37,7 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
|
||||
{post.frontmatter.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors"
|
||||
className="bg-muted px-3 py-1 rounded-full hover:bg-accent transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -45,19 +45,19 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/${lang}/blog/${post.slug}`}>
|
||||
<h2 className="text-3xl font-bold mb-4 hover:text-blue-600 transition-colors leading-tight">
|
||||
<h2 className="text-3xl font-bold mb-4 hover:text-primary transition-colors leading-tight">
|
||||
{post.frontmatter.title}
|
||||
</h2>
|
||||
</Link>
|
||||
|
||||
<p className="text-gray-600 mb-6 text-lg leading-relaxed line-clamp-3">
|
||||
<p className="text-muted-foreground mb-6 text-lg leading-relaxed line-clamp-3">
|
||||
{post.frontmatter.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||
<div className="flex items-center justify-between pt-4 border-t border-border">
|
||||
<Link
|
||||
href={`/${lang}/blog/${post.slug}`}
|
||||
className="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center text-lg"
|
||||
className="text-primary hover:text-primary/80 font-medium inline-flex items-center text-lg"
|
||||
>
|
||||
{messages.text.blog.read_more}
|
||||
<svg
|
||||
|
||||
@@ -71,7 +71,7 @@ export type MDXComponents = {
|
||||
// Custom MDX components
|
||||
export const mdxComponents: MDXComponents = {
|
||||
p: ({ children, ...props }) => (
|
||||
<div className="mb-6 leading-relaxed text-gray-700" {...props}>
|
||||
<div className="mb-6 leading-relaxed text-foreground" {...props}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
@@ -92,7 +92,7 @@ export const mdxComponents: MDXComponents = {
|
||||
alt={props.alt || ""}
|
||||
/>
|
||||
{props.alt && (
|
||||
<div className="text-center text-sm text-gray-600 mt-2 italic">
|
||||
<div className="text-center text-sm text-muted-foreground mt-2 italic">
|
||||
{props.alt}
|
||||
</div>
|
||||
)}
|
||||
@@ -101,7 +101,7 @@ export const mdxComponents: MDXComponents = {
|
||||
},
|
||||
pre: ({ children, ...props }) => (
|
||||
<pre
|
||||
className="relative my-6 rounded-lg bg-gray-50 border border-gray-200 p-4 overflow-x-auto"
|
||||
className="relative my-6 rounded-lg bg-muted border border-border p-4 overflow-x-auto"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -111,13 +111,13 @@ export const mdxComponents: MDXComponents = {
|
||||
const isInlineCode = !className;
|
||||
return isInlineCode ? (
|
||||
<code
|
||||
className="bg-gray-50 rounded px-1.5 py-0.5 text-gray-800 border border-gray-200 text-sm"
|
||||
className="bg-muted rounded px-1.5 py-0.5 text-foreground border border-border text-sm"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
) : (
|
||||
<code className="block text-gray-800 text-sm" {...props}>
|
||||
<code className="block text-foreground text-sm" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
@@ -125,7 +125,7 @@ export const mdxComponents: MDXComponents = {
|
||||
table: ({ children, ...props }) => (
|
||||
<div className="my-8 w-full overflow-x-auto">
|
||||
<table
|
||||
className="min-w-full divide-y divide-gray-300 border border-gray-300"
|
||||
className="min-w-full divide-y divide-border border border-border"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -133,23 +133,23 @@ export const mdxComponents: MDXComponents = {
|
||||
</div>
|
||||
),
|
||||
thead: ({ children, ...props }) => (
|
||||
<thead className="bg-gray-50" {...props}>
|
||||
<thead className="bg-muted" {...props}>
|
||||
{children}
|
||||
</thead>
|
||||
),
|
||||
tbody: ({ children, ...props }) => (
|
||||
<tbody className="divide-y divide-gray-200 bg-white" {...props}>
|
||||
<tbody className="divide-y divide-border bg-card" {...props}>
|
||||
{children}
|
||||
</tbody>
|
||||
),
|
||||
tr: ({ children, ...props }) => (
|
||||
<tr className="hover:bg-gray-50" {...props}>
|
||||
<tr className="hover:bg-accent" {...props}>
|
||||
{children}
|
||||
</tr>
|
||||
),
|
||||
th: ({ children, ...props }) => (
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r last:border-r-0"
|
||||
className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider border-r last:border-r-0"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -157,7 +157,7 @@ export const mdxComponents: MDXComponents = {
|
||||
),
|
||||
td: ({ children, ...props }) => (
|
||||
<td
|
||||
className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 border-r last:border-r-0"
|
||||
className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground border-r last:border-r-0"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -165,7 +165,7 @@ export const mdxComponents: MDXComponents = {
|
||||
),
|
||||
blockquote: ({ children, ...props }) => (
|
||||
<blockquote
|
||||
className="border-l-4 border-blue-500 pl-4 my-4 italic text-gray-600 bg-gray-50 py-2 rounded-r-lg"
|
||||
className="border-l-4 border-primary pl-4 my-4 italic text-muted-foreground bg-muted py-2 rounded-r-lg"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -173,7 +173,7 @@ export const mdxComponents: MDXComponents = {
|
||||
),
|
||||
ul: ({ children, ...props }) => (
|
||||
<ul
|
||||
className="list-disc list-outside ml-6 my-6 space-y-2 text-gray-700"
|
||||
className="list-disc list-outside ml-6 my-6 space-y-2 text-foreground"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -181,7 +181,7 @@ export const mdxComponents: MDXComponents = {
|
||||
),
|
||||
ol: ({ children, ...props }) => (
|
||||
<ol
|
||||
className="list-decimal list-outside ml-6 my-6 space-y-2 text-gray-700"
|
||||
className="list-decimal list-outside ml-6 my-6 space-y-2 text-foreground"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -111,7 +111,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({
|
||||
if (toc.length === 0) return null;
|
||||
|
||||
return (
|
||||
<nav className="hidden lg:block sticky top-8 p-6 bg-gray-50 rounded-lg max-h-[calc(100vh-4rem)] overflow-y-auto">
|
||||
<nav className="hidden lg:block sticky top-8 p-6 bg-muted rounded-lg max-h-[calc(100vh-4rem)] overflow-y-auto">
|
||||
<h4 className="text-lg font-semibold mb-4">{title}</h4>
|
||||
<ul className="space-y-2">
|
||||
{toc.map((item) => (
|
||||
@@ -125,10 +125,10 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({
|
||||
<button
|
||||
onClick={() => scrollToHeader(item.id)}
|
||||
className={clsx(
|
||||
"block w-full text-left py-1 text-sm hover:text-blue-600 transition-colors",
|
||||
"block w-full text-left py-1 text-sm hover:text-primary transition-colors",
|
||||
activeId === item.id
|
||||
? "text-blue-600 font-medium"
|
||||
: "text-gray-600"
|
||||
? "text-primary font-medium"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{item.text}
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||
{messages.text.HowItWorks.h2}
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8">{messages.text.HowItWorks.h2_P}</p>
|
||||
<p className="text-muted-foreground mb-8">{messages.text.HowItWorks.h2_P}</p>
|
||||
<Button className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white rounded-full px-8 py-6 text-lg">
|
||||
{messages.text.HowItWorks.btn_try}
|
||||
</Button>
|
||||
@@ -60,7 +60,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
|
||||
<p className="text-gray-600">{step.description}</p>
|
||||
<p className="text-muted-foreground">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -69,7 +69,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
|
||||
|
||||
{/* Right Side - Demo Animation */}
|
||||
<div className="w-full md:w-1/2">
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="bg-card rounded-lg shadow-lg overflow-hidden">
|
||||
<video autoPlay loop muted playsInline width="1920" height="75">
|
||||
<source src="/HowItWorks.webm" type="video/webm" />
|
||||
</video>
|
||||
|
||||
Reference in New Issue
Block a user