From 168d4b035b7576119f98d736a589cb4764d34c17 Mon Sep 17 00:00:00 2001
From: kachbit <kacherpearce@gmail.com>
Date: Sat, 18 Nov 2023 23:19:34 -0800
Subject: [PATCH 1/5] updated codemirror theme

---
 frontend/src/components/CodeMirror.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 3ba1c51..9f29976 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/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 } from "thememirror";
 import {
   defaultKeymap,
   history,
@@ -36,7 +36,7 @@ function CodeMirror({ code }: Props) {
           lineNumbers(),
           bracketMatching(),
           html(),
-          cobalt,
+          espresso,
           EditorView.lineWrapping,
         ],
       }),
@@ -60,6 +60,6 @@ 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;

From 6f5c0cb0630ab3e16e37c28afa9bd0e647666f5c Mon Sep 17 00:00:00 2001
From: kachbit <kacherpearce@gmail.com>
Date: Sun, 19 Nov 2023 14:30:10 -0800
Subject: [PATCH 2/5] editor theme selector

---
 frontend/src/App.tsx                       |  3 ++-
 frontend/src/components/CodeMirror.tsx     | 23 ++++++++++++++------
 frontend/src/components/SettingsDialog.tsx | 25 ++++++++++++++++++++++
 frontend/src/types.ts                      |  1 +
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 654acf2..3ba88d3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -34,6 +34,7 @@ function App() {
   const [settings, setSettings] = useState<Settings>({
     openAiApiKey: null,
     isImageGenerationEnabled: true,
+    editorTheme: "cobalt"
   });
 
   const downloadCode = () => {
@@ -231,7 +232,7 @@ function App() {
                 <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
-                <CodeMirror code={generatedCode} />
+                <CodeMirror code={generatedCode} editorTheme={settings.editorTheme} />
               </TabsContent>
             </Tabs>
           </div>
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 9f29976..6043fca 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -2,6 +2,8 @@ import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { espresso } from "thememirror";
+import { cobalt } from "thememirror";
+
 import {
   defaultKeymap,
   history,
@@ -14,14 +16,19 @@ 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 +43,7 @@ function CodeMirror({ code }: Props) {
           lineNumbers(),
           bracketMatching(),
           html(),
-          espresso,
+          selectedTheme,
           EditorView.lineWrapping,
         ],
       }),
@@ -49,9 +56,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 +66,9 @@ function CodeMirror({ code }: Props) {
     }
   }, [code]);
 
-  return <div className="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]" ref={ref} />;
+  return (
+    <div className="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]" ref={ref} />
+  );
 }
-export default CodeMirror;
+
+export default CodeMirror;
\ No newline at end of file
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 512894f..33dd401 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/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>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index b2c6305..bc66547 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,4 +1,5 @@
 export interface Settings {
   openAiApiKey: string | null;
   isImageGenerationEnabled: boolean;
+  editorTheme: string;
 }

From 40c00fc12b84fe1d5c6750f9f73a7f66957b1b20 Mon Sep 17 00:00:00 2001
From: kachbit <kacherpearce@gmail.com>
Date: Sun, 19 Nov 2023 15:07:32 -0800
Subject: [PATCH 3/5] added select component

---
 frontend/src/components/ui/select.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 frontend/src/components/ui/select.tsx

diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..6d4d943
--- /dev/null
+++ b/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 };

From fa9124381c1f420adb263fa44555ac0c2e13ffb6 Mon Sep 17 00:00:00 2001
From: kacher <59241904+kachbit@users.noreply.github.com>
Date: Sun, 19 Nov 2023 15:17:36 -0800
Subject: [PATCH 4/5] minor fixes

---
 frontend/src/components/CodeMirror.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 6043fca..21008bc 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -1,9 +1,7 @@
 import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { espresso } from "thememirror";
-import { cobalt } from "thememirror";
-
+import { espresso, cobalt } from "thememirror";
 import {
   defaultKeymap,
   history,
@@ -28,7 +26,6 @@ function CodeMirror({ code, editorTheme }: Props) {
     if (editorTheme === "espresso") {
       selectedTheme = espresso;
     }
-
     view.current = new EditorView({
       state: EditorState.create({
         doc: code,
@@ -71,4 +68,4 @@ function CodeMirror({ code, editorTheme }: Props) {
   );
 }
 
-export default CodeMirror;
\ No newline at end of file
+export default CodeMirror;

From d865980123be5286bbc7f5b19c62193990e7c8f9 Mon Sep 17 00:00:00 2001
From: kacher <59241904+kachbit@users.noreply.github.com>
Date: Sun, 19 Nov 2023 18:01:17 -0800
Subject: [PATCH 5/5] Update App.tsx

---
 frontend/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3ba88d3..f579882 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -181,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