From a839e4a239ae6b372ffccde0db17ef35ff579106 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 Nov 2023 04:13:22 -0500
Subject: [PATCH 1/5] add a better display string for output settings

---
 .../src/components/OutputSettingsSection.tsx  | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index fd76281..6e9b721 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -37,6 +37,40 @@ function convertStringToCSSOption(option: string) {
   }
 }
 
+function generateDisplayString(settings: OutputSettings) {
+  if (
+    settings.js === JSFrameworkOption.REACT &&
+    settings.css === CSSOption.TAILWIND
+  ) {
+    return (
+      <div>
+        Generating <span className="font-bold">React</span> +{" "}
+        <span className="font-bold">Tailwind</span> code
+      </div>
+    );
+  } else if (
+    settings.js === JSFrameworkOption.VANILLA &&
+    settings.css === CSSOption.TAILWIND
+  ) {
+    return (
+      <div>
+        Generating <span className="font-bold">HTML</span> +{" "}
+        <span className="font-bold">Tailwind</span> code
+      </div>
+    );
+  } else if (
+    settings.js === JSFrameworkOption.VANILLA &&
+    settings.css === CSSOption.BOOTSTRAP
+  ) {
+    return (
+      <div>
+        Generating <span className="font-bold">HTML</span> +{" "}
+        <span className="font-bold">Bootstrap</span> code
+      </div>
+    );
+  }
+}
+
 interface Props {
   outputSettings: OutputSettings;
   setOutputSettings: React.Dispatch<React.SetStateAction<OutputSettings>>;
@@ -82,7 +116,9 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="item-1">
         <AccordionTrigger>
-          <div className="flex gap-x-2">Output Settings </div>
+          <div className="flex gap-x-2">
+            {generateDisplayString(outputSettings)}{" "}
+          </div>
         </AccordionTrigger>
         <AccordionContent className="gap-y-2 flex flex-col pt-2">
           <div className="flex justify-between items-center pr-2">

From e2c1bd2537ef06062836206c1d87fae746389f7b Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 Nov 2023 04:34:01 -0500
Subject: [PATCH 2/5] improve UI for code output selection

---
 frontend/package.json                         |   1 +
 .../src/components/OutputSettingsSection.tsx  | 119 ++++++++++--------
 frontend/src/components/ui/popover.tsx        |  29 +++++
 frontend/yarn.lock                            |  22 ++++
 4 files changed, 122 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/components/ui/popover.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 0d180b6..476a72d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 6e9b721..9318ed0 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -6,14 +6,11 @@ import {
   SelectTrigger,
 } from "./ui/select";
 import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./ui/accordion";
 import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
+import { Label } from "@radix-ui/react-label";
+import { Button } from "./ui/button";
+import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";
 
 function displayCSSOption(option: CSSOption) {
   switch (option) {
@@ -113,50 +110,74 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   };
 
   return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          <div className="flex gap-x-2">
-            {generateDisplayString(outputSettings)}{" "}
+    <div className="flex flex-col gap-y-2 justify-between text-sm">
+      {generateDisplayString(outputSettings)}{" "}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Customize</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 text-sm">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium leading-none">Code Settings</h4>
+              <p className="text-muted-foreground">
+                Customize your code output
+              </p>
+            </div>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="output-settings-js">JS</Label>
+                <Select
+                  value={outputSettings.js}
+                  onValueChange={onJsFrameworkChange}
+                >
+                  <SelectTrigger
+                    className="col-span-2 h-8"
+                    id="output-settings-js"
+                  >
+                    {capitalize(outputSettings.js)}
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value={JSFrameworkOption.VANILLA}>
+                        Vanilla
+                      </SelectItem>
+                      <SelectItem value={JSFrameworkOption.REACT}>
+                        React
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="output-settings-css">CSS</Label>
+                <Select
+                  value={outputSettings.css}
+                  onValueChange={onCSSValueChange}
+                >
+                  <SelectTrigger
+                    className="col-span-2 h-8"
+                    id="output-settings-css"
+                  >
+                    {displayCSSOption(outputSettings.css)}
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value={CSSOption.TAILWIND}>
+                        Tailwind
+                      </SelectItem>
+                      <SelectItem value={CSSOption.BOOTSTRAP}>
+                        Bootstrap
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
           </div>
-        </AccordionTrigger>
-        <AccordionContent className="gap-y-2 flex flex-col pt-2">
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">CSS</span>
-            <Select value={outputSettings.css} onValueChange={onCSSValueChange}>
-              <SelectTrigger className="w-[180px]">
-                {displayCSSOption(outputSettings.css)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value={CSSOption.TAILWIND}>Tailwind</SelectItem>
-                  <SelectItem value={CSSOption.BOOTSTRAP}>Bootstrap</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">JS Framework</span>
-            <Select
-              value={outputSettings.js}
-              onValueChange={onJsFrameworkChange}
-            >
-              <SelectTrigger className="w-[180px]">
-                {capitalize(outputSettings.js)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value={JSFrameworkOption.VANILLA}>
-                    Vanilla
-                  </SelectItem>
-                  <SelectItem value={JSFrameworkOption.REACT}>React</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }
 
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
new file mode 100644
index 0000000..bbba7e0
--- /dev/null
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6edff02..16ffdbe 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -805,6 +805,28 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"

From 58298a15e7bfbe114b3ed82f5d69477d8919a970 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 Nov 2023 04:38:04 -0500
Subject: [PATCH 3/5] rename vanilla to "no framework"

---
 frontend/src/App.tsx                          |  2 +-
 .../src/components/OutputSettingsSection.tsx  | 22 ++++++++++++++-----
 frontend/src/types.ts                         |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0941a8b..a3999c7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -56,7 +56,7 @@ function App() {
   );
   const [outputSettings, setOutputSettings] = useState<OutputSettings>({
     css: CSSOption.TAILWIND,
-    js: JSFrameworkOption.VANILLA,
+    js: JSFrameworkOption.NO_FRAMEWORK,
   });
   const [shouldIncludeResultImage, setShouldIncludeResultImage] =
     useState<boolean>(false);
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 9318ed0..03b17c7 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -6,7 +6,6 @@ import {
   SelectTrigger,
 } from "./ui/select";
 import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
 import { Label } from "@radix-ui/react-label";
 import { Button } from "./ui/button";
@@ -23,6 +22,17 @@ function displayCSSOption(option: CSSOption) {
   }
 }
 
+function displayJSOption(option: JSFrameworkOption) {
+  switch (option) {
+    case JSFrameworkOption.REACT:
+      return "React";
+    case JSFrameworkOption.NO_FRAMEWORK:
+      return "No Framework";
+    default:
+      return option;
+  }
+}
+
 function convertStringToCSSOption(option: string) {
   switch (option) {
     case "tailwind":
@@ -46,7 +56,7 @@ function generateDisplayString(settings: OutputSettings) {
       </div>
     );
   } else if (
-    settings.js === JSFrameworkOption.VANILLA &&
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
     settings.css === CSSOption.TAILWIND
   ) {
     return (
@@ -56,7 +66,7 @@ function generateDisplayString(settings: OutputSettings) {
       </div>
     );
   } else if (
-    settings.js === JSFrameworkOption.VANILLA &&
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
     settings.css === CSSOption.BOOTSTRAP
   ) {
     return (
@@ -135,12 +145,12 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
                     className="col-span-2 h-8"
                     id="output-settings-js"
                   >
-                    {capitalize(outputSettings.js)}
+                    {displayJSOption(outputSettings.js)}
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
-                      <SelectItem value={JSFrameworkOption.VANILLA}>
-                        Vanilla
+                      <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
+                        No Framework
                       </SelectItem>
                       <SelectItem value={JSFrameworkOption.REACT}>
                         React
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 964ad5a..dd432d8 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -9,7 +9,7 @@ export enum CSSOption {
 }
 
 export enum JSFrameworkOption {
-  VANILLA = "vanilla",
+  NO_FRAMEWORK = "vanilla",
   REACT = "react",
   VUE = "vue",
 }

From 2ad9780e80ccec37f1e38b570cec0d7e87a43017 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 Nov 2023 04:43:07 -0500
Subject: [PATCH 4/5] minor visual improvements

---
 frontend/src/App.tsx                              | 7 +------
 frontend/src/components/OutputSettingsSection.tsx | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a3999c7..80f6714 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -181,15 +181,10 @@ function App() {
 
       <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
         <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
-          <div className="flex items-center justify-between mt-10">
+          <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
           </div>
-          {appState === AppState.INITIAL && (
-            <h2 className="text-sm text-gray-500 mb-2">
-              Drag & drop a screenshot to get started.
-            </h2>
-          )}
 
           {appState === AppState.INITIAL && (
             <OutputSettingsSection
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 03b17c7..7631043 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -60,7 +60,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.TAILWIND
   ) {
     return (
-      <div>
+      <div className="text-gray-800">
         Generating <span className="font-bold">HTML</span> +{" "}
         <span className="font-bold">Tailwind</span> code
       </div>

From 56e6f1f6085a8edb2523b24a47a1b53acff02921 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 Nov 2023 04:48:55 -0500
Subject: [PATCH 5/5] show output settings at all times

---
 frontend/src/App.tsx                          |  13 +-
 .../src/components/OutputSettingsSection.tsx  | 133 +++++++++---------
 2 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 80f6714..5bf973b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -186,12 +186,13 @@ function App() {
             <SettingsDialog settings={settings} setSettings={setSettings} />
           </div>
 
-          {appState === AppState.INITIAL && (
-            <OutputSettingsSection
-              outputSettings={outputSettings}
-              setOutputSettings={setOutputSettings}
-            />
-          )}
+          <OutputSettingsSection
+            outputSettings={outputSettings}
+            setOutputSettings={setOutputSettings}
+            shouldDisableUpdates={
+              appState === AppState.CODING || appState === AppState.CODE_READY
+            }
+          />
 
           {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
 
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 7631043..43318f8 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -81,15 +81,20 @@ function generateDisplayString(settings: OutputSettings) {
 interface Props {
   outputSettings: OutputSettings;
   setOutputSettings: React.Dispatch<React.SetStateAction<OutputSettings>>;
+  shouldDisableUpdates?: boolean;
 }
 
-function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
+function OutputSettingsSection({
+  outputSettings,
+  setOutputSettings,
+  shouldDisableUpdates = false,
+}: Props) {
   const onCSSValueChange = (value: string) => {
     setOutputSettings((prev) => {
       if (prev.js === JSFrameworkOption.REACT) {
         if (value !== CSSOption.TAILWIND) {
           toast.error(
-            "React only supports Tailwind CSS. Change JS framework to Vanilla to use Bootstrap."
+            'React only supports Tailwind CSS. Change JS framework to "No Framework" to use Bootstrap.'
           );
         }
         return {
@@ -122,71 +127,73 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   return (
     <div className="flex flex-col gap-y-2 justify-between text-sm">
       {generateDisplayString(outputSettings)}{" "}
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Customize</Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-80 text-sm">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <h4 className="font-medium leading-none">Code Settings</h4>
-              <p className="text-muted-foreground">
-                Customize your code output
-              </p>
-            </div>
-            <div className="grid gap-2">
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="output-settings-js">JS</Label>
-                <Select
-                  value={outputSettings.js}
-                  onValueChange={onJsFrameworkChange}
-                >
-                  <SelectTrigger
-                    className="col-span-2 h-8"
-                    id="output-settings-js"
-                  >
-                    {displayJSOption(outputSettings.js)}
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
-                        No Framework
-                      </SelectItem>
-                      <SelectItem value={JSFrameworkOption.REACT}>
-                        React
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
+      {!shouldDisableUpdates && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">Customize</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 text-sm">
+            <div className="grid gap-4">
+              <div className="space-y-2">
+                <h4 className="font-medium leading-none">Code Settings</h4>
+                <p className="text-muted-foreground">
+                  Customize your code output
+                </p>
               </div>
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="output-settings-css">CSS</Label>
-                <Select
-                  value={outputSettings.css}
-                  onValueChange={onCSSValueChange}
-                >
-                  <SelectTrigger
-                    className="col-span-2 h-8"
-                    id="output-settings-css"
+              <div className="grid gap-2">
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="output-settings-js">JS</Label>
+                  <Select
+                    value={outputSettings.js}
+                    onValueChange={onJsFrameworkChange}
                   >
-                    {displayCSSOption(outputSettings.css)}
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value={CSSOption.TAILWIND}>
-                        Tailwind
-                      </SelectItem>
-                      <SelectItem value={CSSOption.BOOTSTRAP}>
-                        Bootstrap
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
+                    <SelectTrigger
+                      className="col-span-2 h-8"
+                      id="output-settings-js"
+                    >
+                      {displayJSOption(outputSettings.js)}
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
+                          No Framework
+                        </SelectItem>
+                        <SelectItem value={JSFrameworkOption.REACT}>
+                          React
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="output-settings-css">CSS</Label>
+                  <Select
+                    value={outputSettings.css}
+                    onValueChange={onCSSValueChange}
+                  >
+                    <SelectTrigger
+                      className="col-span-2 h-8"
+                      id="output-settings-css"
+                    >
+                      {displayCSSOption(outputSettings.css)}
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value={CSSOption.TAILWIND}>
+                          Tailwind
+                        </SelectItem>
+                        <SelectItem value={CSSOption.BOOTSTRAP}>
+                          Bootstrap
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             </div>
-          </div>
-        </PopoverContent>
-      </Popover>
+          </PopoverContent>
+        </Popover>
+      )}
     </div>
   );
 }