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

Refactor styles and class names in multiple components, update color variables, and adjust button and control styles.

Browse source 
- Simplify class names in the SingleAlert component and update color variables.
- Update class names and color variables in the Dialog component.
- Update color variables in the constants file.
- Update color variables and class names in the index.css file.
- Update class names and color variables in the PageComponent file.
- Add a color variable for shared blur styles.
- Update Tailwind CSS configuration to include new color variables.

Note: These changes improve code readability and maintain color consistency throughout the application.
This commit is contained in:
Rodrigo Nader 2023-06-29 18:39:00 -03:00
commit 27b17a13c2
6 changed files with 43 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,34 +62,34 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
className="inline-flex rounded-md p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />
<X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
</button>
</div>
</div>
</div>
) : type === "notice" ? (
<div
className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
className="flex rounded-md bg-info-background p-3 mb-2 mx-2"
key={dropItem.id}
>
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-medium-dark-blue"
className="h-5 w-5 text-info-background"
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-medium-dark-blue">
<p className="text-sm text-info-background">
{dropItem.title}
</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6">
{dropItem.link ? (
<Link
to={dropItem.link}
className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
className="whitespace-nowrap font-medium text-info-background hover:text-ring"
>
Details
</Link>
@ -108,17 +108,17 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
className="inline-flex rounded-md p-1.5 text-info-foreground"
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />
<X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
</button>
</div>
</div>
</div>
) : (
<div
className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md"
className="flex bg-success-background p-3 mb-2 mx-2 rounded-md"
key={dropItem.id}
>
<div className="flex-shrink-0">
@ -142,10 +142,10 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
className="inline-flex rounded-md p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />
<X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
</button>
</div>
</div>

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

@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
"fixed inset-0 z-50 bg-blur-shared backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
className
)}
{...props}

2
src/frontend/src/constants.tsx
View file

@ -148,7 +148,7 @@ export const EXPORT_CODE_DIALOG =
* @constant
*/
export const INPUT_STYLE =
"focus:tw-ring-none focus:ring-ring bg-background focus:outline-none";
"focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none";

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

@ -34,39 +34,45 @@
--build-trigger: #dc735b;
--chat-trigger: #5c8be1;
--error-background: #fef2f2;
--error-foreground: #991b1b;
--status-red: #ef4444;
--status-yellow: #eab308;
--status-green: #4ade80;
--error-background: #fef2f2;
--error-foreground: #991b1b;
--success-background: #f0fdf4;
--success-foreground: #14532d;
--info-background: #f0f4fd;
--info-foreground: #141653;
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--medium-dark-blue:#1d4ed8;
/* Colors that are shared in dark and light mode */
--blur-shared: #151923de;
}
.dark {
--background: 224 71% 4%; /* hsl(224 71% 4%) */
--background: 224 35% 7.5%; /* hsl(224 40% 10%) */
--foreground: 213 31% 85%; /* hsl(213 31% 91%) */
--muted: 223 40% 11%; /* hsl(223 47% 11%) */
--muted: 223 27% 11%; /* hsl(223 27% 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: 224 25% 15.5%; /* 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%) */
--primary: 210 20% 80%; /* hsl(210 40% 98%) */
--primary-foreground: 222.2 27.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%) */
@ -86,18 +92,26 @@
--build-trigger: #dc735b;
--chat-trigger: #5c8be1;
--error-foreground: #c2b7b7;
--error-background: #671212;
--status-red: #ef4444;
--status-yellow: #eab308;
--status-green: #4ade80;
--success-background: #f0fdf4;
--success-foreground: #14532d;
--error-foreground: #c2b7b7;
--error-background: #3e1818;
--info-foreground: #b7b8c2;
--info-background: #18243e;
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--medium-dark-blue:#1d4ed8;
/* Colors that are shared in dark and light mode */
--blur-shared: #151923d2;
}}
@layer base {

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

@ -402,7 +402,8 @@ export default function Page({ flow }: { flow: FlowType }) {
maxZoom={8}
>
<Background className="" />
<Controls className="[&>button]:text-black"></Controls>
<Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
fill-foreground bg-muted"></Controls>
</ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
</div>

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

@ -28,6 +28,7 @@ module.exports = {
'btn-shadow': "var(--round-btn-shadow)",
'build-trigger': "var(--build-trigger)",
'chat-trigger': "var(--chat-trigger)",
'blur-shared': "var(--blur-shared)",
'dark-blue': "var(--dark-blue)",
'dark-gray': "var(--dark-gray)",
'dark-red': "var(--dark-red)",
@ -36,6 +37,8 @@ module.exports = {
'high-dark-gray': "var(--high-dark-gray)",
'high-indigo': "var(--high-indigo)",
'high-light-gray': "var(--high-light-gray)",
'info-background': "var(--info-background)",
'info-foreground': "var(--info-foreground)",
'light-blue': "var(--light-blue)",
'light-gray': "var(--light-gray)",
'light-slate': "var(--light-slate)",