make settings modal not too big
This commit is contained in:
Abi Raja
parent
514688a1c0
commit
b98bcb6e09
@ -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 && (
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,67 +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,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user