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

refactor(frontend): Adjust styling in chatComponent, buildTrigger, dropdownComponent, and other components

Browse source 
- Adjusted styling in chatComponent, buildTrigger, dropdownComponent, and other components to improve visual consistency and enhance user experience.
- Updated button styles, background colors, and text colors to create a more cohesive design across the application.
- Fixed incorrect color values and replaced them with appropriate color variables from the tailwind configuration.
- Removed redundant styles and optimized the code for better maintainability.
This commit is contained in:
Rodrigo Nader 2023-06-29 02:39:35 -03:00
commit b9e9f3ba4c
8 changed files with 106 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -158,7 +158,7 @@ export default function BuildTrigger({
>
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
<div
className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE] cursor-pointer`}
className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`}
onClick={() => {
handleBuild(flow);
}}
@ -170,7 +170,8 @@ export default function BuildTrigger({
{isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true
<RadialProgressComponent
color={"text-orange-400"}
// ! confirm below works
color={"text-build-trigger"}
value={progress}
></RadialProgressComponent>
) : isBuilding ? (

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

@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
>
<div className="absolute bottom-4 right-3">
<div
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] cursor-pointer"
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow
bg-border cursor-pointer"
onClick={handleClick}
>
<button>
<div className="flex gap-3">
<MessagesSquare
className="pth-6 w-6 fill-[#5c8be1] stroke-1 stroke-[#5c8be1]"
className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger"
style={{ color: "white" }}
strokeWidth={1.5}
/>

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

@ -34,9 +34,9 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1 bg-transparent" +
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
INPUT_STYLE
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm" +
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
INPUT_STYLE
}
>
@ -47,7 +47,7 @@ export default function Dropdown({
}
>
<ChevronsUpDown
className="h-5 w-5 text-border"
className="h-5 w-5 text-muted-foreground"
aria-hidden="true"
/>
</span>

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

@ -2,6 +2,9 @@
@tailwind components;
@tailwind utilities;
/* ! Confirm that all colors here are found in tailwind config */
@layer base {
:root {
@ -27,68 +30,74 @@
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--round-btn-shadow: #00000063;
--hover-btn-background: #242f47;
--build-background: #E2E7EE;
--build-trigger: #dc735b; /* hsl(11, 65%, 61%) */
--chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
--build-trigger: #dc735b;
--chat-trigger: #5c8be1;
--error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
--error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
--error-background: #fef2f2;
--error-foreground: #991b1b;
--status-red: #ef4444; /* tailwind red 500 medium-red*/
--status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
--status-green: #4ade80; /* tailwind green 400 medium-green*/
--status-red: #ef4444;
--status-yellow: #eab308;
--status-green: #4ade80;
--success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/
--success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
--success-background: #f0fdf4;
--success-foreground: #14532d;
--high-indigo: #4338ca; /*tailwind indigo 700*/
--medium-indigo: #6366f1; /* tailwind indigo 500 */
--medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--medium-dark-blue:#1d4ed8;
}
.dark {
--background: 224 71% 0%; /* hsl(224 71% 4%) */
--foreground: 213 31% 0%; /* hsl(213 31% 91%) */
--muted: 223 47% 0%; /* hsl(223 47% 11%) */
--muted-foreground: 215.4 16.3% 0%; /* hsl(215 16% 56%) */
--popover: 224 71% 0%; /* hsl(224 71% 4%) */
--popover-foreground: 215 20.2% 0%; /* hsl(215 20% 65%) */
--card: 224 71% 0%; /* hsl(224 71% 4%) */
--card-foreground: 213 31% 0%; /* hsl(213 31% 91%) */
--border: 216 34% 0%; /* hsl(216 34% 17%) */
--input: 216 34% 0%; /* hsl(216 34% 17%) */
--primary: 210 40% 0%; /* hsl(210 40% 98%) */
--primary-foreground: 222.2 47.4% 0%; /* hsl(222 47% 1%) */
--secondary: 222.2 47.4% 0%; /* hsl(222 47% 11%) */
--secondary-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
--accent: 216 34% 0%; /* hsl(216 34% 17%) */
--accent-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
--destructive: 0 63% 0%; /* hsl(0 63% 31%) */
--destructive-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
--ring: 216 34% 0%; /* hsl(216 34% 17%) */
--background: 224 71% 4%; /* hsl(224 71% 4%) */
--foreground: 213 31% 85%; /* hsl(213 31% 91%) */
--muted: 223 40% 11%; /* hsl(223 47% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
--popover: 224 71% 4%; /* hsl(224 71% 4%) */
--popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--card: 224 71% 7%; /* hsl(224 71% 4%) */
--card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
--border: 216 24% 17%; /* hsl(216 34% 17%) */
--input: 216 24% 17%; /* hsl(216 34% 17%) */
--primary: 210 40% 80%; /* hsl(210 40% 98%) */
--primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
--secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--accent: 216 24% 17%; /* hsl(216 34% 17%) */
--accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
--destructive: 0 63% 31%; /* hsl(0 63% 31%) */
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--ring: 216 24% 30%; /* hsl(216 24% 30%) */
--radius: 0.5rem;
--round-btn-shadow: #000000;
--hover-btn-background: #000000;
--round-btn-shadow: #00000063;
--build-background: #000000;
--build-trigger: #000000; /* hsl(11, 65%, 61%) */
--chat-trigger: #000000; /* tailwind blue 100 USED IN CHAT BACKGROUND */
--build-trigger: #dc735b;
--chat-trigger: #5c8be1;
--error-background: #000000; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
--error-foreground: #000000; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
--error-foreground: #c2b7b7;
--error-background: #671212;
--status-red: #000000; /* tailwind red 500 medium-red*/
--status-yellow: #000000; /* tailwind yellow 500 medium-yellow*/
--status-green: #000000; /* tailwind green 400 medium-green*/
--status-red: #ef4444;
--status-yellow: #eab308;
--status-green: #4ade80;
--success-background: #000000; /* tailwind green 50 USED IN SUCCESS MSG light-green*/
--success-foreground: #000000; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
--high-indigo: #000000; /*tailwind indigo 700*/
--medium-indigo: #000000; /* tailwind indigo 500 */
--medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
--success-background: #f0fdf4;
--success-foreground: #14532d;
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--medium-dark-blue:#1d4ed8;
}}
@layer base {

1
src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
View file

@ -11,6 +11,7 @@ const ConnectionLineComponent = ({
<g>
<path
fill="none"
// ! Replace hash # colors here
stroke="#222"
strokeWidth={1.5}
className="animated "

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

@ -133,7 +133,8 @@ export default function ExtraSidebar() {
}}
/>
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
<Search size={20} color="#000000" />
{/* ! replace hash color here */}
<Search size={20} className="text-primary" />
</div>
</div>

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

@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
<button
className={classNames(
nodeLength > 0
? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
: "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
: "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
)}
onClick={(event) => {
event.preventDefault();
@ -72,7 +72,7 @@ const NodeToolbarComponent = (props) => {
{nodeLength > 0 && (
<ShadTooltip delayDuration={1000} content="Edit" side="top">
<button
className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
onClick={(event) => {
event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />);

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

@ -3,9 +3,11 @@ const { fontFamily } = require("tailwindcss/defaultTheme");
import plugin from "tailwindcss/plugin";
// ! Check if removing the other module.exports made sense
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
important: true,
theme: {
container: {
center: true,
@ -16,42 +18,44 @@ module.exports = {
},
extend: {
colors: {
white: "var(--white)",
'high-light-gray': "var(--high-light-gray)",
'almost-dark-gray': "var(--almost-dark-gray)",
'almost-light-blue': "var(--almost-light-blue)",
'high-indigo': "var(--high-indigo)",
'medium-high-indigo': "var(--medium-high-indigo)",
'medium-emerald': "var(--medium-emerald)",
'status-yellow': "var(--status-yellow)",
'almost-medium-green': "var(--almost-medium-green)",
'almost-medium-blue': "var(--almost-medium-blue)",
'medium-indigo': "var(--medium-indigo)",
'light-slate': "var(--light-slate)",
'success-background': "var(--success-background)",
'success-foreground': "var(--success-foreground)",
'status-green': "var(--status-green)",
'medium-dark-green': "var(--medium-dark-green)",
'light-blue': "var(--light-blue)",
'dark-blue': "var(--dark-blue)",
'medium-blue': "var(--medium-blue)",
'medium-dark-blue': "var(--medium-dark-blue)",
'almost-medium-gray': "var(--almost-medium-gray)",
'almost-medium-green': "var(--almost-medium-green)",
'almost-medium-red': "var(--almost-medium-red)",
'medium-dark-red': "var(--medium-dark-red)",
'error-foreground': "var(--error-foreground)",
'btn-shadow': "var(--round-btn-shadow)",
'build-trigger': "var(--build-trigger)",
'chat-trigger': "var(--chat-trigger)",
'dark-blue': "var(--dark-blue)",
'dark-gray': "var(--dark-gray)",
'dark-red': "var(--dark-red)",
'error-background': "var(--error-background)",
'status-red': "var(--status-red)",
'almost-medium-gray': "var(--almost-medium-gray)",
'almost-dark-gray': "var(--almost-dark-gray)",
'medium-dark-gray': "var(--medium-dark-gray)",
'medium-low-gray': "var(--medium-low-gray)",
'medium-gray': "var(--medium-gray)",
'error-foreground': "var(--error-foreground)",
'high-dark-gray': "var(--high-dark-gray)",
'high-indigo': "var(--high-indigo)",
'high-light-gray': "var(--high-light-gray)",
'light-blue': "var(--light-blue)",
'light-gray': "var(--light-gray)",
'dark-gray': "var(--dark-gray)",
'btn-shadow': "var(--round-btn-shadow)",
buildBackground: "var(--build-background)",
build: "var(--build-trigger)",
'light-slate': "var(--light-slate)",
'medium-blue': "var(--medium-blue)",
'medium-dark-blue': "var(--medium-dark-blue)",
'medium-dark-gray': "var(--medium-dark-gray)",
'medium-dark-green': "var(--medium-dark-green)",
'medium-dark-red': "var(--medium-dark-red)",
'medium-emerald': "var(--medium-emerald)",
'medium-gray': "var(--medium-gray)",
'medium-high-indigo': "var(--medium-high-indigo)",
'medium-indigo': "var(--medium-indigo)",
'medium-low-gray': "var(--medium-low-gray)",
'status-green': "var(--status-green)",
'status-red': "var(--status-red)",
'status-yellow': "var(--status-yellow)",
'success-background': "var(--success-background)",
'success-foreground': "var(--success-foreground)",
white: "var(--white)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
@ -110,134 +114,7 @@ module.exports = {
},
},
},
plugins: [require("tailwindcss-animate")],
};
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
darkMode: "class",
important: true,
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
white: "var(--white)",
'high-light-gray': "var(--high-light-gray)",
'almost-light-blue': "var(--almost-light-blue)",
'high-indigo': "var(--high-indigo)",
'medium-high-indigo': "var(--medium-high-indigo)",
'medium-emerald': "var(--medium-emerald)",
'status-yellow': "var(--status-yellow)",
'almost-medium-green': "var(--almost-medium-green)",
'almost-medium-blue': "var(--almost-medium-blue)",
'medium-indigo': "var(--medium-indigo)",
'light-slate': "var(--light-slate)",
'success-background': "var(--success-background)",
'dark-green': "var(--dark-green)",
'status-green': "var(--status-green)",
'medium-dark-green': "var(--medium-dark-green)",
'medium-light-blue': "var(--medium-light-blue)",
'almost-dark-blue': "var(--almost-dark-blue)",
'light-blue': "var(--light-blue)",
'dark-blue': "var(--dark-blue)",
'medium-blue': "var(--medium-blue)",
'medium-dark-blue': "var(--medium-dark-blue)",
'almost-medium-red': "var(--almost-medium-red)",
'medium-dark-red': "var(--medium-dark-red)",
'error-foreground': "var(--error-foreground)",
'dark-red': "var(--dark-red)",
'error-background': "var(--error-background)",
'status-red': "var(--status-red)",
'almost-medium-gray': "var(--almost-medium-gray)",
'almost-dark-gray': "var(--almost-dark-gray)",
'medium-dark-gray': "var(--medium-dark-gray)",
'medium-low-gray': "var(--medium-low-gray)",
'medium-gray': "var(--medium-gray)",
'high-dark-gray': "var(--high-dark-gray)",
'light-gray': "var(--light-gray)",
'dark-gray': "var(--dark-gray)",
'btn-hover-bg': "var(--hover-btn-background)",
'btn-shadow': "var(--round-btn-shadow)",
'build-background': "var(--build-background)",
'build-trigger': "var(--build-trigger)",
'border': "hsl(var(--border))",
'input': "hsl(var(--input))",
'ring': "hsl(var(--ring))",
'background': "hsl(var(--background))",
'foreground': "hsl(var(--foreground))",
'primary': {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
pulseGreen: {
"0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
"100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"pulse-green": "pulseGreen 1s linear",
"spin-once": "spin 1s linear 0.7",
},
borderColor: {
"red-outline": "rgba(255, 0, 0, 0.8)",
"green-outline": "rgba(72, 187, 120, 0.7)",
},
boxShadow: {
"red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
"green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
},
},
},
plugins: [
require("tailwindcss-animate"),
require("@tailwindcss/forms")({