Update upscayl theme

renderer/components/settings-tab/ThemeSelect.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 export function ThemeSelect() {
   const availableThemes = [
+    { label: "upscayl", value: "upscayl" },
     { label: "light", value: "light" },
     { label: "dark", value: "dark" },
     { label: "cupcake", value: "cupcake" },

renderer/components/settings-tab/ToggleOverwrite.tsx

@@ -18,7 +18,7 @@ const ToggleOverwrite = ({ overwrite, setOverwrite }: ToggleOverwriteProps) => {
       <p className="text-sm font-medium">OVERWRITE PREVIOUS UPSCALE</p>
       <input
         type="checkbox"
-        className="toggle-primary toggle"
+        className="toggle"
         checked={overwrite}
         onClick={() => {
           setOverwrite((oldValue) => {

renderer/components/upscayl-tab/view/RightPaneInfo.tsx

@@ -2,18 +2,22 @@ import React from "react";
 
 function RightPaneInfo({ version, batchMode }) {
   return (
-    <>
-      <p className="p-5 pb-1 text-lg font-semibold">
+    <div className="flex flex-col items-center bg-base-200 p-4 rounded-btn">
+      <p className="pb-1 text-lg font-semibold">
         Select {batchMode ? "a Folder" : "an Image"} to Upscayl
       </p>
-      {batchMode && (
-        <p className="w-full pb-5 text-center md:w-96">
+      {batchMode ? (
+        <p className="w-full pb-5 text-center md:w-96 text-primary-content/80">
           Make sure that the folder doesn't contain anything except PNG, JPG,
           JPEG & WEBP images.
         </p>
+      ) : (
+        <p className="w-full pb-5 text-center md:w-96 text-primary-content/80">
+          Select or drag and drop a PNG, JPG, JPEG or WEBP image.
+        </p>
       )}
-      <p className="text-sm">Upscayl v{version}</p>
-    </>
+      <p className="text-sm badge badge-primary">Upscayl v{version}</p>
+    </div>
   );
 }
 

renderer/pages/index.tsx

@@ -570,7 +570,7 @@ const Home = () => {
               All done!
             </p>
             <button
-              className="btn btn-primary bg-gradient-blue rounded-lg p-3 font-medium text-white/90 transition-colors"
+              className="btn btn-primary bg-gradient-blue rounded-btn p-3 font-medium text-white/90 transition-colors"
               onClick={openFolderHandler}>
               Open Upscayled Folder
             </button>

renderer/styles/globals.css

@@ -149,6 +149,18 @@
   animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);
 }
 
+[data-theme="upscayl"] .btn {
+  @apply ring-1 ring-slate-500 font-medium normal-case !min-h-min h-10 py-2 px-3;
+}
+
+[data-theme="upscayl"] input[type="range"] {
+  @apply rounded-full;
+}
+
+[data-theme="upscayl"] .react-select-container .react-select__control {
+  @apply rounded-btn h-10 ring-1 ring-slate-500 cursor-pointer !border-0 !border-none !border-transparent bg-primary shadow-none;
+}
+
 @keyframes animate-step-in {
   0% {
     opacity: 0;

tailwind.config.js

@@ -20,6 +20,26 @@ module.exports = {
   plugins: [require("daisyui"), require("tailwind-scrollbar")],
   daisyui: {
     themes: [
+      {
+        upscayl: {
+          primary: "#334155",
+          secondary: "#4f46e5",
+          accent: "#6d28d9",
+          neutral: "#475569",
+          "base-100": "#1e293b",
+          "base-200": "#0f172a",
+          "base-300": "#020617",
+          "--rounded-btn": "2rem", // border radius rounded-btn utility class, used in buttons and similar element
+          "--rounded-badge": "2rem", // border radius rounded-badge utility class, used in badges and similar
+          "--animation-btn": "0.5s", // duration of animation when you click on button
+          "--animation-input": "0.5s", // duration of animation for inputs like checkbox, toggle, radio, etc
+          "--btn-text-case": "uppercase", // set default text transform for buttons
+          "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
+          "--border-btn": "1px", // border width of buttons
+          "--tab-border": "1px", // border width of tabs
+          "--tab-radius": "0.5rem", // border radius of tabs
+        },
+      },
       "light",
       "dark",
       "cupcake",