From 268a1e15033d5f34e2e003e6d296f2c7ef3200c2 Mon Sep 17 00:00:00 2001 From: Feenix <25067102+NayamAmarshe@users.noreply.github.com> Date: Sat, 12 Nov 2022 03:02:24 +0530 Subject: [PATCH] Added daisyUI --- package.json | 2 + renderer/components/Header.tsx | 4 +- renderer/components/LeftPaneSteps.tsx | 80 +++++++------------------- renderer/components/RightPaneInfo.tsx | 6 +- renderer/pages/_app.tsx | 4 +- renderer/pages/index.tsx | 23 ++------ renderer/styles/globals.css | 16 +++--- tailwind.config.js | 7 +-- yarn.lock | 82 ++++++++++++++++++++++++++- 9 files changed, 126 insertions(+), 98 deletions(-) diff --git a/package.json b/package.json index d7d5a46..61e1cd8 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "scripts": { "clean": "rimraf dist renderer/.next renderer/out", "start": "tsc && electron .", + "dev": "tsc && electron .", "build": "next build renderer && next export renderer", "tsc": "tsc", "pack-app": "npm run build && electron-builder --dir", @@ -142,6 +143,7 @@ }, "dependencies": { "app-root-dir": "^1.0.2", + "daisyui": "^2.39.1", "electron-is-dev": "^2.0.0", "electron-is-packaged": "^1.0.2", "electron-next": "^3.1.5", diff --git a/renderer/components/Header.tsx b/renderer/components/Header.tsx index 63db483..9a98b80 100644 --- a/renderer/components/Header.tsx +++ b/renderer/components/Header.tsx @@ -15,8 +15,8 @@ export default function Header() { data-tip="Star us on GitHub 😁" /> <div className="flex flex-col justify-center"> - <h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1> - <p className="text-neutral-400">AI Image Upscaler</p> + <h1 className="text-3xl font-bold">Upscayl</h1> + <p className="">AI Image Upscaler</p> </div> </div> </a> diff --git a/renderer/components/LeftPaneSteps.tsx b/renderer/components/LeftPaneSteps.tsx index db365f5..f5d053b 100644 --- a/renderer/components/LeftPaneSteps.tsx +++ b/renderer/components/LeftPaneSteps.tsx @@ -35,54 +35,36 @@ function LeftPaneSteps(props) { return ( <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5"> {/* BATCH OPTION */} - <div className="flex flex-row items-end"> + <div className="flex flex-row items-center gap-2"> + <input + type="checkbox" + className="checkbox" + onClick={handleBatchMode} + ></input> <p - className="mr-1 inline-block cursor-help text-sm text-white/70" + className="mr-1 inline-block cursor-help text-sm" data-tip="This will let you upscale all files in a folder at once" > - Batch Upscale: + Batch Upscale </p> - <button - className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${ - props.batchMode ? "bg-gradient-purple" : "bg-neutral-500" - }`} - onClick={handleBatchMode} - > - <div - className={`${ - props.batchMode ? "translate-x-4" : "translate-x-1" - } animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`} - ></div> - </button> </div> {/* ADVANCED OPTION */} - <div className="flex flex-row items-end"> + <div className="flex flex-row items-center gap-2"> + <input type="checkbox" className="checkbox" onClick={handleBatchMode} /> <p - className="mr-1 inline-block cursor-help text-sm text-white/70" + className="mr-1 inline-block cursor-help text-sm" data-tip="This will let you upscale all files in a folder at once" > - Advanced Options: + Advanced Options </p> - <button - className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${ - props.batchMode ? "bg-gradient-purple" : "bg-neutral-500" - }`} - onClick={handleBatchMode} - > - <div - className={`${ - props.batchMode ? "translate-x-4" : "translate-x-1" - } animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`} - ></div> - </button> </div> {/* STEP 1 */} <div data-tip={props.imagePath}> <p className="step-heading">Step 1</p> <button - className="animate bg-gradient-red rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-red-500" + className="btn-primary btn" onClick={ !props.batchMode ? props.selectImageHandler @@ -96,7 +78,7 @@ function LeftPaneSteps(props) { {/* STEP 2 */} <div className="animate-step-in"> <p className="step-heading">Step 2</p> - <p className="mb-2 text-sm text-white/60">Select Upscaling Type</p> + <p className="mb-2 text-sm">Select Upscaling Type</p> <Select options={modelOptions} @@ -105,7 +87,7 @@ function LeftPaneSteps(props) { DropdownIndicator: () => null, }} onChange={props.handleModelChange} - className="react-select-container" + className="react-select-container select" classNamePrefix="react-select" defaultValue={modelOptions[0]} theme={(theme) => ({ @@ -143,22 +125,11 @@ function LeftPaneSteps(props) { }} /> - {/* <select - name="select-model" - onDrop={(e) => props.handleDrop(e)} - className="animate bg-gradient-white block cursor-pointer rounded-lg p-3 font-medium text-black/90 outline-none hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-slate-400" - onChange={props.handleModelChange} - > - <option value="realesrgan-x4plus">General Photo</option> - <option value="realesrgan-x4plus-anime">Digital Art</option> - <option value="models-DF2K">Sharpen Image</option> - </select> */} - {props.model !== "models-DF2K" && !props.batchMode && ( <div className="mt-2 flex items-center gap-1"> <input type="checkbox" - className="checked:bg-gradient-white h-4 w-4 cursor-pointer appearance-none rounded-full bg-white/30 transition duration-200 focus:outline-none focus-visible:border focus-visible:shadow-lg focus-visible:shadow-white/40" + className="checkbox" checked={props.doubleUpscayl} onChange={(e) => { if (e.target.checked) { @@ -169,11 +140,7 @@ function LeftPaneSteps(props) { }} /> <p - className={`inline-block cursor-pointer select-none rounded-full text-sm font-medium ${ - props.doubleUpscayl - ? "bg-gradient-white px-2 text-black/90" - : "text-white/50" - }`} + className="cursor-pointer text-sm" onClick={(e) => { props.setDoubleUpscayl(!props.doubleUpscayl); }} @@ -181,7 +148,7 @@ function LeftPaneSteps(props) { Double Upscayl </p> <span - className="cursor-help rounded-full bg-white/20 px-3 text-center font-bold text-white/40" + className="badge-info badge cursor-help" data-tip="Enable this option to get an 8x upscayl. Note that this may not always work properly with all images, for example, images with really large resolutions." > i @@ -193,11 +160,8 @@ function LeftPaneSteps(props) { {/* STEP 3 */} <div className="animate-step-in" data-tip={props.outputPath}> <p className="step-heading">Step 3</p> - <p className="mb-2 text-sm text-white/60">Defaults to Image's path</p> - <button - className="animate bg-gradient mt-1 rounded-lg p-3 font-medium text-black/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-green-500" - onClick={props.outputHandler} - > + <p className="mb-2 text-sm">Defaults to Image's path</p> + <button className="btn-primary btn" onClick={props.outputHandler}> Set Output Folder </button> </div> @@ -206,7 +170,7 @@ function LeftPaneSteps(props) { <div className="animate-step-in"> <p className="step-heading">Step 4</p> <button - className="animate bg-gradient-upscayl rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-violet-500" + className="btn-accent btn" onClick={props.upscaylHandler} disabled={props.progress.length > 0} > @@ -215,7 +179,7 @@ function LeftPaneSteps(props) { </div> <ReactTooltip - className="max-w-md break-words bg-neutral-900 text-neutral-50" + className="bg-neutral-900 text-neutral-50 max-w-md break-words" place="top" /> </div> diff --git a/renderer/components/RightPaneInfo.tsx b/renderer/components/RightPaneInfo.tsx index f9f430a..01a0a7e 100644 --- a/renderer/components/RightPaneInfo.tsx +++ b/renderer/components/RightPaneInfo.tsx @@ -3,16 +3,16 @@ import React from "react"; function RightPaneInfo({ version, batchMode }) { return ( <> - <p className="p-5 pb-0 text-lg font-medium text-neutral-400"> + <p className="p-5 pb-1 text-lg font-semibold"> Select {batchMode ? "a Folder" : "an Image"} to Upscale </p> {batchMode && ( - <p className="w-full py-5 text-center text-neutral-500 md:w-96"> + <p className="w-full pb-5 text-center md:w-96"> Make sure that the folder doesn't contain anything except PNG, JPG, JPEG & WEBP images. </p> )} - <p className="text-neutral-600">Upscayl v{version}</p> + <p className="text-sm">Upscayl v{version}</p> </> ); } diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx index f625ffb..71b6523 100644 --- a/renderer/pages/_app.tsx +++ b/renderer/pages/_app.tsx @@ -4,12 +4,12 @@ import { AppProps } from "next/app"; const MyApp = ({ Component, pageProps }: AppProps) => { return ( - <> + <div data-theme="dark"> <Head> <title>Upscayl</title> </Head> <Component {...pageProps} /> - </> + </div> ); }; diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx index 7f80467..308accb 100644 --- a/renderer/pages/index.tsx +++ b/renderer/pages/index.tsx @@ -263,8 +263,8 @@ const Home = () => { }; return ( - <div className="flex h-screen w-screen flex-row overflow-hidden bg-[#1d1c23]"> - <div className="flex h-screen w-96 flex-col bg-[#26222c]"> + <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300"> + <div className="flex h-screen w-96 flex-col bg-base-100"> {((!batchMode && imagePath.length > 0) || (batchMode && batchFolderPath.length > 0)) && ( <ResetButton resetImagePaths={resetImagePaths} /> @@ -334,14 +334,14 @@ const Home = () => { {batchMode && upscaledBatchFolderPath.length === 0 && batchFolderPath.length > 0 && ( - <p className="select-none font-bold text-neutral-50"> + <p className="text-neutral-50 select-none font-bold"> Selected folder: {batchFolderPath} </p> )} {batchMode && upscaledBatchFolderPath.length > 0 && ( <> - <p className="select-none py-4 font-bold text-neutral-50"> + <p className="text-neutral-50 select-none py-4 font-bold"> All done! </p> <button @@ -388,21 +388,6 @@ const Home = () => { className="h-screen" /> )} - - {/* {imagePath.length === 0 && batchFolderPath.length === 0 ? ( - <RightPaneInfo version={version} /> - ) : upscaledImagePath.length === 0 && - upscaledBatchFolderPath.length === 0 ? ( - !batchMode ? ( - - ) : ( - - ) - ) : !batchMode ? ( - - ) : ( - - )} */} </div> </div> ); diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css index d35f783..1b16d77 100644 --- a/renderer/styles/globals.css +++ b/renderer/styles/globals.css @@ -11,15 +11,15 @@ } ::-webkit-scrollbar-track { - @apply rounded-full bg-neutral-700; + @apply rounded-full bg-base-300; } ::-webkit-scrollbar-thumb { - @apply rounded-full bg-neutral-500; + @apply rounded-full bg-base-200; } ::-webkit-scrollbar-thumb:hover { - @apply rounded-full bg-neutral-400; + @apply rounded-full bg-base-content; } } @@ -27,14 +27,14 @@ .animate { @apply transition-all duration-300 ease-in-out; } - .bg-gradient-purple { + /* .bg-gradient-purple { @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff]; } .bg-gradient-red { @apply bg-gradient-to-br from-rose-600 to-red-400 hover:from-red-400 hover:to-rose-600; } .bg-gradient-white { - @apply bg-gradient-to-br from-slate-400 to-neutral-100 hover:from-neutral-100 hover:to-slate-400; + @apply to-neutral-100 hover:from-neutral-100 bg-gradient-to-br from-slate-400 hover:to-slate-400; } .bg-gradient-upscayl { @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff]; @@ -44,15 +44,15 @@ } .bg-gradient-blue { @apply bg-gradient-to-br from-blue-500 to-sky-400 hover:from-sky-400 hover:to-blue-500; - } + } */ .step-heading { - @apply mb-2 font-medium text-white/80; + @apply mb-2 font-semibold; } .react-select-container { @apply w-40 text-black; } .react-select-container .react-select__control { - @apply bg-gradient-white cursor-pointer rounded-lg p-1; + @apply cursor-pointer rounded-lg p-1; } .react-select-container .react-select__menu { @apply rounded-lg bg-slate-300 p-1; diff --git a/tailwind.config.js b/tailwind.config.js index 5c9fe2a..4a856a7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,9 +3,6 @@ module.exports = { "./renderer/pages/**/*.{js,ts,jsx,tsx}", "./renderer/components/**/*.{js,ts,jsx,tsx}", ], - theme: { - extend: {}, - }, - darkMode: "class", - plugins: [require("tailwind-scrollbar")], + theme: {}, + plugins: [require("daisyui"), require("tailwind-scrollbar")], }; diff --git a/yarn.lock b/yarn.lock index d11d846..82f533a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -961,11 +961,27 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@^1.1.4, color-name@~1.1.4: +color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-string@^1.9.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" + integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + +color@^4.2: + version "4.2.3" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" + integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colors@1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz" @@ -1047,6 +1063,14 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-selector-tokenizer@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd" + integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg== + dependencies: + cssesc "^3.0.0" + fastparse "^1.1.2" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz" @@ -1057,6 +1081,16 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== +daisyui@^2.39.1: + version "2.39.1" + resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.39.1.tgz#0d9fe91dba114ab98651c8712de8b5c6a153abe2" + integrity sha512-J7goHjiQ6zk7irpKJ0HyElAuWF+x8iGoebQ1IfHM6BuvKoGSOcfZC/bedTultsX2Co5XARsE+qvE7BI1amUtsQ== + dependencies: + color "^4.2" + css-selector-tokenizer "^0.8.0" + postcss-js "^4.0.0" + tailwindcss "^3" + debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4: version "4.3.4" resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz" @@ -1376,6 +1410,11 @@ fast-json-stable-stringify@^2.0.0: resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== +fastparse@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" + integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== + fastq@^1.6.0: version "1.13.0" resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz" @@ -1713,6 +1752,11 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-binary-path@~2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz" @@ -2552,6 +2596,13 @@ shebang-regex@^3.0.0: resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== + dependencies: + is-arrayish "^0.3.1" + simple-update-notifier@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz#7edf75c5bdd04f88828d632f762b2bc32996a9cc" @@ -2665,6 +2716,35 @@ tailwind-scrollbar@^2.0.1: resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728" integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg== +tailwindcss@^3: + version "3.2.4" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250" + integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ== + dependencies: + arg "^5.0.2" + chokidar "^3.5.3" + color-name "^1.1.4" + detective "^5.2.1" + didyoumean "^1.2.2" + dlv "^1.1.3" + fast-glob "^3.2.12" + glob-parent "^6.0.2" + is-glob "^4.0.3" + lilconfig "^2.0.6" + micromatch "^4.0.5" + normalize-path "^3.0.0" + object-hash "^3.0.0" + picocolors "^1.0.0" + postcss "^8.4.18" + postcss-import "^14.1.0" + postcss-js "^4.0.0" + postcss-load-config "^3.1.4" + postcss-nested "6.0.0" + postcss-selector-parser "^6.0.10" + postcss-value-parser "^4.2.0" + quick-lru "^5.1.1" + resolve "^1.22.1" + tailwindcss@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"