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

feat[tailwind.config.js]: Add new colors variables and remove hex colors from the code

Browse source
This commit is contained in:
Igor Carvalho 2023-06-19 19:29:18 -03:00
commit 662564653e
5 changed files with 37 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -142,8 +142,8 @@ export default function BuildTrigger({
side="left"
>
<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]
bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
bg-buildBackground dark:border-gray-600 cursor-pointer"
onClick={() => {
handleBuild(flow);
}}
@ -152,9 +152,9 @@ export default function BuildTrigger({
<div className="flex gap-3 items-center">
{isBuilding ? (
// Render your loading animation here when isBuilding is true
<Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
<Loading strokeWidth={1.5} className="text-build" />
) : (
<Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
<Zap className="sh-6 w-6 fill-build stroke-1 stroke-build"/>
)}
</div>
</button>

14
src/frontend/src/index.css
View file

@ -34,6 +34,14 @@
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--radius: 0.5rem;
--build: 11, 65% 61%; /* hsl(11, 65%, 61%) */
--build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
--round-btn-shadow: #00000063;
--hover-btn-background: #242f47;
}
.dark {
@ -67,6 +75,8 @@
--ring: 216 34% 17%; /* hsl(216 34% 17%) */
--radius: 0.5rem;
--build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
}
}
@ -91,6 +101,10 @@
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--radius: 0.5rem;
--build-trigger: #dc735b; /* hsl(11, 65%, 61%) */
--build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
--round-btn-shadow: #00000063;
--hover-btn-background: #242f47;
}
.dark {

8
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -66,7 +66,7 @@ export default function ExtraSidebar() {
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
<ShadTooltip delayDuration={1000} content="Import" side="top">
<button
className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
onClick={() => {
// openPopUp(<ImportModal />);
uploadFlow();
@ -79,7 +79,7 @@ export default function ExtraSidebar() {
<ShadTooltip delayDuration={1000} content="Export" side="top">
<button
className={classNames(
"hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
"hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
)}
onClick={(event) => {
openPopUp(<ExportModal />);
@ -91,7 +91,7 @@ export default function ExtraSidebar() {
<ShadTooltip delayDuration={1000} content="Code" side="top">
<button
className={classNames(
"hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
"hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
)}
onClick={(event) => {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@ -103,7 +103,7 @@ export default function ExtraSidebar() {
<ShadTooltip delayDuration={1000} content="Save" side="top">
<button
className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
onClick={(event) => {
saveFlow(flows.find((f) => f.id === tabId));
setSuccessData({ title: "Changes saved successfully" });

15
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -1,10 +1,11 @@
import { useContext, useState } from "react";
import { Settings2, Copy, Trash2 } from "lucide-react";
import { Settings2, Copy, Trash2, Menu } from "lucide-react";
import { classNames } from "../../../../utils";
import { TabsContext } from "../../../../contexts/tabsContext";
import { useReactFlow } from "reactflow";
import EditNodeModal from "../../../../modals/EditNodeModal";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState(
@ -31,7 +32,7 @@ const NodeToolbarComponent = (props) => {
<span className="isolate inline-flex rounded-md shadow-sm">
<ShadTooltip delayDuration={1000} content="Delete" side="top">
<button
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
onClick={() => {
props.deleteNode(props.data.id);
}}
@ -44,8 +45,8 @@ const NodeToolbarComponent = (props) => {
<button
className={classNames(
nodeLength > 0
? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
: "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
? "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
: "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
)}
onClick={(event) => {
event.preventDefault();
@ -71,7 +72,7 @@ const NodeToolbarComponent = (props) => {
{nodeLength > 0 && (
<ShadTooltip delayDuration={1000} content="Edit" side="top">
<button
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
onClick={(event) => {
event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />);
@ -83,7 +84,7 @@ const NodeToolbarComponent = (props) => {
)}
<Menu as="div" className="relative inline-block text-left z-100">
{/* <Menu as="div" className="relative inline-block text-left z-100">
<button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
<div>
<Menu.Button className="flex items-center">
@ -173,7 +174,7 @@ const NodeToolbarComponent = (props) => {
</Menu.Items>
</Transition>
</button>
</Menu>
</Menu> */}
</span>
</div>
</>

7
src/frontend/tailwind.config.js
View file

@ -16,6 +16,9 @@ module.exports = {
},
extend: {
colors: {
'btn-shadow': "var(--round-btn-shadow)",
buildBackground: "var(--build-background)",
build: "var(--build-trigger)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
@ -91,6 +94,10 @@ module.exports = {
},
extend: {
colors: {
'btn-hover-bg': "var(--hover-btn-background)",
'btn-shadow': "var(--round-btn-shadow)",
buildBackground: "var(--build-background)",
build: "var(--build-trigger)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",