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

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

@ -86,7 +86,7 @@ export default function SingleAlert({
{dropItem.link ? (
<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
</Link>

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

@ -48,7 +48,7 @@ export default function NoticeAlert({
{link !== "" ? (
<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
</Link>

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

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

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

@ -177,7 +177,7 @@ export default function BuildTrigger({
) : isBuilding ? (
<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>
</button>

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

@ -73,7 +73,7 @@ export default function CodeAreaComponent({
}}
>
{!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>
</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"
target="_blank"
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" />
Star
@ -89,7 +89,7 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaTwitter className="h-5 w-5" />
<FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
</a>
<a
href="https://discord.gg/EqksyE2EX9"
@ -97,12 +97,12 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaDiscord className="h-5 w-5" />
<FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
</a>
<Separator orientation="vertical" />
<button
className="text-muted-foreground hover:text-ring "
className="text-muted-foreground hover:text-accent-foreground "
onClick={() => {
setDark(!dark);
}}
@ -114,7 +114,7 @@ export default function Header() {
)}
</button>
<button
className="relative text-muted-foreground hover:text-ring"
className="text-muted-foreground hover:text-accent-foreground relative"
onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false);
const { top, left } = (

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

@ -111,7 +111,7 @@ export default function InputFileComponent({
</span>
<button onClick={handleButtonClick}>
{!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 && (
<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
className={
(disabled ? "pointer-events-none cursor-not-allowed" : "") +
"flex flex-col gap-3 py-2"
"flex flex-col gap-3"
}
>
{inputList.map((i, idx) => {
@ -67,7 +67,7 @@ export default function InputListComponent({
onChange(inputList);
}}
>
<Plus className={"h-4 w-4 hover:text-ring"} />
<Plus className={"h-4 w-4 hover:text-accent-foreground"} />
</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"
}
>
<div className="flex w-full items-center">
<div className="w-full flex items-center">
<span
onClick={() => {
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>
</div>
</div>

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

@ -36,8 +36,8 @@ export default function TextAreaComponent({
<div
className={
editNode
? "flex w-full items-center"
: "flex w-full items-center gap-3"
? "w-full items-center"
: "w-full flex items-center gap-3"
}
>
<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>
</div>
</div>

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

@ -14,7 +14,7 @@ const buttonVariants = cva(
outline:
"border border-input hover:bg-accent hover:text-accent-foreground",
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:
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80",
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
ref={ref}
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
)}
{...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
const link = document.createElement("a");
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
link.click();

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

@ -266,7 +266,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader>
<DialogTitle className="flex items-center">
<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>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
@ -291,7 +291,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsList>
<div className="float-right">
<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}
>
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}

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

@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[700px] ">
<DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">{data.type}</span>
@ -89,16 +89,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogTitle>
<DialogDescription>
{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>
<span className="text-sm font-semibold text-primary ">
<span className="text-sm font-semibold text-primary">
Parameters
</span>
</div>
</DialogDescription>
</DialogHeader>
<div className="flex h-fit max-h-[350px] w-full">
<div className="flex h-fit max-h-[400px] w-full">
<div
className={classNames(
"w-full rounded-lg border-[1px] border-input bg-background",
@ -134,8 +134,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "int")
)
.map((n, i) => (
<TableRow key={i} className="h-10 ">
<TableCell className="p-0 text-center text-sm text-foreground">
<TableRow key={i} className="h-10">
<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].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">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => {
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">
<span className="pr-2">Edit Code</span>
<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"
/>
</DialogTitle>

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

@ -47,7 +47,8 @@ export default function ExportModal() {
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<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"
/>
</DialogTitle>

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

@ -56,7 +56,8 @@ export default function GenericModal({
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<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"
/>
</DialogTitle>

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

@ -160,7 +160,7 @@ export default function ImportModal() {
bgColor="bg-medium-emerald "
description={example.description ?? "Prebuilt Examples"}
icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
<DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" />
}
onClick={() => {
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">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => {
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">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
className="rounded-md text-ring hover:text-accent-foreground"
onClick={() => {
setModalOpen(false);
}}