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

Improve chat and build trigger buttons color and shadows

Browse source 
- The code changes consist of modifying the CSS classes of the chat and build trigger buttons, adjusting the hover effects, shadows and icon colors to make them more visually appealing.
This commit is contained in:
Rodrigo Nader 2023-06-16 01:43:40 -03:00
commit e34587703b
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -136,7 +136,7 @@ export default function BuildTrigger({
>
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
<div
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
onClick={() => {
handleBuild(flow);
@ -148,7 +148,7 @@ export default function BuildTrigger({
// Render your loading animation here when isBuilding is true
<Loading strokeWidth={1.5} style={{ color: "white" }} />
) : (
<Zap className="sh-6 w-6 fill-[#884cb1] stroke-1 stroke-[#884cb1]"/>
<Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400"/>
)}
</div>
</button>

8
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -1,5 +1,6 @@
import { Transition } from "@headlessui/react";
import { MessagesSquare } from "lucide-react";
import { alertContext } from "../../../contexts/alertContext";
import { useContext } from "react";
@ -31,15 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
<div className="absolute bottom-4 right-3">
<div
className="
rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
flex justify-center items-center w-12 h-12 bg-blue-500 dark:border-gray-600 cursor-pointer"
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
onClick={handleClick}
>
<button>
<div className="flex gap-3">
<MessagesSquare
className="h-6 w-6 text-blue-100 fill-blue-100"
className="pth-6 w-6 fill-[#5c8be1] stroke-1 stroke-[#5c8be1]"
style={{ color: "white" }}
strokeWidth={1.5}
/>