Brachnha/brachnha-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): implement 'Twilight Velvet' dark theme and fix visibility issues

Browse Source 
- Add 'Twilight Velvet' color palette to globals.css with OKLCH values
- Update SettingsPage headers, cards, and dialogs to use semantic theme variables
- Update HistoryCard, HistoryFeed, and DraftContent to support dark mode
- Update ProviderSelector and ProviderList to use custom card background (#2A2A3D)
- Add ThemeToggle component with improved visibility
- Ensure consistent use of 'bg-card', 'text-foreground', and 'text-muted-foreground'
This commit is contained in:
Max
2026-01-27 11:03:55 +07:00
parent e9e6fadb1d
commit 9b79856827
49 changed files with 2411 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/features/draft/DraftContent.tsx
View File

@@ -43,38 +43,38 @@ export function DraftContent({ draft }: DraftContentProps) {
})();
return (
<article className="draft-content px-4 sm:px-6 py-6 bg-white">
<article className="draft-content px-4 sm:px-6 py-6 bg-card">
{/* Title - using Merriweather serif font */}
<h2 className="draft-title text-2xl sm:text-3xl font-bold text-slate-800 mb-6 font-serif leading-tight">
<h2 className="draft-title text-2xl sm:text-3xl font-bold text-foreground mb-6 font-serif leading-tight">
{draft.title}
</h2>
{/* Body content - Markdown with prose styling */}
<div className="draft-body prose prose-slate max-w-none font-serif">
<div className="draft-body prose prose-slate dark:prose-invert max-w-none font-serif">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight, rehypeRaw]}
components={{
// Custom heading styles
h1: ({ node, ...props }) => (
<h1 className="text-2xl font-bold text-slate-800 mt-8 mb-4 first:mt-0" {...props} />
<h1 className="text-2xl font-bold text-foreground mt-8 mb-4 first:mt-0" {...props} />
),
h2: ({ node, ...props }) => (
<h2 className="text-xl font-bold text-slate-800 mt-6 mb-3" {...props} />
<h2 className="text-xl font-bold text-foreground mt-6 mb-3" {...props} />
),
h3: ({ node, ...props }) => (
<h3 className="text-lg font-semibold text-slate-800 mt-5 mb-2" {...props} />
<h3 className="text-lg font-semibold text-foreground mt-5 mb-2" {...props} />
),
// Paragraph styling
p: ({ node, ...props }) => (
<p className="text-base leading-relaxed text-slate-700 mb-4" {...props} />
<p className="text-base leading-relaxed text-muted-foreground mb-4" {...props} />
),
// Code blocks
code: ({ node, inline, className, children, ...props }: any) => {
if (inline) {
return (
<code
className="px-1.5 py-0.5 bg-slate-100 text-slate-800 rounded text-sm font-mono"
className="px-1.5 py-0.5 bg-muted text-foreground rounded text-sm font-mono"
{...props}
>
{children}
@@ -83,7 +83,7 @@ export function DraftContent({ draft }: DraftContentProps) {
}
return (
<code
className={`block bg-slate-100 text-slate-800 p-4 rounded-lg text-sm font-mono overflow-x-auto ${className || ''}`}
className={`block bg-muted text-foreground p-4 rounded-lg text-sm font-mono overflow-x-auto ${className || ''}`}
{...props}
>
{children}
@@ -92,22 +92,22 @@ export function DraftContent({ draft }: DraftContentProps) {
},
// Pre tags
pre: ({ node, ...props }) => (
<pre className="bg-slate-100 p-4 rounded-lg overflow-x-auto mb-4" {...props} />
<pre className="bg-muted p-4 rounded-lg overflow-x-auto mb-4" {...props} />
),
// Links
a: ({ node, ...props }) => (
<a className="text-slate-600 hover:text-slate-800 underline" {...props} />
<a className="text-primary hover:underline" {...props} />
),
// Lists
ul: ({ node, ...props }) => (
<ul className="list-disc list-inside mb-4 text-slate-700 space-y-1" {...props} />
<ul className="list-disc list-inside mb-4 text-muted-foreground space-y-1" {...props} />
),
ol: ({ node, ...props }) => (
<ol className="list-decimal list-inside mb-4 text-slate-700 space-y-1" {...props} />
<ol className="list-decimal list-inside mb-4 text-muted-foreground space-y-1" {...props} />
),
// Blockquotes
blockquote: ({ node, ...props }) => (
<blockquote className="border-l-4 border-slate-300 pl-4 italic text-slate-600 my-4" {...props} />
<blockquote className="border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground my-4" {...props} />
),
}}
>
@@ -117,11 +117,11 @@ export function DraftContent({ draft }: DraftContentProps) {
{/* Tags section */}
{draft.tags && draft.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-6 pt-4 border-t border-slate-200">
<div className="flex flex-wrap gap-2 mt-6 pt-4 border-t border-border">
{draft.tags.map((tag) => (
<span
key={tag}
className="tag-chip px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-sans"
className="tag-chip px-3 py-1 bg-secondary text-secondary-foreground rounded-full text-sm font-sans"
>
#{tag}
</span>