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:
parent
796c18f8fb
commit
ac51ad1a67
@ -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,
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user