Merge branch 'dev' into types_refactor
This commit is contained in:
Igor Carvalho
GitHub
commit
e5ac8c5211
14 changed files with 1298 additions and 1277 deletions
50
src/frontend/package-lock.json
generated
50
src/frontend/package-lock.json
generated
|
|
@ -20,6 +20,7 @@
|
|||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-menubar": "^1.0.3",
|
||||
"@radix-ui/react-popover": "^1.0.6",
|
||||
"@radix-ui/react-progress": "^1.0.3",
|
||||
"@radix-ui/react-separator": "^1.0.3",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
|
|
@ -143,10 +144,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/compat-data": {
|
||||
"version": "7.22.6",
|
||||
"version": "7.22.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
|
||||
"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
|
||||
"version": "7.22.9",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
|
|
@ -1464,6 +1464,43 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popover": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.6.tgz",
|
||||
"integrity": "sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.0.4",
|
||||
"@radix-ui/react-focus-guards": "1.0.1",
|
||||
"@radix-ui/react-focus-scope": "1.0.3",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-popper": "1.1.2",
|
||||
"@radix-ui/react-portal": "1.0.3",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-slot": "1.0.2",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"aria-hidden": "^1.1.1",
|
||||
"react-remove-scroll": "2.5.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popper": {
|
||||
"version": "1.1.2",
|
||||
"license": "MIT",
|
||||
|
|
@ -2614,6 +2651,15 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/axios": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
|
||||
"integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==",
|
||||
"deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!",
|
||||
"dependencies": {
|
||||
"axios": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cacheable-request": {
|
||||
"version": "6.0.3",
|
||||
"dev": true,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-menubar": "^1.0.3",
|
||||
"@radix-ui/react-popover": "^1.0.6",
|
||||
"@radix-ui/react-progress": "^1.0.3",
|
||||
"@radix-ui/react-separator": "^1.0.3",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -1,66 +1,72 @@
|
|||
import { useContext, useRef } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import IconComponent from "../../components/genericIconComponent";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "../../components/ui/popover";
|
||||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { AlertDropdownType } from "../../types/alerts";
|
||||
import { useOnClickOutside } from "../hooks/useOnClickOutside";
|
||||
import SingleAlert from "./components/singleAlertComponent";
|
||||
|
||||
export default function AlertDropdown({}: AlertDropdownType): JSX.Element {
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const componentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Use the custom hook
|
||||
useOnClickOutside(componentRef, () => {
|
||||
closePopUp();
|
||||
});
|
||||
|
||||
export default function AlertDropdown({ children }: AlertDropdownType): JSX.Element {
|
||||
const {
|
||||
notificationList,
|
||||
clearNotificationList,
|
||||
removeFromNotificationList,
|
||||
setNotificationCenter,
|
||||
} = useContext(alertContext);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={componentRef}
|
||||
className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-muted px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
<Popover
|
||||
open={open}
|
||||
onOpenChange={(k) => {
|
||||
setOpen(k);
|
||||
if (k) setNotificationCenter(false);
|
||||
}}
|
||||
>
|
||||
<div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
|
||||
Notifications
|
||||
<div className="flex gap-3 pr-3 ">
|
||||
<button
|
||||
className="text-foreground hover:text-status-red"
|
||||
onClick={() => {
|
||||
closePopUp();
|
||||
setTimeout(clearNotificationList, 100);
|
||||
}}
|
||||
>
|
||||
<IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" />
|
||||
</button>
|
||||
<button
|
||||
className="text-foreground hover:text-status-red"
|
||||
onClick={closePopUp}
|
||||
>
|
||||
<IconComponent name="X" className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
|
||||
{notificationList.length !== 0 ? (
|
||||
notificationList.map((alertItem, index) => (
|
||||
<SingleAlert
|
||||
key={alertItem.id}
|
||||
dropItem={alertItem}
|
||||
removeAlert={removeFromNotificationList}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center pb-16 text-ring">
|
||||
No new notifications
|
||||
<PopoverTrigger>{children}</PopoverTrigger>
|
||||
<PopoverContent className="flex h-[500px] w-[500px] flex-col">
|
||||
<div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
|
||||
Notifications
|
||||
<div className="flex gap-3 pr-3 ">
|
||||
<button
|
||||
className="text-foreground hover:text-status-red"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setTimeout(clearNotificationList, 100);
|
||||
}}
|
||||
>
|
||||
<IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" />
|
||||
</button>
|
||||
<button
|
||||
className="text-foreground hover:text-status-red"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<IconComponent name="X" className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
|
||||
{notificationList.length !== 0 ? (
|
||||
notificationList.map((alertItem, index) => (
|
||||
<SingleAlert
|
||||
key={alertItem.id}
|
||||
dropItem={alertItem}
|
||||
removeAlert={removeFromNotificationList}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center pb-16 text-ring">
|
||||
No new notifications
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import { useContext, useEffect, useState } from "react";
|
||||
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
|
||||
import { Link, useLocation, useParams } from "react-router-dom";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import AlertDropdown from "../../alerts/alertDropDown";
|
||||
import { USER_PROJECTS_HEADER } from "../../constants/constants";
|
||||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { darkContext } from "../../contexts/darkContext";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import { getRepoStars } from "../../controllers/API";
|
||||
import IconComponent from "../genericIconComponent";
|
||||
import { Button } from "../ui/button";
|
||||
|
|
@ -15,14 +13,9 @@ import { Separator } from "../ui/separator";
|
|||
import MenuBar from "./components/menuBar";
|
||||
|
||||
export default function Header(): JSX.Element {
|
||||
const { flows, addFlow, tabId } = useContext(TabsContext);
|
||||
const { openPopUp } = useContext(PopUpContext);
|
||||
const { templates } = useContext(typesContext);
|
||||
const { id } = useParams();
|
||||
const AlertWidth = 384;
|
||||
const { flows, tabId } = useContext(TabsContext);
|
||||
const { dark, setDark } = useContext(darkContext);
|
||||
const { notificationCenter, setNotificationCenter, setErrorData } =
|
||||
useContext(alertContext);
|
||||
const { notificationCenter } = useContext(alertContext);
|
||||
const location = useLocation();
|
||||
|
||||
const [stars, setStars] = useState(null);
|
||||
|
|
@ -111,33 +104,18 @@ export default function Header(): JSX.Element {
|
|||
<IconComponent name="MoonIcon" className="side-bar-button-size" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="extra-side-bar-save-disable relative"
|
||||
onClick={(event: React.MouseEvent<HTMLElement>) => {
|
||||
setNotificationCenter(false);
|
||||
const { top, left } = (
|
||||
event.target as Element
|
||||
).getBoundingClientRect();
|
||||
openPopUp(
|
||||
<>
|
||||
<div
|
||||
className="absolute z-10"
|
||||
style={{ top: top + 40, left: left - AlertWidth }}
|
||||
>
|
||||
<AlertDropdown />
|
||||
</div>
|
||||
<div className="header-notifications-box"></div>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{notificationCenter && <div className="header-notifications"></div>}
|
||||
<IconComponent
|
||||
name="Bell"
|
||||
className="side-bar-button-size"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<AlertDropdown>
|
||||
<div className="extra-side-bar-save-disable relative">
|
||||
{notificationCenter && (
|
||||
<div className="header-notifications"></div>
|
||||
)}
|
||||
<IconComponent
|
||||
name="Bell"
|
||||
className="side-bar-button-size"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</AlertDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { useEffect } from "react";
|
||||
import { InputListComponentType } from "../../types/components";
|
||||
|
||||
import { Input } from "../ui/input";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import _ from "lodash";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import IconComponent from "../genericIconComponent";
|
||||
import { Input } from "../ui/input";
|
||||
|
||||
export default function InputListComponent({
|
||||
value,
|
||||
|
|
@ -19,13 +19,12 @@ export default function InputListComponent({
|
|||
}, [disabled]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
value.length > 1 && editNode ? "my-1" : "",
|
||||
"flex flex-col gap-3"
|
||||
)
|
||||
}>
|
||||
<div
|
||||
className={classNames(
|
||||
value.length > 1 && editNode ? "my-1" : "",
|
||||
"flex flex-col gap-3"
|
||||
)}
|
||||
>
|
||||
{value.map((i, idx) => {
|
||||
return (
|
||||
<div key={idx} className="flex w-full gap-3">
|
||||
|
|
|
|||
30
src/frontend/src/components/ui/popover.tsx
Normal file
30
src/frontend/src/components/ui/popover.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
"use client";
|
||||
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import * as React from "react";
|
||||
import { cn } from "../../utils/utils";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
));
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent };
|
||||
|
|
@ -5,7 +5,6 @@ import { SSEProvider } from "./SSEContext";
|
|||
import { AlertProvider } from "./alertContext";
|
||||
import { DarkProvider } from "./darkContext";
|
||||
import { LocationProvider } from "./locationContext";
|
||||
import PopUpProvider from "./popUpContext";
|
||||
import { TabsProvider } from "./tabsContext";
|
||||
import { TypesProvider } from "./typesContext";
|
||||
import { UndoRedoProvider } from "./undoRedoContext";
|
||||
|
|
@ -22,9 +21,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
|
|||
<AlertProvider>
|
||||
<SSEProvider>
|
||||
<TabsProvider>
|
||||
<UndoRedoProvider>
|
||||
<PopUpProvider>{children}</PopUpProvider>
|
||||
</UndoRedoProvider>
|
||||
<UndoRedoProvider>{children}</UndoRedoProvider>
|
||||
</TabsProvider>
|
||||
</SSEProvider>
|
||||
</AlertProvider>
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import React, { createContext, useState } from "react";
|
||||
|
||||
// context to set JSX element on the DOM
|
||||
export const PopUpContext = createContext({
|
||||
openPopUp: (popUpElement: JSX.Element) => {},
|
||||
closePopUp: () => {},
|
||||
setCloseEdit: (value: string) => {},
|
||||
closeEdit: "",
|
||||
});
|
||||
|
||||
interface PopUpProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const PopUpProvider = ({ children }: PopUpProviderProps) => {
|
||||
const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
|
||||
|
||||
const openPopUp = (element: JSX.Element) => {
|
||||
setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
|
||||
};
|
||||
|
||||
const closePopUp = () => {
|
||||
setPopUpElements((prevPopUps) => prevPopUps.slice(1));
|
||||
};
|
||||
|
||||
const [closeEdit, setCloseEdit] = useState("");
|
||||
|
||||
return (
|
||||
<PopUpContext.Provider
|
||||
value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
|
||||
>
|
||||
{children}
|
||||
{popUpElements[0]}
|
||||
</PopUpContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopUpProvider;
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -5,7 +5,9 @@ import ContextWrapper from "./contexts";
|
|||
import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
import { ApiInterceptor } from "./controllers/API/api";
|
||||
import "./index.css";
|
||||
import "./style/index.css";
|
||||
import "./style/classes.css";
|
||||
import "./style/applies.css";
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
|
|
|
|||
977
src/frontend/src/style/applies.css
Normal file
977
src/frontend/src/style/applies.css
Normal file
|
|
@ -0,0 +1,977 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.round-buttons-position {
|
||||
@apply fixed right-4
|
||||
}
|
||||
.side-bar-arrangement {
|
||||
@apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide
|
||||
}
|
||||
.side-bar-search-div-placement {
|
||||
@apply relative mx-auto mb-2 mt-2 flex items-center
|
||||
}
|
||||
.side-bar-components-icon {
|
||||
@apply h-6 w-4 text-ring
|
||||
}
|
||||
.side-bar-components-text {
|
||||
@apply w-full truncate pr-1 text-xs text-foreground
|
||||
}
|
||||
.side-bar-components-div-form {
|
||||
@apply flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring bg-white px-3 py-1 text-sm
|
||||
}
|
||||
.side-bar-components-border {
|
||||
@apply cursor-grab rounded-l-md border-l-8
|
||||
}
|
||||
.side-bar-components-gap {
|
||||
@apply flex flex-col gap-2 p-2
|
||||
}
|
||||
.side-bar-components-div-arrangement {
|
||||
@apply w-full overflow-auto scrollbar-hide
|
||||
}
|
||||
.search-icon {
|
||||
@apply absolute inset-y-0 right-0 flex items-center py-1.5 pr-5
|
||||
}
|
||||
.extra-side-bar-save-disable {
|
||||
@apply text-muted-foreground
|
||||
}
|
||||
.extra-side-bar-save-disable:hover {
|
||||
@apply hover:text-accent-foreground
|
||||
}
|
||||
.side-bar-button-size {
|
||||
@apply h-5 w-5
|
||||
}
|
||||
.side-bar-button-size:hover {
|
||||
@apply hover:text-accent-foreground
|
||||
}
|
||||
.side-bar-buttons-arrangement {
|
||||
@apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
|
||||
}
|
||||
.extra-side-bar-buttons {
|
||||
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
|
||||
}
|
||||
.extra-side-bar-buttons:hover {
|
||||
@apply hover:bg-muted
|
||||
}
|
||||
.button-div-style {
|
||||
@apply gap-2 flex
|
||||
}
|
||||
.input-primary{
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
|
||||
}
|
||||
|
||||
/* The same as input-primary but no-truncate */
|
||||
.textarea-primary{
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
|
||||
}
|
||||
|
||||
.input-edit-node{
|
||||
@apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
|
||||
}
|
||||
.input-search{
|
||||
@apply input-primary pr-7 mx-2
|
||||
}
|
||||
.input-disable{
|
||||
@apply bg-border placeholder:text-ring border-transparent
|
||||
}
|
||||
.input-dialog{
|
||||
@apply text-ring cursor-pointer bg-transparent
|
||||
}
|
||||
.message-button {
|
||||
@apply message-button-position flex h-12 w-12 items-center justify-center rounded-full bg-border px-3 py-1 shadow-md transition-all
|
||||
}
|
||||
|
||||
.round-button-form {
|
||||
@apply flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md
|
||||
}
|
||||
.round-button-div {
|
||||
@apply flex items-center gap-3
|
||||
}
|
||||
.build-trigger-loading-icon {
|
||||
@apply stroke-build-trigger
|
||||
}
|
||||
.build-trigger-icon {
|
||||
@apply w-6 fill-build-trigger stroke-1 stroke-build-trigger
|
||||
}
|
||||
.message-button-position {
|
||||
@apply fixed bottom-4 right-4
|
||||
}
|
||||
.message-button-icon {
|
||||
@apply fill-chat-trigger stroke-chat-trigger stroke-1
|
||||
}
|
||||
.disabled-message-button-icon {
|
||||
@apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1
|
||||
}
|
||||
.components-disclosure-arrangement {
|
||||
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
|
||||
}
|
||||
.components-disclosure-title {
|
||||
@apply flex items-center text-sm text-primary
|
||||
}
|
||||
.components-disclosure-div {
|
||||
@apply flex gap-2
|
||||
}
|
||||
.flow-page-positioning {
|
||||
@apply h-full w-full overflow-hidden
|
||||
}
|
||||
.logspace-page-icon {
|
||||
@apply absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out
|
||||
}
|
||||
|
||||
.logspace-page-icon:hover {
|
||||
@apply hover:h-12
|
||||
}
|
||||
|
||||
.flex-max-width {
|
||||
@apply flex w-full
|
||||
}
|
||||
|
||||
.main-page-panel {
|
||||
@apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
|
||||
}
|
||||
|
||||
.main-page-nav-arrangement {
|
||||
@apply flex-max-width justify-between px-6 py-12 pb-2
|
||||
}
|
||||
|
||||
.main-page-nav-title {
|
||||
@apply flex items-center justify-center gap-2 text-2xl font-semibold
|
||||
}
|
||||
|
||||
.main-page-nav-button {
|
||||
@apply mr-2 w-4
|
||||
}
|
||||
|
||||
.main-page-description-text {
|
||||
@apply flex w-[60%] px-6 pb-14 text-muted-foreground
|
||||
}
|
||||
|
||||
.main-page-flows-display {
|
||||
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
|
||||
}
|
||||
|
||||
.community-page-arrangement {
|
||||
@apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
|
||||
}
|
||||
|
||||
.community-page-nav-arrangement {
|
||||
@apply flex-max-width justify-between px-6 py-12 pb-2
|
||||
}
|
||||
|
||||
.community-page-nav-title {
|
||||
@apply flex items-center justify-center gap-2 text-2xl font-semibold
|
||||
}
|
||||
|
||||
.community-page-nav-button {
|
||||
@apply flex gap-2
|
||||
}
|
||||
|
||||
.community-page-description-text {
|
||||
@apply flex w-[70%] px-6 pb-8 text-muted-foreground
|
||||
}
|
||||
|
||||
.community-pages-flows-panel {
|
||||
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
|
||||
}
|
||||
.generic-node-div {
|
||||
@apply relative flex w-96 flex-col justify-center rounded-lg bg-background
|
||||
}
|
||||
.generic-node-div-title {
|
||||
@apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
|
||||
}
|
||||
.generic-node-title-arrangement {
|
||||
@apply flex-max-width items-center truncate
|
||||
}
|
||||
.generic-node-icon {
|
||||
@apply h-10 w-10 rounded p-1
|
||||
}
|
||||
.generic-node-tooltip-div {
|
||||
@apply ml-2 truncate
|
||||
}
|
||||
.generic-node-validation-div {
|
||||
@apply max-h-96 overflow-auto
|
||||
}
|
||||
|
||||
.generic-node-status-position {
|
||||
@apply relative top-[3px] h-5 w-5
|
||||
}
|
||||
|
||||
.generic-node-status-animation {
|
||||
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
|
||||
}
|
||||
.generic-node-status {
|
||||
@apply h-4 w-4 rounded-full opacity-100
|
||||
}
|
||||
.green-status {
|
||||
@apply generic-node-status bg-status-green
|
||||
}
|
||||
.red-status {
|
||||
@apply generic-node-status bg-status-red
|
||||
}
|
||||
.yellow-status {
|
||||
@apply generic-node-status bg-status-yellow
|
||||
}
|
||||
.status-build-animation {
|
||||
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
|
||||
}
|
||||
.status-div {
|
||||
@apply absolute w-4 duration-200 ease-in-out
|
||||
}
|
||||
.status-div:hover {
|
||||
@apply hover:text-accent-foreground hover:transition-all
|
||||
}
|
||||
.generic-node-desc {
|
||||
@apply h-full w-full py-5 text-foreground
|
||||
}
|
||||
.generic-node-desc-text {
|
||||
@apply w-full px-5 pb-3 text-sm text-muted-foreground
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
@apply h-5 w-5
|
||||
}
|
||||
.alert-font-size {
|
||||
@apply text-sm font-medium
|
||||
}
|
||||
|
||||
.error-build-message {
|
||||
@apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl
|
||||
}
|
||||
.error-build-message-circle {
|
||||
@apply text-status-red alert-icon
|
||||
}
|
||||
.error-build-text {
|
||||
@apply text-error-foreground
|
||||
}
|
||||
.error-build-foreground {
|
||||
@apply error-build-text alert-font-size
|
||||
}
|
||||
.error-build-message-div {
|
||||
@apply mt-2 text-sm error-build-text
|
||||
}
|
||||
.error-build-message-list {
|
||||
@apply list-disc space-y-1 pl-5
|
||||
}
|
||||
|
||||
.success-alert {
|
||||
@apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
|
||||
}
|
||||
.success-alert-icon {
|
||||
@apply alert-icon text-status-green
|
||||
}
|
||||
.success-alert-message {
|
||||
@apply alert-font-size text-success-foreground
|
||||
}
|
||||
|
||||
.card-component-title-display {
|
||||
@apply round-button-div flex-max-width
|
||||
}
|
||||
.card-component-image {
|
||||
@apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
|
||||
}
|
||||
.card-component-title-size {
|
||||
@apply inline-block w-full flex-1 break-words truncate-doubleline
|
||||
}
|
||||
.card-component-delete-button {
|
||||
@apply flex self-start
|
||||
}
|
||||
.card-component-delete-icon {
|
||||
@apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
|
||||
}
|
||||
.card-component-desc {
|
||||
@apply pb-2 pt-2
|
||||
}
|
||||
.card-component-desc-text {
|
||||
@apply truncate-doubleline
|
||||
}
|
||||
.card-component-footer-arrangement {
|
||||
@apply flex-max-width items-end justify-between gap-2
|
||||
}
|
||||
.card-component-footer {
|
||||
@apply flex flex-wrap gap-2
|
||||
}
|
||||
|
||||
.unused-side-bar-aside {
|
||||
@apply flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500
|
||||
}
|
||||
.unused-side-bar-arrangement {
|
||||
@apply flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
|
||||
}
|
||||
.unused-side-bar-division {
|
||||
@apply flex-max-width flex-grow flex-col
|
||||
}
|
||||
.unused-side-bar-nav {
|
||||
@apply flex-1 space-y-1
|
||||
}
|
||||
.unused-side-bar-link {
|
||||
@apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
|
||||
}
|
||||
.unused-side-bar-link-colors-true {
|
||||
@apply bg-muted text-foreground
|
||||
}
|
||||
.unused-side-bar-link-colors-false {
|
||||
@apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
|
||||
}
|
||||
.unused-side-bar-icon {
|
||||
@apply mr-3 flex-shrink-0 h-6 w-6
|
||||
}
|
||||
.unused-side-bar-icon-false {
|
||||
@apply text-ring group-hover:text-accent-foreground
|
||||
}
|
||||
.unused-side-bar-disclosure {
|
||||
@apply unused-side-bar-link pr-1 text-left
|
||||
}
|
||||
.unused-side-bar-disclosure:focus {
|
||||
@apply focus:outline-none focus:ring-1 focus:ring-ring
|
||||
}
|
||||
.unused-side-bar-disclosure-icon {
|
||||
@apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
|
||||
}
|
||||
.unused-side-bar-svg-true {
|
||||
@apply text-ring rotate-90
|
||||
}
|
||||
.unused-side-bar-svg {
|
||||
@apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
|
||||
}
|
||||
.unused-side-bar-disclosure-panel {
|
||||
@apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
|
||||
}
|
||||
|
||||
.code-area-component {
|
||||
@apply pointer-events-none w-full cursor-not-allowed
|
||||
}
|
||||
.code-area-input-positioning {
|
||||
@apply flex-max-width items-center
|
||||
}
|
||||
.code-area-external-link {
|
||||
@apply w-6 h-6 ml-3
|
||||
}
|
||||
.code-area-external-link:hover {
|
||||
@apply hover:text-accent-foreground
|
||||
}
|
||||
|
||||
.dropdown-component-outline {
|
||||
@apply input-edit-node relative pr-8
|
||||
}
|
||||
.dropdown-component-false-outline {
|
||||
@apply input-primary py-2 pl-3 pr-10 text-left
|
||||
}
|
||||
.dropdown-component-display {
|
||||
@apply block w-full truncate bg-background
|
||||
}
|
||||
.dropdown-component-arrow {
|
||||
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
|
||||
}
|
||||
.dropdown-component-arrow-color {
|
||||
@apply h-5 w-5 extra-side-bar-save-disable
|
||||
}
|
||||
.dropdown-component-options {
|
||||
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
|
||||
}
|
||||
.dropdown-component-true-options {
|
||||
@apply dropdown-component-options lg:w-[32%]
|
||||
}
|
||||
.dropdown-component-false-options {
|
||||
@apply dropdown-component-options w-full
|
||||
}
|
||||
.dropdown-component-option {
|
||||
@apply relative cursor-default select-none
|
||||
}
|
||||
.dropdown-component-false-option {
|
||||
@apply dropdown-component-option py-0.5 pl-3 pr-12
|
||||
}
|
||||
.dropdown-component-true-option {
|
||||
@apply dropdown-component-option py-2 pl-3 pr-9
|
||||
}
|
||||
.dropdown-component-choosal {
|
||||
@apply absolute inset-y-0 right-0 flex items-center pr-4
|
||||
}
|
||||
.dropdown-component-check-icon {
|
||||
@apply h-5 w-5 text-black
|
||||
}
|
||||
|
||||
.edit-flow-arrangement {
|
||||
@apply flex justify-between
|
||||
}
|
||||
.edit-flow-span {
|
||||
@apply ml-10 animate-pulse text-status-red
|
||||
}
|
||||
|
||||
.float-component-pointer {
|
||||
@apply pointer-events-none cursor-not-allowed
|
||||
}
|
||||
|
||||
.header-menu-bar {
|
||||
@apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
|
||||
}
|
||||
.header-menu-bar-display {
|
||||
@apply flex max-w-[200px] items-center gap-2 cursor-pointer
|
||||
}
|
||||
.header-menu-flow-name {
|
||||
@apply flex-1 truncate
|
||||
}
|
||||
.header-menu-options {
|
||||
@apply mr-2 h-4 w-4
|
||||
}
|
||||
|
||||
.header-arrangement {
|
||||
@apply flex-max-width h-12 items-center justify-between border-border bg-muted
|
||||
}
|
||||
.header-start-display {
|
||||
@apply flex w-96 items-center justify-start gap-2
|
||||
}
|
||||
.header-end-division {
|
||||
@apply flex w-96 justify-end px-2
|
||||
}
|
||||
.header-end-display {
|
||||
@apply ml-auto mr-2 flex items-center gap-5
|
||||
}
|
||||
.header-github-link-box {
|
||||
@apply border border-input h-9 px-3 pr-0 rounded-md inline-flex shadow-sm items-center justify-center
|
||||
}
|
||||
.header-github-link {
|
||||
@apply text-sm font-medium disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground header-github-link-box
|
||||
}
|
||||
.header-github-link:focus-visible {
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
||||
}
|
||||
.header-github-link:hover {
|
||||
@apply hover:bg-accent hover:text-accent-foreground
|
||||
}
|
||||
.header-github-display {
|
||||
@apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
|
||||
}
|
||||
.header-notifications-box {
|
||||
@apply fixed left-0 top-0 h-screen w-screen
|
||||
}
|
||||
.header-notifications {
|
||||
@apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
|
||||
}
|
||||
|
||||
.input-component-div {
|
||||
@apply pointer-events-none relative cursor-not-allowed
|
||||
}
|
||||
.input-component-button {
|
||||
@apply absolute inset-y-0 right-0 items-center text-muted-foreground
|
||||
}
|
||||
.input-component-true-button {
|
||||
@apply input-component-button pr-2
|
||||
}
|
||||
.input-component-false-button {
|
||||
@apply input-component-button px-4
|
||||
}
|
||||
.input-component-true-svg {
|
||||
@apply absolute bottom-0.5 right-2 side-bar-button-size
|
||||
}
|
||||
.input-component-false-svg {
|
||||
@apply absolute bottom-2 right-3 side-bar-button-size
|
||||
}
|
||||
|
||||
.input-file-component {
|
||||
@apply flex-max-width items-center
|
||||
}
|
||||
|
||||
.toggle-component-switch {
|
||||
@apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out
|
||||
}
|
||||
.toggle-component-switch:focus {
|
||||
@apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1
|
||||
}
|
||||
.toggle-component-span {
|
||||
@apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out
|
||||
}
|
||||
.toggle-component-second-span {
|
||||
@apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity
|
||||
}
|
||||
|
||||
.app-div {
|
||||
@apply fixed bottom-5 left-5 flex flex-col-reverse
|
||||
}
|
||||
|
||||
.chat-input-modal-txtarea {
|
||||
@apply form-input block w-full rounded-md border-ring pr-10 custom-scroll sm:text-sm
|
||||
}
|
||||
.chat-input-modal-div {
|
||||
@apply absolute bottom-0.5 right-3
|
||||
}
|
||||
.chat-input-modal-lock {
|
||||
@apply side-bar-button-size animate-pulse text-ring
|
||||
}
|
||||
.chat-input-modal-send {
|
||||
@apply side-bar-button-size text-ring hover:text-muted-foreground
|
||||
}
|
||||
|
||||
.code-block-modal {
|
||||
@apply flex items-center justify-between px-4 py-1.5
|
||||
}
|
||||
.code-block-modal-span {
|
||||
@apply text-xs lowercase text-muted-foreground
|
||||
}
|
||||
.code-block-modal-button {
|
||||
@apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-muted-foreground
|
||||
}
|
||||
|
||||
.chat-message-modal {
|
||||
@apply flex-max-width py-2 pl-2
|
||||
}
|
||||
.chat-message-modal-div {
|
||||
@apply my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full
|
||||
}
|
||||
.chat-message-modal-img {
|
||||
@apply absolute scale-150 transition-opacity duration-500
|
||||
}
|
||||
.chat-message-modal-display {
|
||||
@apply flex-max-width items-center text-start
|
||||
}
|
||||
.chat-message-modal-text {
|
||||
@apply relative inline-block w-full text-start text-sm font-normal text-muted-foreground
|
||||
}
|
||||
.chat-message-modal-icon-div {
|
||||
@apply absolute -left-2 -top-1 cursor-pointer
|
||||
}
|
||||
.chat-message-modal-thought {
|
||||
@apply ml-3 inline-block h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground chat-message-modal-thought-cursor
|
||||
}
|
||||
.chat-message-modal-thought-cursor {
|
||||
@apply cursor-pointer scrollbar-hide overflow-scroll
|
||||
}
|
||||
.chat-message-modal-markdown {
|
||||
@apply w-full px-4 pb-3 pr-8 pt-3
|
||||
}
|
||||
.chat-message-modal-markdown-span {
|
||||
@apply mt-1 animate-pulse cursor-default
|
||||
}
|
||||
.chat-message-modal-alert {
|
||||
@apply inline-block px-3 text-start text-muted-foreground
|
||||
}
|
||||
|
||||
.file-card-modal-image-div {
|
||||
@apply absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground
|
||||
}
|
||||
.file-card-modal-image-button {
|
||||
@apply px-2 py-1 text-ring
|
||||
}
|
||||
.file-card-modal-button {
|
||||
@apply flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg
|
||||
}
|
||||
.file-card-modal-div {
|
||||
@apply mr-2 flex-max-width items-center gap-2 text-current
|
||||
}
|
||||
.file-card-modal-footer {
|
||||
@apply flex flex-col items-start
|
||||
}
|
||||
.file-card-modal-name {
|
||||
@apply truncate text-sm text-current
|
||||
}
|
||||
.file-card-modal-type {
|
||||
@apply truncate text-xs text-ring
|
||||
}
|
||||
|
||||
.send-message-modal-transition {
|
||||
@apply fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity
|
||||
}
|
||||
.chat-modal-box {
|
||||
@apply fixed inset-0 z-10 overflow-y-auto
|
||||
}
|
||||
.chat-modal-box-div {
|
||||
@apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
|
||||
}
|
||||
.chat-modal-dialog-panel {
|
||||
@apply relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all
|
||||
}
|
||||
.chat-modal-dialog-panel-div {
|
||||
@apply relative w-full p-4
|
||||
}
|
||||
.chat-modal-dialog-trash-panel {
|
||||
@apply absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red
|
||||
}
|
||||
.chat-modal-dialog-x-panel {
|
||||
@apply absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red
|
||||
}
|
||||
.chat-modal-dialog-history {
|
||||
@apply flex-max-width h-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide
|
||||
}
|
||||
.chat-modal-dialog-span-box {
|
||||
@apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
|
||||
}
|
||||
.chat-modal-dialog-desc {
|
||||
@apply w-2/4 rounded-md border border-input bg-muted px-6 py-8
|
||||
}
|
||||
.chat-modal-input-div {
|
||||
@apply flex-max-width flex-col items-center justify-between border-t bg-background p-3
|
||||
}
|
||||
.chat-modal-input {
|
||||
@apply relative mt-1 w-full rounded-md shadow-sm
|
||||
}
|
||||
.code-area-modal-editor-div {
|
||||
@apply mt-2 flex-max-width h-full
|
||||
}
|
||||
.code-area-modal-editor-box {
|
||||
@apply h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll
|
||||
}
|
||||
|
||||
.edit-node-modal-variable {
|
||||
@apply h-5 w-5 stroke-2 pe-1 text-muted-foreground
|
||||
}
|
||||
.edit-node-modal-span {
|
||||
@apply text-sm font-semibold text-primary
|
||||
}
|
||||
.edit-node-modal-arrangement {
|
||||
@apply flex-max-width h-fit max-h-[400px]
|
||||
}
|
||||
.edit-node-modal-box {
|
||||
@apply w-full rounded-lg border-[1px] border-input bg-background
|
||||
}
|
||||
.edit-node-modal-table {
|
||||
@apply flex h-fit flex-col gap-5
|
||||
}
|
||||
.edit-node-modal-table-header {
|
||||
@apply h-10 border-input text-xs font-medium text-ring
|
||||
}
|
||||
.edit-node-modal-table-cell {
|
||||
@apply p-0 text-center text-sm text-foreground truncate sm:px-3
|
||||
}
|
||||
.edit-node-modal-second-cell {
|
||||
@apply w-[300px] p-0 text-center text-xs text-foreground
|
||||
}
|
||||
|
||||
.generic-modal-txtarea-div {
|
||||
@apply mt-2 flex-max-width h-full
|
||||
}
|
||||
|
||||
.button-box-modal-div {
|
||||
@apply flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg
|
||||
}
|
||||
|
||||
.dialog-header-modal-div {
|
||||
@apply absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block
|
||||
}
|
||||
.dialog-header-modal-button {
|
||||
@apply rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
|
||||
}
|
||||
|
||||
.dialog-modal-examples-div {
|
||||
@apply h-full w-full overflow-y-auto scrollbar-hide
|
||||
}
|
||||
.dialog-modal-example-true {
|
||||
@apply mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto
|
||||
}
|
||||
.dialog-modal-example-false {
|
||||
@apply flex flex-row items-center justify-center
|
||||
}
|
||||
.dialog-modal-button-box-div {
|
||||
@apply flex-max-width h-full items-center justify-evenly
|
||||
}
|
||||
.document-icon {
|
||||
@apply h-10 w-10 flex-shrink-0
|
||||
}
|
||||
.loading-component-div {
|
||||
@apply flex items-center justify-center align-middle
|
||||
}
|
||||
.dialog-modal-footer {
|
||||
@apply mt-2 flex-max-width items-center justify-center
|
||||
}
|
||||
.dialog-modal-footer-link {
|
||||
@apply flex items-center justify-center text-muted-foreground
|
||||
}
|
||||
|
||||
.node-modal-div {
|
||||
@apply fixed inset-0 bg-ring bg-opacity-75 transition-opacity
|
||||
}
|
||||
.node-modal-dialog-arrangement {
|
||||
@apply fixed inset-0 z-10 overflow-y-auto
|
||||
}
|
||||
.node-modal-dialog-div {
|
||||
@apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
|
||||
}
|
||||
.node-modal-dialog-panel {
|
||||
@apply relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8
|
||||
}
|
||||
.node-modal-dialog-panel-div {
|
||||
@apply absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block
|
||||
}
|
||||
.node-modal-dialog-button {
|
||||
@apply rounded-md text-ring hover:text-accent-foreground
|
||||
}
|
||||
.node-modal-dialog-icon-div {
|
||||
@apply flex-max-width h-full flex-col items-center justify-center
|
||||
}
|
||||
.node-modal-icon-arrangement {
|
||||
@apply z-10 flex-max-width justify-center pb-4 shadow-sm
|
||||
}
|
||||
.node-modal-icon {
|
||||
@apply mt-4 h-10 w-10 rounded p-1
|
||||
}
|
||||
.node-modal-title-div {
|
||||
@apply mt-4 text-center sm:ml-4 sm:text-left
|
||||
}
|
||||
.node-modal-title {
|
||||
@apply text-lg font-medium leading-10 text-foreground
|
||||
}
|
||||
.node-modal-template-div {
|
||||
@apply flex-max-width h-full flex-row items-center justify-center gap-4 bg-input p-4
|
||||
}
|
||||
.node-modal-template {
|
||||
@apply w-full rounded-lg bg-background px-4 shadow sm:p-4
|
||||
}
|
||||
.node-modal-template-column {
|
||||
@apply flex h-full flex-col gap-5
|
||||
}
|
||||
.node-modal-button-box {
|
||||
@apply flex-max-width flex-row-reverse bg-input px-4 pb-3
|
||||
}
|
||||
.node-modal-button {
|
||||
@apply inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring sm:ml-3 sm:w-auto sm:text-sm
|
||||
}
|
||||
.node-modal-button:focus {
|
||||
@apply focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1
|
||||
}
|
||||
|
||||
.prompt-modal-icon-box {
|
||||
@apply mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10
|
||||
}
|
||||
.prompt-modal-icon {
|
||||
@apply h-6 w-6 text-almost-medium-blue
|
||||
}
|
||||
.prompt-modal-txtarea-arrangement {
|
||||
@apply flex-max-width h-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4
|
||||
}
|
||||
.prompt-modal-txtarea-box {
|
||||
@apply h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
|
||||
}
|
||||
.prompt-modal-txtarea {
|
||||
@apply form-input h-full w-full rounded-lg border-ring
|
||||
}
|
||||
|
||||
.txtarea-modal-arrangement {
|
||||
@apply flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4
|
||||
}
|
||||
.txtarea-modal-box {
|
||||
@apply w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
|
||||
}
|
||||
.txtarea-modal-input {
|
||||
@apply form-input h-full w-full
|
||||
}
|
||||
|
||||
.api-modal-tabs {
|
||||
@apply lg:w-full h-full flex flex-col overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
|
||||
}
|
||||
.api-modal-tablist-div {
|
||||
@apply flex items-center justify-between px-2
|
||||
}
|
||||
.api-modal-tabs-content {
|
||||
@apply overflow-hidden w-full h-full px-4 pb-4 -mt-1
|
||||
}
|
||||
.api-modal-accordion-display {
|
||||
@apply flex w-full h-full mt-2
|
||||
}
|
||||
.api-modal-table-arrangement {
|
||||
@apply flex flex-col gap-5 h-fit
|
||||
}
|
||||
|
||||
.icons-parameters-comp{
|
||||
@apply ml-3 h-6 w-6
|
||||
}
|
||||
|
||||
.form-modal-lock-true {
|
||||
@apply bg-input text-primary
|
||||
}
|
||||
.form-modal-no-input {
|
||||
@apply bg-input text-center text-primary dark:bg-gray-700 dark:text-gray-300
|
||||
}
|
||||
.form-modal-lock-false {
|
||||
@apply bg-white text-primary
|
||||
}
|
||||
.code-highlight{
|
||||
@apply block px-3 py-2 w-full max-h-[64vh] text-sm outline-0 border-0 break-all overflow-y-hidden
|
||||
}
|
||||
|
||||
.code-nohighlight{
|
||||
@apply block px-3 py-2 w-full max-h-[70vh] text-sm outline-0 border-0 break-all overflow-y-hidden
|
||||
}
|
||||
.form-modal-lockchat {
|
||||
@apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
|
||||
}
|
||||
.form-modal-send-icon-position {
|
||||
@apply absolute bottom-2 right-4
|
||||
}
|
||||
.form-modal-send-button {
|
||||
@apply rounded-md p-2 px-1 transition-all duration-300
|
||||
}
|
||||
.form-modal-lock-icon {
|
||||
@apply ml-1 mr-1 h-5 w-5 animate-pulse
|
||||
}
|
||||
.form-modal-send-icon {
|
||||
@apply mr-2 h-5 w-5 rotate-[44deg]
|
||||
}
|
||||
.form-modal-play-icon {
|
||||
@apply h-5 w-5 mx-1
|
||||
}
|
||||
.form-modal-chat-position {
|
||||
@apply flex-max-width px-2 py-6 pl-4 pr-9
|
||||
}
|
||||
.form-modal-chatbot-icon {
|
||||
@apply mb-3 ml-3 mr-6 mt-1
|
||||
}
|
||||
.form-modal-chat-image {
|
||||
@apply flex flex-col items-center gap-1
|
||||
}
|
||||
.form-modal-chat-img-box {
|
||||
@apply relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl
|
||||
}
|
||||
.form-modal-chat-bot-icon {
|
||||
@apply form-modal-chat-img-box bg-chat-bot-icon
|
||||
}
|
||||
.form-modal-chat-user-icon {
|
||||
@apply form-modal-chat-img-box bg-chat-user-icon
|
||||
}
|
||||
.form-modal-chat-icon-img {
|
||||
@apply absolute scale-[60%]
|
||||
}
|
||||
.form-modal-chat-text-position {
|
||||
@apply flex w-full flex-1 text-start
|
||||
}
|
||||
.form-modal-chat-text {
|
||||
@apply relative flex w-full flex-col text-start text-sm font-normal text-muted-foreground
|
||||
}
|
||||
.form-modal-chat-icon-div {
|
||||
@apply absolute -left-6 -top-3 cursor-pointer
|
||||
}
|
||||
.form-modal-chat-icon {
|
||||
@apply h-4 w-4 animate-bounce
|
||||
}
|
||||
.form-modal-chat-thought-border {
|
||||
@apply rounded-md border border-ring/60
|
||||
}
|
||||
.form-modal-chat-thought-size {
|
||||
@apply inline-block h-full w-[95%]
|
||||
}
|
||||
.form-modal-chat-thought {
|
||||
@apply cursor-pointer overflow-scroll bg-background text-start text-primary scrollbar-hide form-modal-chat-thought-border form-modal-chat-thought-size py-2 px-2
|
||||
}
|
||||
.form-modal-markdown-span {
|
||||
@apply mt-1 animate-pulse cursor-default
|
||||
}
|
||||
.form-modal-initial-prompt-btn {
|
||||
@apply mb-2 flex items-center gap-2 rounded-md border border-border bg-background shadow-sm px-4 py-2 text-sm font-semibold
|
||||
}
|
||||
.form-modal-iv-box {
|
||||
@apply mt-2 flex-max-width h-[80vh]
|
||||
}
|
||||
.form-modal-iv-size {
|
||||
@apply mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide
|
||||
}
|
||||
.file-component-arrangement {
|
||||
@apply flex items-center py-2
|
||||
}
|
||||
.file-component-variable {
|
||||
@apply -ml-px mr-1 h-4 w-4 text-primary
|
||||
}
|
||||
.file-component-variables-span {
|
||||
@apply font-semibold text-primary
|
||||
}
|
||||
.file-component-variables-title {
|
||||
@apply flex items-center justify-between pt-2
|
||||
}
|
||||
.file-component-variables-div {
|
||||
@apply mr-2.5 flex items-center
|
||||
}
|
||||
.file-component-variables-title-txt {
|
||||
@apply text-sm font-medium text-primary
|
||||
}
|
||||
.file-component-accordion-div {
|
||||
@apply flex items-start gap-3
|
||||
}
|
||||
.file-component-badge-div {
|
||||
@apply flex-max-width items-center justify-between
|
||||
}
|
||||
.file-component-tab-column {
|
||||
@apply flex flex-col gap-2 p-1
|
||||
}
|
||||
.tab-accordion-badge-div {
|
||||
@apply flex flex-1 items-center justify-between py-4 text-sm font-normal text-muted-foreground transition-all
|
||||
}
|
||||
.eraser-column-arrangement {
|
||||
@apply flex-max-width flex-1 flex-col
|
||||
}
|
||||
.eraser-size {
|
||||
@apply relative flex h-full w-full flex-col rounded-md border bg-muted
|
||||
}
|
||||
.eraser-position {
|
||||
@apply absolute right-3 top-3 z-50
|
||||
}
|
||||
.chat-message-div {
|
||||
@apply flex-max-width h-full flex-col items-center overflow-scroll scrollbar-hide
|
||||
}
|
||||
.chat-alert-box {
|
||||
@apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
|
||||
}
|
||||
.langflow-chat-span {
|
||||
@apply text-lg text-foreground
|
||||
}
|
||||
.langflow-chat-desc {
|
||||
@apply w-2/4 rounded-md border border-border bg-muted px-6 py-8
|
||||
}
|
||||
.langflow-chat-desc-span {
|
||||
@apply text-base text-muted-foreground
|
||||
}
|
||||
.langflow-chat-input-div {
|
||||
@apply flex-max-width flex-col items-center justify-between px-8 pb-6
|
||||
}
|
||||
.langflow-chat-input {
|
||||
@apply relative w-full rounded-md shadow-sm
|
||||
}
|
||||
|
||||
.tooltip-fixed-width{
|
||||
@apply max-w-[30vw] max-h-[20vh] overflow-auto
|
||||
}
|
||||
|
||||
.ace-editor-arrangement {
|
||||
@apply flex-max-width h-full flex-col transition-all
|
||||
}
|
||||
.ace-editor {
|
||||
@apply h-full w-full rounded-lg border-[1px] border-border custom-scroll
|
||||
}
|
||||
.ace-editor-save-btn {
|
||||
@apply flex-max-width h-fit justify-end
|
||||
}
|
||||
|
||||
.export-modal-save-api {
|
||||
@apply font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
|
||||
}
|
||||
|
||||
.chat-message-highlight {
|
||||
@apply px-0.5 rounded-md bg-indigo-100 dark:bg-indigo-900
|
||||
}
|
||||
}
|
||||
30
src/frontend/src/style/classes.css
Normal file
30
src/frontend/src/style/classes.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
pre {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.react-flow__pane {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.AccordionContent {
|
||||
overflow: hidden;
|
||||
}
|
||||
.AccordionContent[data-state='open'] {
|
||||
animation: slideDown 300ms ease-out;
|
||||
}
|
||||
.AccordionContent[data-state='closed'] {
|
||||
animation: slideUp 300ms ease-out;
|
||||
}
|
||||
126
src/frontend/src/style/index.css
Normal file
126
src/frontend/src/style/index.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
/* TODO: Confirm that all colors here are found in tailwind config */
|
||||
|
||||
@layer base {
|
||||
|
||||
:root {
|
||||
--background: 0 0% 100%; /* hsl(0 0% 100%) */
|
||||
--foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
|
||||
--muted: 210 40% 98%; /* hsl(210 40% 98%) */
|
||||
--muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
|
||||
--popover: 0 0% 100%; /* hsl(0 0% 100%) */
|
||||
--popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
|
||||
--card: 0 0% 100%; /* hsl(0 0% 100%) */
|
||||
--card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
|
||||
--border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
|
||||
--input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
|
||||
--primary: 222.2 27% 11.2%; /* hsl(222 27% 18%) */
|
||||
--primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
|
||||
--secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
|
||||
--secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
|
||||
--accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
|
||||
--accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
|
||||
--destructive: 0 100% 50%; /* hsl(0 100% 50%) */
|
||||
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
|
||||
--radius: 0.5rem;
|
||||
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
|
||||
--round-btn-shadow: #00000063;
|
||||
|
||||
--error-background: #fef2f2;
|
||||
--error-foreground: #991b1b;
|
||||
|
||||
--success-background: #f0fdf4;
|
||||
--success-foreground: #14532d;
|
||||
|
||||
--info-background: #f0f4fd;
|
||||
--info-foreground: #141653;
|
||||
|
||||
--high-indigo: #4338ca;
|
||||
--medium-indigo: #6366f1;
|
||||
--low-indigo: #e0e7ff;
|
||||
|
||||
--chat-bot-icon: #afe6ef;
|
||||
--chat-user-icon: #aface9;
|
||||
|
||||
/* Colors that are shared in dark and light mode */
|
||||
--blur-shared: #151923de;
|
||||
--build-trigger: #dc735b;
|
||||
--chat-trigger: #5c8be1;
|
||||
--chat-trigger-disabled: #b4c3da;
|
||||
--status-red: #ef4444;
|
||||
--status-yellow: #eab308;
|
||||
--chat-send: #059669;
|
||||
--status-green: #4ade80;
|
||||
--status-blue:#2563eb;
|
||||
--connection: #555;
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 224 35% 7.5%; /* hsl(224 40% 10%) */
|
||||
--foreground: 213 31% 80%; /* hsl(213 31% 91%) */
|
||||
|
||||
--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 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 20% 80%; /* hsl(210 20% 80%) */
|
||||
--primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
|
||||
|
||||
--secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
|
||||
--secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
|
||||
|
||||
--accent: 216 24% 20%; /* 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: #00000063;
|
||||
|
||||
--success-background: #022c22;
|
||||
--success-foreground: #ecfdf5;
|
||||
|
||||
--error-foreground: #fef2f2;
|
||||
--error-background: #450a0a;
|
||||
|
||||
--info-foreground: #eff6ff;
|
||||
--info-background: #172554;
|
||||
|
||||
|
||||
--high-indigo: #4338ca;
|
||||
--medium-indigo: #6366f1;
|
||||
--low-indigo: #e0e7ff;
|
||||
|
||||
/* Colors that are shared in dark and light mode */
|
||||
--blur-shared: #151923d2;
|
||||
--build-trigger: #dc735b;
|
||||
--chat-trigger: #5c8be1;
|
||||
--chat-trigger-disabled: #2d3b54;
|
||||
--status-red: #ef4444;
|
||||
--status-yellow: #eab308;
|
||||
--chat-send: #059669;
|
||||
--status-green: #4ade80;
|
||||
--status-blue: #2563eb;
|
||||
--connection: #555;
|
||||
|
||||
--chat-bot-icon: #235d70;
|
||||
--chat-user-icon: #4f3d6e;
|
||||
|
||||
}}
|
||||
|
|
@ -19,7 +19,9 @@ export type SingleAlertComponentType = {
|
|||
dropItem: AlertItemType;
|
||||
removeAlert: (index: string) => void;
|
||||
};
|
||||
export type AlertDropdownType = {};
|
||||
export type AlertDropdownType = {
|
||||
children: JSX.Element;
|
||||
};
|
||||
export type AlertItemType = {
|
||||
type: "notice" | "error" | "success";
|
||||
title: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue