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

🎨 style(cardComponent): update color of card background and icons

Browse source 
💄 style(cardComponent): update layout of card footer and remove unused code
The background color of the card component has been updated to a lighter shade of blue. The icons used for editing and deleting a flow have been updated to use the Lucide icon library. The layout of the card footer has been updated to align the content to the right and remove unused code.
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-06-10 16:52:30 -03:00
commit a95d7d7f6a
1 changed files with 23 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
View file

@ -3,6 +3,7 @@ import {
ArrowTopRightOnSquareIcon, ArrowTopRightOnSquareIcon,
TrashIcon, TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Edit, Trash } from "lucide-react";
import { OpenAiIcon } from "../../../../icons/OpenAi"; import { OpenAiIcon } from "../../../../icons/OpenAi";
import { Button } from "../../../../components/ui/button"; import { Button } from "../../../../components/ui/button";
import { Badge } from "../../../../components/ui/badge"; import { Badge } from "../../../../components/ui/badge";
@ -34,29 +35,38 @@ export const CardComponent = ({
let emoji = flow.style?.emoji || "🤖"; let emoji = flow.style?.emoji || "🤖";
// get random tailwind color // get random tailwind color
let color = flow.style?.color || "bg-blue-400"; let color = flow.style?.color || "bg-blue-200";
return ( return (
<Card className="group"> <Card className="group">
<CardHeader> <CardHeader>
<CardTitle className="flex justify-between items-start"> <CardTitle className="flex justify-between items-start">
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<span {/* <span
className={ className={
"rounded-md w-10 h-10 flex items-center justify-center text-2xl " + "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
color color
} }
> >
{emoji} {emoji}
</span> </span> */}
{flow.name} {flow.name}
</div> </div>
<button <div className="flex gap-5">
{/* make the icons shake a bit on hover */}
<Edit
className="w-4"
onClick={() => {
setTabIndex(idx);
setActiveTab("myflow");
}}
/>
<Trash
className="w-4"
onClick={() => { onClick={() => {
removeFlow(flow.id); removeFlow(flow.id);
}} }}
> />
<TrashIcon className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" /> </div>
</button>
</CardTitle> </CardTitle>
<CardDescription className="pt-2 pb-2"> <CardDescription className="pt-2 pb-2">
<div className="truncate-doubleline"> <div className="truncate-doubleline">
@ -69,8 +79,8 @@ export const CardComponent = ({
</CardHeader> </CardHeader>
<CardFooter> <CardFooter>
<div className="flex gap-2 w-full justify-between items-end"> <div className="flex gap-2 w-full justify-end items-end">
<div className="flex flex-wrap gap-2"> {/* <div className="flex flex-wrap gap-2">
<Badge variant="secondary">{idx === 0 ? "Agent" : "Tool"}</Badge> <Badge variant="secondary">{idx === 0 ? "Agent" : "Tool"}</Badge>
{idx === 0 && ( {idx === 0 && (
<Badge variant="secondary"> <Badge variant="secondary">
@ -80,19 +90,7 @@ export const CardComponent = ({
<span className="text-base">&nbsp;</span>OpenAI+ <span className="text-base">&nbsp;</span>OpenAI+
</Badge> </Badge>
)} )}
</div> </div> */}
<Button
variant="outline"
size="sm"
className="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all"
onClick={() => {
setTabIndex(idx);
setActiveTab("myflow");
}}
>
<ArrowTopRightOnSquareIcon className="w-4 mr-2" />
Edit
</Button>
</div> </div>
</CardFooter> </CardFooter>
</Card> </Card>