jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

adjust dark mode and dropdown

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-12 18:55:00 -03:00
commit 78ce80098d
2 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -34,7 +34,15 @@ export default function Dropdown({
: "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
} }
> >
<span className="block truncate w-full">{internalValue}</span> <span
className={
editNode
? "block truncate w-full dark:text-white"
: "block truncate w-full dark:text-black"
}
>
{internalValue}
</span>
<span <span
className={ className={
editNode editNode
@ -59,8 +67,8 @@ export default function Dropdown({
<Listbox.Options <Listbox.Options
className={ className={
editNode editNode
? "arrow-hide absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]" ? "arrow-hide absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
} }
> >
{options.map((option, id) => ( {options.map((option, id) => (
@ -69,10 +77,10 @@ export default function Dropdown({
className={({ active }) => className={({ active }) =>
classNames( classNames(
active && !editNode active && !editNode
? "text-white bg-indigo-600 dark:bg-indigo-500" ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
: "text-gray-900", : "text-gray-900",
active && editNode active && editNode
? "text-white bg-gray-400 dark:bg-gray-500" ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-black"
: "", : "",
editNode editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800" ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@ -86,7 +94,7 @@ export default function Dropdown({
<span <span
className={classNames( className={classNames(
selected ? "font-semibold" : "font-normal", selected ? "font-semibold" : "font-normal",
"block truncate" "block truncate "
)} )}
> >
{option} {option}
@ -96,7 +104,7 @@ export default function Dropdown({
<span <span
className={classNames( className={classNames(
editNode ? "text-gray-600" : "text-indigo-600", editNode ? "text-gray-600" : "text-indigo-600",
active ? "text-white" : "", active ? "text-white dark:text-black" : "",
"absolute inset-y-0 right-0 flex items-center pr-4" "absolute inset-y-0 right-0 flex items-center pr-4"
)} )}
> >

8
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -12,13 +12,19 @@ export default function TextAreaComponent({
editNode = false, editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp, closePopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [closePopUp]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">