make settings modal not too big

frontend/src/App.tsx

@@ -170,6 +170,7 @@ function App() {
     }));
   };
 
+  return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge settings={settings} />}
       {IS_RUNNING_ON_CLOUD && (

frontend/src/components/OutputSettingsSection.tsx

@@ -50,7 +50,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.TAILWIND
   ) {
     return (
-      <div>
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">React</span> +{" "}
         <span className="font-bold">Tailwind</span> code
       </div>
@@ -60,7 +60,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.TAILWIND
   ) {
     return (
-      <div className="text-gray-800">
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">HTML</span> +{" "}
         <span className="font-bold">Tailwind</span> code
       </div>
@@ -70,7 +70,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.BOOTSTRAP
   ) {
     return (
-      <div>
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">HTML</span> +{" "}
         <span className="font-bold">Bootstrap</span> code
       </div>

frontend/src/components/SettingsDialog.tsx

@@ -16,6 +16,12 @@ import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
 import { capitalize } from "../lib/utils";
 import { IS_RUNNING_ON_CLOUD } from "../config";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./ui/accordion";
 
 interface Props {
   settings: Settings;
@@ -42,7 +48,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
 
         {/* Access code */}
         {IS_RUNNING_ON_CLOUD && (
-          <div className="flex flex-col space-y-4 bg-slate-300 p-4 rounded">
+          <div className="flex flex-col space-y-4 bg-slate-300 p-4 rounded dark:text-white dark:bg-slate-800">
             <Label htmlFor="access-code">
               <div>Access Code</div>
               <div className="font-light mt-1 leading-relaxed">
@@ -51,7 +57,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
             </Label>
 
             <Input
-              id="access-code"
+              id="access-code dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               placeholder="Enter your Screenshot to Code access code"
               value={settings.accessCode || ""}
               onChange={(e) =>
@@ -103,13 +109,14 @@ function SettingsDialog({ settings, setSettings }: Props) {
             }
           />
 
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
+              <AccordionContent>
                 <Label htmlFor="screenshot-one-api-key">
-            <div>
+                  <div className="leading-normal font-normal text-xs">
-              ScreenshotOne API key (optional - only needed if you want to use
+                    If you want to use URLs directly instead of taking the
-              URLs directly instead of taking the screenshot yourself)
+                    screenshot yourself, add a ScreenshotOne API key.{" "}
-            </div>
-            <div className="font-light mt-2 leading-relaxed">
-              Only stored in your browser. Never stored on servers.{" "}
                     <a
                       href="https://screenshotone.com?via=screenshot-to-code"
                       className="underline"
@@ -122,6 +129,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
 
                 <Input
                   id="screenshot-one-api-key"
+                  className="mt-2"
                   placeholder="ScreenshotOne API key"
                   value={settings.screenshotOneApiKey || ""}
                   onChange={(e) =>
@@ -131,6 +139,15 @@ function SettingsDialog({ settings, setSettings }: Props) {
                     }))
                   }
                 />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Theme Settings</AccordionTrigger>
+              <AccordionContent className="space-y-4 flex flex-col">
+                <div className="flex items-center justify-between">
                   <Label htmlFor="app-theme">
                     <div>App Theme</div>
                   </Label>
@@ -138,22 +155,30 @@ function SettingsDialog({ settings, setSettings }: Props) {
                     <button
                       className="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
                       onClick={() => {
-              document.querySelector("div.mt-2")?.classList.toggle("dark"); // enable dark mode for sidebar
+                        document
+                          .querySelector("div.mt-2")
+                          ?.classList.toggle("dark"); // enable dark mode for sidebar
                         document.body.classList.toggle("dark");
-              document.querySelector('div[role="presentation"]')?.classList.toggle("dark"); // enable dark mode for upload container
+                        document
+                          .querySelector('div[role="presentation"]')
+                          ?.classList.toggle("dark"); // enable dark mode for upload container
                       }}
                     >
                       Toggle dark mode
                     </button>
                   </div>
+                </div>
+                <div className="flex items-center justify-between">
                   <Label htmlFor="editor-theme">
-            <div>Editor Theme</div>
+                    <div>Code Editor Theme</div>
                   </Label>
                   <div>
                     <Select // Use the custom Select component here
                       name="editor-theme"
                       value={settings.editorTheme}
-              onValueChange={(value) => handleThemeChange(value as EditorTheme)}
+                      onValueChange={(value) =>
+                        handleThemeChange(value as EditorTheme)
+                      }
                     >
                       <SelectTrigger className="w-[180px]">
                         {capitalize(settings.editorTheme)}
@@ -165,6 +190,10 @@ function SettingsDialog({ settings, setSettings }: Props) {
                     </Select>
                   </div>
                 </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
 
         <DialogFooter>
           <DialogClose>Save</DialogClose>