diff --git a/apps/rowboat/app/globals.css b/apps/rowboat/app/globals.css index 15a69aae..8befa83b 100644 --- a/apps/rowboat/app/globals.css +++ b/apps/rowboat/app/globals.css @@ -75,6 +75,30 @@ html, body { body { @apply bg-background text-foreground; } + + /* Add these new utility classes */ + .card-shadow { + @apply shadow-sm dark:shadow-none dark:border-border; + } + + .hover-effect { + @apply hover:bg-accent/10 dark:hover:bg-accent/20 transition-colors; + } + + .border-subtle { + @apply border-border dark:border-border/50; + } +} + +/* Add this to disable color transitions */ +* { + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out !important; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out !important; +} + +/* Ensure smooth transitions */ +* { + @apply transition-colors duration-200; } /* Add these styles alongside your other global styles */ @@ -86,6 +110,40 @@ html, body { z-index: 1000; } +/* Base dark mode styles */ +.dark .ql-mention-list-container { + background-color: #1f2937; + border-color: #374151; +} + +.dark .ql-mention-list-container * { + background-color: #1f2937 !important; + color: #f9fafb !important; +} + +/* Target individual items */ +.dark .ql-mention-list-item { + color: #f9fafb !important; + background-color: #1f2937 !important; +} + +/* Target hover and selected states for individual items */ +.dark .ql-mention-list-container .ql-mention-list-item.selected, +.dark .ql-mention-list-container .ql-mention-list-item:hover { + background-color: #6b7280 !important; +} + +/* Ensure the background color only applies to the item itself */ +.dark .ql-mention-list-item > * { + background-color: inherit !important; +} + +/* Additional catch-all for any other possible class combinations */ +.dark [class*="mention"].selected, +.dark [class*="mention"]:hover { + background-color: #6b7280 !important; +} + .ql-mention-list { padding: 0.5rem 0; } @@ -108,4 +166,29 @@ html, body { .ql-editor .mention .invalid { color: red; +} + +/* Add custom scrollbar styling */ +.dark *::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.dark *::-webkit-scrollbar-track { + background: #1f2937; /* dark gray background */ +} + +.dark *::-webkit-scrollbar-thumb { + background: #4b5563; /* medium gray thumb */ + border-radius: 4px; +} + +.dark *::-webkit-scrollbar-thumb:hover { + background: #6b7280; /* lighter gray on hover */ +} + +/* For Firefox */ +.dark * { + scrollbar-width: thin; + scrollbar-color: #4b5563 #1f2937; } \ No newline at end of file diff --git a/apps/rowboat/app/layout.tsx b/apps/rowboat/app/layout.tsx index 0b66eb1f..1e9933db 100644 --- a/apps/rowboat/app/layout.tsx +++ b/apps/rowboat/app/layout.tsx @@ -1,4 +1,5 @@ import "./globals.css"; +import { ThemeProvider } from "./providers/theme-provider"; import { UserProvider } from '@auth0/nextjs-auth0/client'; import { Inter } from "next/font/google"; import { Providers } from "./providers"; @@ -20,11 +21,13 @@ export default function RootLayout({ }>) { return - - - {children} - - + + + + {children} + + + ; } diff --git a/apps/rowboat/app/lib/components/dropdown.tsx b/apps/rowboat/app/lib/components/dropdown.tsx new file mode 100644 index 00000000..892eaf3e --- /dev/null +++ b/apps/rowboat/app/lib/components/dropdown.tsx @@ -0,0 +1,37 @@ +import { Select, SelectItem } from "@nextui-org/react"; +import { ReactNode } from "react"; + +export interface DropdownOption { + key: string; + label: string; +} + +interface DropdownProps { + options: DropdownOption[]; + value: string; + onChange: (value: string) => void; + className?: string; +} + +export function Dropdown({ + options, + value, + onChange, + className = "w-60" +}: DropdownProps) { + return ( + + ); +} diff --git a/apps/rowboat/app/lib/components/editable-field.tsx b/apps/rowboat/app/lib/components/editable-field.tsx index 5a71545e..69a1c0c9 100644 --- a/apps/rowboat/app/lib/components/editable-field.tsx +++ b/apps/rowboat/app/lib/components/editable-field.tsx @@ -6,6 +6,7 @@ import clsx from "clsx"; import { Label } from "./label"; import dynamic from "next/dynamic"; import { Match } from "./mentions_editor"; +import { SparklesIcon } from "lucide-react"; const MentionsEditor = dynamic(() => import('./mentions_editor'), { ssr: false }); interface EditableFieldProps { @@ -22,7 +23,13 @@ interface EditableFieldProps { mentions?: boolean; mentionsAtValues?: Match[]; showSaveButton?: boolean; + showDiscardButton?: boolean; error?: string | null; + inline?: boolean; + showGenerateButton?: { + show: boolean; + setShow: (show: boolean) => void; + }; } export function EditableField({ @@ -33,13 +40,16 @@ export function EditableField({ markdown = false, multiline = false, locked = false, - className = "flex flex-col gap-1", + className = "flex flex-col gap-1 w-full", validate, light = false, mentions = false, mentionsAtValues = [], - showSaveButton = multiline, + showSaveButton = false, + showDiscardButton = false, error, + inline = false, + showGenerateButton, }: EditableFieldProps) { const [isEditing, setIsEditing] = useState(false); const [localValue, setLocalValue] = useState(value); @@ -70,7 +80,11 @@ export function EditableField({ variant: "bordered" as const, labelPlacement: "outside" as const, placeholder: markdown ? '' : placeholder, - radius: "sm" as const, + classNames: { + input: "rounded-md", + inputWrapper: "rounded-md border-medium" + }, + radius: "md" as const, isInvalid: !isValid, errorMessage: validationResult?.errorMessage, onKeyDown: (e: React.KeyboardEvent) => { @@ -97,80 +111,147 @@ export function EditableField({ }, }; - return ( -
- {(label || isEditing && showSaveButton) &&
- {label &&
} - {isEditing ? <> - {mentions && } + if (isEditing) { + const hasChanges = localValue !== value; + + return ( +
+ {label && ( +
+
+ )} + {mentions && ( +
+ +
+ )} {multiline && !mentions &&