apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-06 19:35:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix email block and dark mode switching

Browse source
This commit is contained in:
Arjun 2026-03-31 11:10:46 +05:30
parent 82ab0a8fe1
commit 227db3c61c
2 changed files with 38 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/x/apps/renderer/src/extensions/email-block.tsx
View file

@ -3,6 +3,7 @@ import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react'
import { X, Mail, ChevronDown, ExternalLink, Copy, Check, Sparkles, Loader2, MessageSquare } from 'lucide-react' import { X, Mail, ChevronDown, ExternalLink, Copy, Check, Sparkles, Loader2, MessageSquare } from 'lucide-react'
import { blocks } from '@x/shared' import { blocks } from '@x/shared'
import { useState, useEffect, useRef, useCallback } from 'react' import { useState, useEffect, useRef, useCallback } from 'react'
import { useTheme } from '@/contexts/theme-context'
// --- Helpers --- // --- Helpers ---
@ -44,6 +45,8 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
const hasPastSummary = !!config?.past_summary const hasPastSummary = !!config?.past_summary
const responseMode = config?.response_mode || 'both' const responseMode = config?.response_mode || 'both'
const { resolvedTheme } = useTheme()
// Local draft state for editing // Local draft state for editing
const [draftBody, setDraftBody] = useState(config?.draft_response || '') const [draftBody, setDraftBody] = useState(config?.draft_response || '')
const [contextExpanded, setContextExpanded] = useState(false) const [contextExpanded, setContextExpanded] = useState(false)
@ -176,6 +179,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
</div> </div>
{/* Editable draft body */} {/* Editable draft body */}
<textarea <textarea
key={resolvedTheme}
ref={bodyRef} ref={bodyRef}
className="email-draft-block-body-input" className="email-draft-block-body-input"
value={draftBody} value={draftBody}

68
apps/x/apps/renderer/src/styles/editor.css
View file

@ -1102,20 +1102,20 @@
/* Email block – Gmail style */ /* Email block – Gmail style */
.tiptap-editor .ProseMirror .email-block-card-gmail { .tiptap-editor .ProseMirror .email-block-card-gmail {
background-color: var(--background, #fff); background-color: var(--background);
border: 1px solid #dadce0; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
} }
.tiptap-editor .ProseMirror .email-block-card-gmail:hover { .tiptap-editor .ProseMirror .email-block-card-gmail:hover {
background-color: var(--background, #fff); background-color: var(--background);
} }
.tiptap-editor .ProseMirror .email-block-subject { .tiptap-editor .ProseMirror .email-block-subject {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
color: #202124; color: var(--foreground);
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.4; line-height: 1.4;
} }
@ -1128,7 +1128,7 @@
height: 50px; height: 50px;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
} }
.tiptap-editor .ProseMirror .email-block-error, .tiptap-editor .ProseMirror .email-block-error,
@ -1136,7 +1136,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
font-size: 14px; font-size: 14px;
} }
@ -1160,9 +1160,9 @@
margin-bottom: 6px; margin-bottom: 6px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
background: transparent; background: transparent;
border: 1px solid #dadce0; border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
@ -1170,7 +1170,7 @@
} }
.tiptap-editor .ProseMirror .email-block-thread-toggle:hover { .tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
background: #f1f3f4; background: color-mix(in srgb, var(--foreground) 8%, transparent);
} }
.tiptap-editor .ProseMirror .email-block-toggle-chevron { .tiptap-editor .ProseMirror .email-block-toggle-chevron {
@ -1186,7 +1186,7 @@
} }
.tiptap-editor .ProseMirror .email-block-message + .email-block-message { .tiptap-editor .ProseMirror .email-block-message + .email-block-message {
border-top: 1px solid #e8eaed; border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
padding-top: 16px; padding-top: 16px;
} }
@ -1230,24 +1230,24 @@
.tiptap-editor .ProseMirror .email-block-sender-name { .tiptap-editor .ProseMirror .email-block-sender-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #202124; color: var(--foreground);
} }
.tiptap-editor .ProseMirror .email-block-sender-date { .tiptap-editor .ProseMirror .email-block-sender-date {
font-size: 12px; font-size: 12px;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
.tiptap-editor .ProseMirror .email-block-sender-to { .tiptap-editor .ProseMirror .email-block-sender-to {
font-size: 12px; font-size: 12px;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
} }
.tiptap-editor .ProseMirror .email-block-message-body { .tiptap-editor .ProseMirror .email-block-message-body {
font-size: 14px; font-size: 14px;
color: #3c4043; color: color-mix(in srgb, var(--foreground) 80%, transparent);
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.58; line-height: 1.58;
padding-left: 0; padding-left: 0;
@ -1256,7 +1256,7 @@
.tiptap-editor .ProseMirror .email-block-context { .tiptap-editor .ProseMirror .email-block-context {
margin-top: 12px; margin-top: 12px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid #e8eaed; border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@ -1273,16 +1273,16 @@
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.07em; letter-spacing: 0.07em;
color: #80868b; color: color-mix(in srgb, var(--foreground) 40%, transparent);
} }
.tiptap-editor .ProseMirror .email-block-context-summary { .tiptap-editor .ProseMirror .email-block-context-summary {
font-size: 14px; font-size: 14px;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 65%, transparent);
line-height: 1.58; line-height: 1.58;
white-space: pre-wrap; white-space: pre-wrap;
padding-left: 12px; padding-left: 12px;
border-left: 3px solid #e8eaed; border-left: 3px solid color-mix(in srgb, var(--foreground) 12%, transparent);
} }
/* Gmail-style action buttons */ /* Gmail-style action buttons */
@ -1294,9 +1294,9 @@
padding: 7px 16px; padding: 7px 16px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 60%, transparent);
background: transparent; background: transparent;
border: 1px solid #dadce0; border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease; transition: background-color 0.15s ease, box-shadow 0.15s ease;
@ -1305,9 +1305,9 @@
} }
.tiptap-editor .ProseMirror .email-block-gmail-btn:hover { .tiptap-editor .ProseMirror .email-block-gmail-btn:hover {
background: #f1f3f4; background: color-mix(in srgb, var(--foreground) 8%, transparent);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
color: #202124; color: var(--foreground);
} }
.tiptap-editor .ProseMirror .email-block-gmail-btn:disabled { .tiptap-editor .ProseMirror .email-block-gmail-btn:disabled {
@ -1400,10 +1400,10 @@
top: calc(100%); top: calc(100%);
right: 0; right: 0;
z-index: 50; z-index: 50;
background: #fff; background: var(--background);
border: 1px solid #dadce0; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.3); box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
margin-top: 4px; margin-top: 4px;
overflow: hidden; overflow: hidden;
} }
@ -1416,7 +1416,7 @@
padding: 8px 16px; padding: 8px 16px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #202124; color: var(--foreground);
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -1424,7 +1424,7 @@
} }
.tiptap-editor .ProseMirror .email-block-split-option:hover { .tiptap-editor .ProseMirror .email-block-split-option:hover {
background: #f1f3f4; background: color-mix(in srgb, var(--foreground) 8%, transparent);
} }
/* Email draft block – Gmail compose style */ /* Email draft block – Gmail compose style */
@ -1497,7 +1497,7 @@
gap: 8px; gap: 8px;
margin-top: 12px; margin-top: 12px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid #e8eaed; border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
} }
.tiptap-editor .ProseMirror .email-draft-block-reply { .tiptap-editor .ProseMirror .email-draft-block-reply {
@ -1512,9 +1512,9 @@
margin-bottom: 6px; margin-bottom: 6px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #5f6368; color: color-mix(in srgb, var(--foreground) 55%, transparent);
background: transparent; background: transparent;
border: 1px solid #dadce0; border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
@ -1522,12 +1522,12 @@
} }
.tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover { .tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover {
background: #f1f3f4; background: color-mix(in srgb, var(--foreground) 8%, transparent);
} }
.tiptap-editor .ProseMirror .email-draft-block-reply-thread { .tiptap-editor .ProseMirror .email-draft-block-reply-thread {
padding: 4px 0 0 12px; padding: 4px 0 0 12px;
border-left: 3px solid #e8eaed; border-left: 3px solid color-mix(in srgb, var(--foreground) 12%, transparent);
margin-left: 4px; margin-left: 4px;
} }