Merge pull request #36 from kachbit/main

Update codemirror theme to match overall style/color scheme of the page

frontend/src/App.tsx

@@ -34,6 +34,7 @@ function App() {
   const [settings, setSettings] = useState<Settings>({
     openAiApiKey: null,
     isImageGenerationEnabled: true,
+    editorTheme: "cobalt"
   });
 
   const downloadCode = () => {
@@ -180,7 +181,6 @@ function App() {
                     Original Screenshot
                   </div>
                 </div>
-
                 <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
                   <h2 className="text-lg mb-4 border-b border-gray-800">
                     Console
@@ -231,7 +231,7 @@ function App() {
                 <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
-                <CodeMirror code={generatedCode} />
+                <CodeMirror code={generatedCode} editorTheme={settings.editorTheme} />
               </TabsContent>
             </Tabs>
           </div>

frontend/src/components/CodeMirror.tsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { cobalt } from "thememirror";
+import { espresso, cobalt } from "thememirror";
 import {
   defaultKeymap,
   history,
@@ -14,14 +14,18 @@ import { html } from "@codemirror/lang-html";
 
 interface Props {
   code: string;
+  editorTheme: string;
 }
 
-function CodeMirror({ code }: Props) {
+function CodeMirror({ code, editorTheme }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
 
-  // Initialize the editor when the component mounts
   useEffect(() => {
+    let selectedTheme = cobalt;
+    if (editorTheme === "espresso") {
+      selectedTheme = espresso;
+    }
     view.current = new EditorView({
       state: EditorState.create({
         doc: code,
@@ -36,7 +40,7 @@ function CodeMirror({ code }: Props) {
           lineNumbers(),
           bracketMatching(),
           html(),
-          cobalt,
+          selectedTheme,
           EditorView.lineWrapping,
         ],
       }),
@@ -49,9 +53,8 @@ function CodeMirror({ code }: Props) {
         view.current = null;
       }
     };
-  }, []);
+  }, [code, editorTheme]);
 
-  // Update the contents of the editor when the code changes
   useEffect(() => {
     if (view.current && view.current.state.doc.toString() !== code) {
       view.current.dispatch({
@@ -60,6 +63,9 @@ function CodeMirror({ code }: Props) {
     }
   }, [code]);
 
-  return <div className="overflow-x-scroll overflow-y-scroll mx-2" ref={ref} />;
+  return (
+    <div className="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]" ref={ref} />
+  );
 }
+
 export default CodeMirror;

frontend/src/components/SettingsDialog.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Dialog,
   DialogClose,
@@ -12,6 +13,7 @@ import { Settings } from "../types";
 import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
+import { Select } from "./ui/select";
 
 interface Props {
   settings: Settings;
@@ -19,6 +21,13 @@ interface Props {
 }
 
 function SettingsDialog({ settings, setSettings }: Props) {
+  const handleThemeChange = (theme: string) => {
+    setSettings((s) => ({
+      ...s,
+      editorTheme: theme,
+    }));
+  };
+
   return (
     <Dialog>
       <DialogTrigger>
@@ -65,7 +74,23 @@ function SettingsDialog({ settings, setSettings }: Props) {
               }))
             }
           />
+          <Label htmlFor="editor-theme">
+            <div>Editor Theme</div>
+          </Label>
+          <div>
+            <Select // Use the custom Select component here
+              id="editor-theme"
+              value={settings.editorTheme}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                handleThemeChange(e.target.value)
+              }
+            >
+              <option value="cobalt">Cobalt</option>
+              <option value="espresso">Espresso</option>
+            </Select>
+          </div>
         </div>
+
         <DialogFooter>
           <DialogClose>Save</DialogClose>
         </DialogFooter>

frontend/src/components/ui/select.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "block appearance-none w-full text-sm shadow-sm rounded-md border border-input bg-white py-2 px-3 focus:outline-none focus:border-black",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export { Select };

frontend/src/types.ts

@@ -1,4 +1,5 @@
 export interface Settings {
   openAiApiKey: string | null;
   isImageGenerationEnabled: boolean;
+  editorTheme: string;
 }