1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-30 18:24:27 +01:00

Fixed dropdown style

This commit is contained in:
Nayam Amarshe 2022-09-28 10:04:17 +05:30
parent 796c18f8fb
commit ac51ad1a67
2 changed files with 23 additions and 8 deletions

View File

@ -26,6 +26,12 @@ function LeftPaneSteps(props) {
}, },
}; };
const modelOptions = [
{ label: "General Photo", value: "realesrgan-x4plus" },
{ label: "Digital Art", value: "realesrgan-x4plus-anime" },
{ label: "Sharpen Image", value: "models-DF2K" },
];
return ( return (
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5"> <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
{/* BATCH OPTION */} {/* BATCH OPTION */}
@ -71,11 +77,7 @@ function LeftPaneSteps(props) {
<p className="mb-2 text-sm text-white/60">Select Upscaling Type</p> <p className="mb-2 text-sm text-white/60">Select Upscaling Type</p>
<Select <Select
options={[ options={modelOptions}
{ label: "General Photo", value: "realesrgan-x4plus" },
{ label: "Digital Art", value: "realesrgan-x4plus-anime" },
{ label: "Sharpen Image", value: "models-DF2K" },
]}
components={{ components={{
IndicatorSeparator: () => null, IndicatorSeparator: () => null,
DropdownIndicator: () => null, DropdownIndicator: () => null,
@ -83,6 +85,16 @@ function LeftPaneSteps(props) {
onChange={props.handleModelChange} onChange={props.handleModelChange}
className="react-select-container" className="react-select-container"
classNamePrefix="react-select" classNamePrefix="react-select"
defaultValue={modelOptions[0]}
theme={(theme) => ({
...theme,
colors: {
...theme.colors,
primary: "rgb(71 85 105)",
primary25: "#f5f5f5",
primary50: "#f5f5f5",
},
})}
styles={{ styles={{
input: (provided, state) => ({ input: (provided, state) => ({
...provided, ...provided,

View File

@ -52,10 +52,13 @@
@apply w-40 text-black; @apply w-40 text-black;
} }
.react-select-container .react-select__control { .react-select-container .react-select__control {
@apply bg-gradient-white rounded-lg p-1; @apply bg-gradient-white cursor-pointer rounded-lg p-1;
} }
.react-select { .react-select-container .react-select__menu {
@apply bg-red-500; @apply rounded-lg bg-slate-300 p-1;
}
.react-select-container .react-select__option {
@apply cursor-pointer rounded-md;
} }
} }