Merge pull request #475 from Mikethebot44/feature/add-memory-dialog-ux

improve Add Memory dialog UX and dark/light mode consistency

4 files changed, 16 insertions, 17 deletions

diff --git a/apps/web/components/views/add-memory/index.tsx b/apps/web/components/views/add-memory/index.tsx
index 19e02df1..e5789b9d 100644
--- a/apps/web/components/views/add-memory/index.tsx
+++ b/apps/web/components/views/add-memory/index.tsx
@@ -634,12 +634,9 @@ export function AddMemoryView({
 											>
 												{({ state, handleChange, handleBlur }) => (
 													<>
-														<div
-															className={`bg-black/5 border border-black/10 rounded-md ${
-																addContentMutation.isPending ? "opacity-50" : ""
-															}`}
-														>
-															<TextEditor
+								<div className={addContentMutation.isPending ? "opacity-50" : ""}>
+									<TextEditor
+										containerClassName="bg-white/5 border-white/10 rounded-md"
 																disabled={addContentMutation.isPending}
 																onBlur={handleBlur}
 																onChange={handleChange}
@@ -842,13 +839,14 @@ export function AddMemoryView({
 							</TabsContent>
 
 							<TabsContent value="file" className="space-y-4">
-								<form
+						<form
 									onSubmit={(e) => {
 										e.preventDefault()
 										e.stopPropagation()
 										fileUploadForm.handleSubmit()
 									}}
-								>
+						className="h-full flex flex-col"
+						>
 									<div className="grid gap-4">
 										<motion.div
 											animate={{ opacity: 1, y: 0 }}
@@ -936,7 +934,7 @@ export function AddMemoryView({
 											</fileUploadForm.Field>
 										</motion.div>
 									</div>
-									<div className="mt-6 flex flex-col sm:flex-row sm:justify-between sm:items-end w-full gap-4">
+						<div className="mt-6 flex flex-col sm:flex-row sm:justify-between sm:items-end w-full gap-4 mt-auto">
 										<div className="flex items-end gap-4">
 											{/* Left side - Project Selection */}
 											<motion.div
diff --git a/apps/web/components/views/add-memory/project-selection.tsx b/apps/web/components/views/add-memory/project-selection.tsx
index 3c166303..e77a8053 100644
--- a/apps/web/components/views/add-memory/project-selection.tsx
+++ b/apps/web/components/views/add-memory/project-selection.tsx
@@ -55,11 +55,7 @@ export function ProjectSelection({
       >
         <SelectValue placeholder="Select a project" />
       </SelectTrigger>
-      <SelectContent
-        className="bg-black/90 backdrop-blur-xl border-foreground/10 z-[90]"
-        position="popper"
-        sideOffset={5}
-      >
+      <SelectContent position="popper" sideOffset={5} className="z-[90]">
         <SelectItem
           className="hover:bg-foreground/10"
           key="default"
diff --git a/apps/web/components/views/add-memory/text-editor.tsx b/apps/web/components/views/add-memory/text-editor.tsx
index f6cf9425..e9577142 100644
--- a/apps/web/components/views/add-memory/text-editor.tsx
+++ b/apps/web/components/views/add-memory/text-editor.tsx
@@ -91,6 +91,7 @@ interface TextEditorProps {
 	placeholder?: string;
 	disabled?: boolean;
 	className?: string;
+	containerClassName?: string;
 }
 
 const initialValue: Descendant[] = [
@@ -243,6 +244,7 @@ export function TextEditor({
 	placeholder = "Start writing...",
 	disabled = false,
 	className,
+	containerClassName,
 }: TextEditorProps) {
 	const editor = useMemo(() => withReact(createEditor()) as CustomEditor, []);
 	const [editorValue, setEditorValue] = useState<Descendant[]>(() =>
@@ -421,7 +423,8 @@ export function TextEditor({
 	);
 
 	return (
-		<div className={cn("flex flex-col", className)}>
+		<div className={cn("bg-foreground/5 border border-foreground/10 rounded-md", containerClassName)}>
+			<div className={cn("flex flex-col", className)}>
 			<div className="flex-1 min-h-48 max-h-64 overflow-y-auto">
 				<Slate
 					editor={editor}
@@ -451,6 +454,7 @@ export function TextEditor({
 							minHeight: "11rem",
 							maxHeight: "15rem",
 							padding: "12px",
+							overflowX: "hidden",
 						}}
 					/>
 				</Slate>
@@ -540,6 +544,7 @@ export function TextEditor({
 					/>
 				</div>
 			</div>
+			</div>
 		</div>
 	);
 }
diff --git a/apps/web/components/views/connections-tab-content.tsx b/apps/web/components/views/connections-tab-content.tsx
index 3aa06776..642cd174 100644
--- a/apps/web/components/views/connections-tab-content.tsx
+++ b/apps/web/components/views/connections-tab-content.tsx
@@ -205,7 +205,7 @@ export function ConnectionsTabContent() {
 					className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg"
 					initial={{ opacity: 0, y: -10 }}
 				>
-					<p className="text-sm text-yellow-400 mb-2">
+					<p className="text-sm text-black-400 dark:text-yellow-400 mb-2">
 						🔌 Connections are a Pro feature
 					</p>
 					<p className="text-xs text-foreground/60 mb-3">
@@ -213,7 +213,7 @@ export function ConnectionsTabContent() {
 						sync your documents.
 					</p>
 					<Button
-						className="bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 border-yellow-500/30"
+						className="bg-yellow-500/20 text-black-400 hover:bg-yellow-500/30 dark:text-yellow-400 border-yellow-500/30"
 						onClick={handleUpgrade}
 						size="sm"
 						variant="secondary"