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

Fix Styles in general (#577)

Browse source 
This pull request addresses issues related to the appearance of the
project in both dark mode and normal mode. It includes various fixes to
ensure a consistent and visually appealing user experience.

Replace text highlight when underlining (I think it's ring, strange) ✅
Check hovers (shadows and color changes) in dark mode ✅
Adjust spacing parameters in all components (padding between the param
name and the input) ✅
There are icons with incorrect sizes ✅
Icon thickness ✅
In exports, if you change the name, it doesn't take effect (maybe
someone already solved it? Check) ✅
Edit node modal resposive ✅
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-03 10:58:33 -03:00 • committed by GitHub
commit 52e80c4875
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -86,7 +86,7 @@ export default function GenericNode({
)} )}
> >
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 "> <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 ">
<div className="flex w-full items-center gap-2 truncate text-lg"> <div className="flex w-full items-center truncate">
<Icon <Icon
strokeWidth={1.5} strokeWidth={1.5}
className="h-10 w-10 rounded p-1" className="h-10 w-10 rounded p-1"
@ -134,25 +134,25 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "h-4 w-4 rounded-full bg-status-green opacity-100" ? "w-4 h-4 rounded-full bg-status-red opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
"hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring" "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "h-4 w-4 rounded-full bg-status-red opacity-100" ? "w-4 h-4 rounded-full bg-status-red opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
"hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring" "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
!validationStatus || isBuilding !validationStatus || isBuilding
? "h-4 w-4 rounded-full bg-status-yellow opacity-100" ? "w-4 h-4 rounded-full bg-status-yellow opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
"absolute w-4 transition-all duration-200 ease-in-out hover:text-ring" "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
)} )}
></div> ></div>
</div> </div>

2
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -86,7 +86,7 @@ export default function SingleAlert({
{dropItem.link ? ( {dropItem.link ? (
<Link <Link
to={dropItem.link} to={dropItem.link}
className="whitespace-nowrap font-medium text-info-foreground hover:text-ring" className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
> >
Details Details
</Link> </Link>

2
src/frontend/src/alerts/notice/index.tsx
View file

@ -48,7 +48,7 @@ export default function NoticeAlert({
{link !== "" ? ( {link !== "" ? (
<Link <Link
to={link} to={link}
className="whitespace-nowrap font-medium text-info-foreground hover:text-ring" className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
> >
Details Details
</Link> </Link>

10
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -41,8 +41,8 @@ export default function ExtraSidebar() {
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-ring" ? "text-ring"
: "text-ring group-hover:text-ring", : "text-ring group-hover:text-accent-foreground",
"mr-3 h-6 w-6 flex-shrink-0" "mr-3 flex-shrink-0 h-6 w-6"
)} )}
/> />
{item.name} {item.name}
@ -65,14 +65,14 @@ export default function ExtraSidebar() {
)} )}
> >
<item.icon <item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-ring" className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
aria-hidden="true" aria-hidden="true"
/> />
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open ? "rotate-90 text-ring" : "text-ring", open ? "text-ring rotate-90" : "text-ring",
"transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-ring" "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"

2
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -177,7 +177,7 @@ export default function BuildTrigger({
) : isBuilding ? ( ) : isBuilding ? (
<Loading strokeWidth={1.5} className="stroke-build-trigger" /> <Loading strokeWidth={1.5} className="stroke-build-trigger" />
) : ( ) : (
<Zap className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1" /> <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
)} )}
</div> </div>
</button> </button>

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -73,7 +73,7 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink className="ml-3 h-6 w-6 hover:text-ring" /> <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />
)} )}
</button> </button>
</div> </div>

10
src/frontend/src/components/headerComponent/index.tsx
View file

@ -75,7 +75,7 @@ export default function Header() {
href="https://github.com/logspace-ai/langflow" href="https://github.com/logspace-ai/langflow"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
> >
<FaGithub className="mr-2 h-5 w-5" /> <FaGithub className="mr-2 h-5 w-5" />
Star Star
@ -89,7 +89,7 @@ export default function Header() {
rel="noreferrer" rel="noreferrer"
className="text-muted-foreground" className="text-muted-foreground"
> >
<FaTwitter className="h-5 w-5" /> <FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
</a> </a>
<a <a
href="https://discord.gg/EqksyE2EX9" href="https://discord.gg/EqksyE2EX9"
@ -97,12 +97,12 @@ export default function Header() {
rel="noreferrer" rel="noreferrer"
className="text-muted-foreground" className="text-muted-foreground"
> >
<FaDiscord className="h-5 w-5" /> <FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
</a> </a>
<Separator orientation="vertical" /> <Separator orientation="vertical" />
<button <button
className="text-muted-foreground hover:text-ring " className="text-muted-foreground hover:text-accent-foreground "
onClick={() => { onClick={() => {
setDark(!dark); setDark(!dark);
}} }}
@ -114,7 +114,7 @@ export default function Header() {
)} )}
</button> </button>
<button <button
className="relative text-muted-foreground hover:text-ring" className="text-muted-foreground hover:text-accent-foreground relative"
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false); setNotificationCenter(false);
const { top, left } = ( const { top, left } = (

2
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -111,7 +111,7 @@ export default function InputFileComponent({
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && !loading && ( {!editNode && !loading && (
<FileSearch2 className="ml-3 h-6 w-6 hover:text-ring" /> <FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
)} )}
{!editNode && loading && ( {!editNode && loading && (
<span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span> <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>

4
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -32,7 +32,7 @@ export default function InputListComponent({
<div <div
className={ className={
(disabled ? "pointer-events-none cursor-not-allowed" : "") + (disabled ? "pointer-events-none cursor-not-allowed" : "") +
"flex flex-col gap-3 py-2" "flex flex-col gap-3"
} }
> >
{inputList.map((i, idx) => { {inputList.map((i, idx) => {
@ -67,7 +67,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<Plus className={"h-4 w-4 hover:text-ring"} /> <Plus className={"h-4 w-4 hover:text-accent-foreground"} />
</button> </button>
) : ( ) : (
<button <button

4
src/frontend/src/components/promptComponent/index.tsx
View file

@ -36,7 +36,7 @@ export default function PromptAreaComponent({
disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full" disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
} }
> >
<div className="flex w-full items-center"> <div className="w-full flex items-center">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
@ -76,7 +76,7 @@ export default function PromptAreaComponent({
); );
}} }}
> >
{!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />} {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
</button> </button>
</div> </div>
</div> </div>

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

@ -36,8 +36,8 @@ export default function TextAreaComponent({
<div <div
className={ className={
editNode editNode
? "flex w-full items-center" ? "w-full items-center"
: "flex w-full items-center gap-3" : "w-full flex items-center gap-3"
} }
> >
<span <span
@ -79,7 +79,7 @@ export default function TextAreaComponent({
); );
}} }}
> >
{!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />} {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
</button> </button>
</div> </div>
</div> </div>

2
src/frontend/src/components/ui/button.tsx
View file

@ -14,7 +14,7 @@ const buttonVariants = cva(
outline: outline:
"border border-input hover:bg-accent hover:text-accent-foreground", "border border-input hover:bg-accent hover:text-accent-foreground",
primary: primary:
"border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm", "border bg-background text-secondary-foreground hover:bg-background/80 dark:hover:bg-background/10 hover:shadow-sm",
secondary: secondary:
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80", "border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground",

2
src/frontend/src/components/ui/dialog.tsx
View file

@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0", "fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className className
)} )}
{...props} {...props}

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -288,7 +288,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// create a link element and set its properties // create a link element and set its properties
const link = document.createElement("a"); const link = document.createElement("a");
link.href = jsonString; link.href = jsonString;
link.download = `${flowName}.json`; link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
// simulate a click on the link element to trigger the download // simulate a click on the link element to trigger the download
link.click(); link.click();

4
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -266,7 +266,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<Code2 className="h-6 w-6 pl-1 text-primary " aria-hidden="true" /> <Code2 strokeWidth={1.5} className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
</DialogTitle> </DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription> <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader> </DialogHeader>
@ -291,7 +291,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsList> </TabsList>
<div className="float-right"> <div className="float-right">
<button <button
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-ring " className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring hover:text-foreground"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <Check size={18} /> : <Clipboard size={15} />} {isCopied ? <Check size={18} /> : <Clipboard size={15} />}

8
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[700px] "> <DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{data.type}</span> <span className="pr-2">{data.type}</span>
@ -89,7 +89,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
{data.node?.description} {data.node?.description}
<div className="flex pt-4"> <div className="flex pt-3">
<Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable> <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
<span className="text-sm font-semibold text-primary"> <span className="text-sm font-semibold text-primary">
Parameters Parameters
@ -98,7 +98,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-fit max-h-[350px] w-full"> <div className="flex h-fit max-h-[400px] w-full">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg border-[1px] border-input bg-background", "w-full rounded-lg border-[1px] border-input bg-background",
@ -135,7 +135,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10"> <TableRow key={i} className="h-10">
<TableCell className="p-0 text-center text-sm text-foreground"> <TableCell className="p-0 text-center text-sm text-foreground truncate sm:px-3">
{data.node.template[n].name {data.node.template[n].name
? data.node.template[n].name ? data.node.template[n].name
: data.node.template[n].display_name} : data.node.template[n].display_name}

2
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -63,7 +63,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}

3
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -53,7 +53,8 @@ export default function CodeAreaModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<TerminalSquare <TerminalSquare
className="h-6 w-6 pl-1 text-primary " strokeWidth={1.5}
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

3
src/frontend/src/modals/exportModal/index.tsx
View file

@ -47,7 +47,8 @@ export default function ExportModal() {
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Export</span> <span className="pr-2">Export</span>
<Download <Download
className="h-6 w-6 pl-1 text-foreground" strokeWidth={1.5}
className="h-6 w-6 text-foreground pl-1"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

3
src/frontend/src/modals/genericModal/index.tsx
View file

@ -56,7 +56,8 @@ export default function GenericModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
<FileText <FileText
className="h-6 w-6 pl-1 text-primary " strokeWidth={1.5}
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

2
src/frontend/src/modals/importModal/index.tsx
View file

@ -160,7 +160,7 @@ export default function ImportModal() {
bgColor="bg-medium-emerald " bgColor="bg-medium-emerald "
description={example.description ?? "Prebuilt Examples"} description={example.description ?? "Prebuilt Examples"}
icon={ icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" /> <DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
addFlow(example, false); addFlow(example, false);

2
src/frontend/src/modals/promptModal/index.tsx
View file

@ -62,7 +62,7 @@ export default function PromptAreaModal({
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}

2
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -61,7 +61,7 @@ export default function TextAreaModal({
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}