1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-09-24 11:28:25 +02:00

Fixed react-select coloring

This commit is contained in:
Feenix 2022-11-14 21:37:39 +05:30
parent 268a1e1503
commit 3539867290
3 changed files with 27 additions and 40 deletions

View File

@ -33,7 +33,7 @@ function LeftPaneSteps(props) {
];
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 rounded-r-lg p-5">
{/* BATCH OPTION */}
<div className="flex flex-row items-center gap-2">
<input
@ -87,42 +87,10 @@ function LeftPaneSteps(props) {
DropdownIndicator: () => null,
}}
onChange={props.handleModelChange}
className="react-select-container select"
className="react-select-container"
classNamePrefix="react-select"
defaultValue={modelOptions[0]}
theme={(theme) => ({
...theme,
colors: {
...theme.colors,
primary: "rgb(71 85 105)",
primary25: "#f5f5f5",
primary50: "#f5f5f5",
},
})}
styles={{
input: (provided, state) => ({
...provided,
color: "rgb(100 100 100)",
}),
dropdownIndicator: (provided, state) => ({
...provided,
color: "rgb(15 15 15)",
}),
placeholder: (provided, state) => ({
...provided,
color: "rgb(15 15 15)",
fontWeight: "500",
}),
singleValue: (provided, state) => ({
...provided,
color: "rgb(15 15 15)",
fontWeight: "500",
}),
menu: (provided, state) => ({
...provided,
background: "#f5f5f5",
}),
}}
defaultMenuIsOpen={true}
/>
{props.model !== "models-DF2K" && !props.batchMode && (

View File

@ -264,7 +264,7 @@ const Home = () => {
return (
<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">
<div className="flex h-screen w-96 flex-col rounded-r-2xl bg-base-100">
{((!batchMode && imagePath.length > 0) ||
(batchMode && batchFolderPath.length > 0)) && (
<ResetButton resetImagePaths={resetImagePaths} />

View File

@ -48,17 +48,36 @@
.step-heading {
@apply mb-2 font-semibold;
}
.react-select-container {
@apply w-40 text-black;
@apply w-40;
}
.react-select-container .react-select__control {
@apply cursor-pointer rounded-lg p-1;
@apply h-12 cursor-pointer rounded-lg !border-0 !border-none !border-transparent bg-primary shadow-none;
}
.react-select-container .react-select__control--menu-is-open {
@apply bg-primary-focus;
}
.react-select-container .react-select__single-value {
@apply text-sm font-semibold uppercase text-primary-content;
}
.react-select-container .react-select__input-container {
@apply text-sm font-semibold uppercase text-primary-content;
}
.react-select-container .react-select__menu {
@apply rounded-lg bg-slate-300 p-1;
@apply rounded-lg bg-primary p-1;
}
.react-select-container .react-select__option {
@apply cursor-pointer rounded-md;
@apply cursor-pointer rounded-md bg-primary text-slate-50 hover:bg-primary-focus;
}
.react-select-container .react-select__option--is-selected {
@apply bg-accent;
}
}