From 838c05b749f1dd7c73d522c19bbc5ffa5f92503f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 18:16:35 +0000
Subject: [PATCH] Fix MDXEditor theming and image dialog

---
 src/components/admin/MarkdownEditor.tsx |   6 +-
 src/styles/mdx-editor-theme.css         | 163 +++++++++++++++++++++++-
 2 files changed, 164 insertions(+), 5 deletions(-)

diff --git a/src/components/admin/MarkdownEditor.tsx b/src/components/admin/MarkdownEditor.tsx
index 750f5164..0ce632d2 100644
--- a/src/components/admin/MarkdownEditor.tsx
+++ b/src/components/admin/MarkdownEditor.tsx
@@ -116,14 +116,12 @@ export function MarkdownEditor({
   return (
     <div className="space-y-2">
       <div 
-        className={cn(
-          'border border-input rounded-lg overflow-hidden',
-          resolvedTheme === 'dark' && 'dark-theme'
-        )}
+        className="border border-input rounded-lg overflow-hidden"
         style={{ minHeight: height }}
       >
         <MDXEditor
           ref={editorRef}
+          className={cn('mdxeditor', resolvedTheme === 'dark' && 'dark-theme')}
           markdown={value}
           onChange={onChange}
           placeholder={placeholder}
diff --git a/src/styles/mdx-editor-theme.css b/src/styles/mdx-editor-theme.css
index 025c60d3..968df820 100644
--- a/src/styles/mdx-editor-theme.css
+++ b/src/styles/mdx-editor-theme.css
@@ -154,14 +154,175 @@
   font-weight: 600;
 }
 
+/* Toolbar button styling */
+.mdxeditor-toolbar button {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 0.375rem;
+}
+
+.mdxeditor-toolbar button:hover {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.mdxeditor-toolbar button[data-active="true"],
+.mdxeditor-toolbar button[aria-pressed="true"] {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+/* Toolbar separator */
+.mdxeditor-toolbar [role="separator"] {
+  background: hsl(var(--border));
+  width: 1px;
+  height: 1.5rem;
+  margin: 0 0.5rem;
+}
+
+/* Dialog styling */
+.mdxeditor [role="dialog"] {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.1);
+  padding: 1.5rem;
+}
+
+.mdxeditor [role="dialog"] h2,
+.mdxeditor [role="dialog"] h3 {
+  color: hsl(var(--foreground));
+  margin-bottom: 1rem;
+}
+
+.mdxeditor [role="dialog"] label {
+  color: hsl(var(--foreground));
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.mdxeditor [role="dialog"] input[type="text"],
+.mdxeditor [role="dialog"] input[type="url"],
+.mdxeditor [role="dialog"] textarea {
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  width: 100%;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.mdxeditor [role="dialog"] input:focus,
+.mdxeditor [role="dialog"] textarea:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+}
+
+.mdxeditor [role="dialog"] button {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.mdxeditor [role="dialog"] button:hover {
+  background: hsl(var(--primary) / 0.9);
+}
+
+.mdxeditor [role="dialog"] button[data-variant="secondary"] {
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+
+.mdxeditor [role="dialog"] button[data-variant="secondary"]:hover {
+  background: hsl(var(--secondary) / 0.9);
+}
+
+/* Select and dropdown styling */
+.mdxeditor-select-trigger {
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.mdxeditor-select-trigger:hover {
+  background: hsl(var(--accent) / 0.05);
+  border-color: hsl(var(--primary) / 0.5);
+}
+
+.mdxeditor-select-content {
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.15);
+  max-height: 50vh;
+  overflow-y: auto;
+  padding: 0.25rem;
+  z-index: 9999;
+}
+
+.mdxeditor-select-item {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: hsl(var(--foreground));
+}
+
+.mdxeditor-select-item:hover {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.mdxeditor-select-item[data-selected="true"] {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+/* Image styling */
+.mdxeditor img {
+  border-radius: 0.375rem;
+  border: 1px solid hsl(var(--border) / 0.3);
+  max-width: 100%;
+  height: auto;
+}
+
+.mdxeditor img:hover {
+  border-color: hsl(var(--primary) / 0.5);
+}
+
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .mdxeditor-toolbar {
     flex-wrap: wrap;
     gap: 0.25rem;
+    padding: 0.5rem;
+  }
+
+  .mdxeditor-toolbar button {
+    min-width: 2rem;
+    min-height: 2rem;
   }
 
   .mdxeditor-select-content {
-    max-height: 50vh;
+    max-height: 40vh;
+  }
+
+  .mdxeditor [role="dialog"] {
+    max-width: 90vw;
+    padding: 1rem;
   }
 }