Merge pull request #115 from kachbit/main

Dark mode.

frontend/src/App.tsx

@@ -171,7 +171,7 @@ function App() {
   };
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge settings={settings} />}
       {IS_RUNNING_ON_CLOUD && (
         <TermsOfServiceDialog
@@ -179,9 +179,8 @@ function App() {
           onOpenChange={handleTermDialogOpenChange}
         />
       )}
-
       <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 grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
           <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
@@ -211,7 +210,10 @@ function App() {
                     {executionConsole.slice(-1)[0]}
                   </div>
                   <div className="flex mt-4 w-full">
-                    <Button onClick={stop} className="w-full">
+                    <Button
+                      onClick={stop}
+                      className="w-full dark:text-white dark:bg-gray-700"
+                    >
                       Stop
                     </Button>
                   </div>
@@ -228,26 +230,32 @@ function App() {
                       value={updateInstruction}
                     />
                     <div className="flex justify-between items-center gap-x-2">
-                      <div className="font-500 text-xs text-slate-700">
+                      <div className="font-500 text-xs text-slate-700 dark:text-white">
                         Include screenshot of current version?
                       </div>
                       <Switch
                         checked={shouldIncludeResultImage}
                         onCheckedChange={setShouldIncludeResultImage}
+                        className="dark:bg-gray-700"
                       />
                     </div>
-                    <Button onClick={doUpdate}>Update</Button>
+                    <Button
+                      onClick={doUpdate}
+                      className="dark:text-white dark:bg-gray-700"
+                    >
+                      Update
+                    </Button>
                   </div>
                   <div className="flex items-center gap-x-2 mt-2">
                     <Button
                       onClick={downloadCode}
-                      className="flex items-center gap-x-2"
+                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
                     >
                       <FaDownload /> Download
                     </Button>
                     <Button
                       onClick={reset}
-                      className="flex items-center gap-x-2"
+                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
                     >
                       <FaUndo />
                       Reset

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,53 +109,90 @@ function SettingsDialog({ settings, setSettings }: Props) {
             }
           />
 
-          <Label htmlFor="screenshot-one-api-key">
-            <div>
-              ScreenshotOne API key (optional - only needed if you want to use
-              URLs directly instead of taking the screenshot yourself)
-            </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"
-                target="_blank"
-              >
-                Get 100 screenshots/mo for free.
-              </a>
-            </div>
-          </Label>
+          <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 className="leading-normal font-normal text-xs">
+                    If you want to use URLs directly instead of taking the
+                    screenshot yourself, add a ScreenshotOne API key.{" "}
+                    <a
+                      href="https://screenshotone.com?via=screenshot-to-code"
+                      className="underline"
+                      target="_blank"
+                    >
+                      Get 100 screenshots/mo for free.
+                    </a>
+                  </div>
+                </Label>
 
-          <Input
-            id="screenshot-one-api-key"
-            placeholder="ScreenshotOne API key"
-            value={settings.screenshotOneApiKey || ""}
-            onChange={(e) =>
-              setSettings((s) => ({
-                ...s,
-                screenshotOneApiKey: e.target.value,
-              }))
-            }
-          />
+                <Input
+                  id="screenshot-one-api-key"
+                  className="mt-2"
+                  placeholder="ScreenshotOne API key"
+                  value={settings.screenshotOneApiKey || ""}
+                  onChange={(e) =>
+                    setSettings((s) => ({
+                      ...s,
+                      screenshotOneApiKey: e.target.value,
+                    }))
+                  }
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
 
-          <Label htmlFor="editor-theme">
-            <div>Editor Theme</div>
-          </Label>
-          <div>
-            <Select // Use the custom Select component here
-              name="editor-theme"
-              value={settings.editorTheme}
-              onValueChange={(value) => handleThemeChange(value as EditorTheme)}
-            >
-              <SelectTrigger className="w-[180px]">
-                {capitalize(settings.editorTheme)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="cobalt">Cobalt</SelectItem>
-                <SelectItem value="espresso">Espresso</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <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>
+                  <div>
+                    <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.body.classList.toggle("dark");
+                        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>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)
+                      }
+                    >
+                      <SelectTrigger className="w-[180px]">
+                        {capitalize(settings.editorTheme)}
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="cobalt">Cobalt</SelectItem>
+                        <SelectItem value="espresso">Espresso</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </div>
 
         <DialogFooter>

frontend/src/components/ui/select.tsx

@@ -159,4 +159,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+}

frontend/src/index.css

@@ -61,9 +61,21 @@
 
     --radius: 0.5rem;
   }
+  
+  body.dark {
+    background-color: black;
+  }
+
+  div[role="presentation"].dark {
+    background-color: #09090b !important;
+  }
+
+  iframe {
+    background-color: white !important; 
+  }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.2 0% 0%;
     --foreground: 210 40% 98%;
 
     --card: 222.2 84% 4.9%;

frontend/src/main.tsx

@@ -7,6 +7,6 @@ import { Toaster } from "react-hot-toast";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-    <Toaster />
+    <Toaster toastOptions={{ className:"dark:bg-zinc-950 dark:text-white" }}/>
   </React.StrictMode>
 );