Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make settings modal not too big

Browse Source
This commit is contained in:
Abi Raja 2023-11-30 08:59:51 -05:00
parent 514688a1c0
commit b98bcb6e09
3 changed files with 95 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.tsx
View File

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

6
frontend/src/components/OutputSettingsSection.tsx
View File

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

153
frontend/src/components/SettingsDialog.tsx
View File

@ -16,6 +16,12 @@ import { Input } from "./ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
import { capitalize } from "../lib/utils"; import { capitalize } from "../lib/utils";
import { IS_RUNNING_ON_CLOUD } from "../config"; import { IS_RUNNING_ON_CLOUD } from "../config";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "./ui/accordion";
interface Props { interface Props {
settings: Settings; settings: Settings;
@ -42,7 +48,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
{/* Access code */} {/* Access code */}
{IS_RUNNING_ON_CLOUD && ( {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"> <Label htmlFor="access-code">
<div>Access Code</div> <div>Access Code</div>
<div className="font-light mt-1 leading-relaxed"> <div className="font-light mt-1 leading-relaxed">
@ -51,7 +57,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
</Label> </Label>
<Input <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" placeholder="Enter your Screenshot to Code access code"
value={settings.accessCode || ""} value={settings.accessCode || ""}
onChange={(e) => onChange={(e) =>
@ -103,67 +109,90 @@ function SettingsDialog({ settings, setSettings }: Props) {
} }
/> />
<Label htmlFor="screenshot-one-api-key"> <Accordion type="single" collapsible className="w-full">
<div> <AccordionItem value="item-1">
ScreenshotOne API key (optional - only needed if you want to use <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
URLs directly instead of taking the screenshot yourself) <AccordionContent>
</div> <Label htmlFor="screenshot-one-api-key">
<div className="font-light mt-2 leading-relaxed"> <div className="leading-normal font-normal text-xs">
Only stored in your browser. Never stored on servers.{" "} If you want to use URLs directly instead of taking the
<a screenshot yourself, add a ScreenshotOne API key.{" "}
href="https://screenshotone.com?via=screenshot-to-code" <a
className="underline" href="https://screenshotone.com?via=screenshot-to-code"
target="_blank" className="underline"
> target="_blank"
Get 100 screenshots/mo for free. >
</a> Get 100 screenshots/mo for free.
</div> </a>
</Label> </div>
</Label>
<Input <Input
id="screenshot-one-api-key" id="screenshot-one-api-key"
placeholder="ScreenshotOne API key" className="mt-2"
value={settings.screenshotOneApiKey || ""} placeholder="ScreenshotOne API key"
onChange={(e) => value={settings.screenshotOneApiKey || ""}
setSettings((s) => ({ onChange={(e) =>
...s, setSettings((s) => ({
screenshotOneApiKey: e.target.value, ...s,
})) screenshotOneApiKey: e.target.value,
} }))
/> }
<Label htmlFor="app-theme"> />
<div>App Theme</div> </AccordionContent>
</Label> </AccordionItem>
<div> </Accordion>
<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" <Accordion type="single" collapsible className="w-full">
onClick={() => { <AccordionItem value="item-1">
document.querySelector("div.mt-2")?.classList.toggle("dark"); // enable dark mode for sidebar <AccordionTrigger>Theme Settings</AccordionTrigger>
document.body.classList.toggle("dark"); <AccordionContent className="space-y-4 flex flex-col">
document.querySelector('div[role="presentation"]')?.classList.toggle("dark"); // enable dark mode for upload container <div className="flex items-center justify-between">
}} <Label htmlFor="app-theme">
> <div>App Theme</div>
Toggle dark mode </Label>
</button> <div>
</div> <button
<Label htmlFor="editor-theme"> 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"
<div>Editor Theme</div> onClick={() => {
</Label> document
<div> .querySelector("div.mt-2")
<Select // Use the custom Select component here ?.classList.toggle("dark"); // enable dark mode for sidebar
name="editor-theme" document.body.classList.toggle("dark");
value={settings.editorTheme} document
onValueChange={(value) => handleThemeChange(value as EditorTheme)} .querySelector('div[role="presentation"]')
> ?.classList.toggle("dark"); // enable dark mode for upload container
<SelectTrigger className="w-[180px]"> }}
{capitalize(settings.editorTheme)} >
</SelectTrigger> Toggle dark mode
<SelectContent> </button>
<SelectItem value="cobalt">Cobalt</SelectItem> </div>
<SelectItem value="espresso">Espresso</SelectItem> </div>
</SelectContent> <div className="flex items-center justify-between">
</Select> <Label htmlFor="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)
}
>
<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> </div>
<DialogFooter> <DialogFooter>