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

feat: Update styling for various components

Browse source 
- Updated hover and transition effects for several components
- Removed unnecessary CSS classes and styles
- Adjusted colors and text styles for better visual consistency
This commit is contained in:
Rodrigo Nader 2023-06-28 12:54:54 -03:00
commit 4e9565e468
19 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -161,7 +161,7 @@ export default function GenericNode({
!validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
"absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
)}
></div>
</div>

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

@ -30,7 +30,7 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-red-400 dark:text-red-50"
className="h-5 w-5 text-red-400"
aria-hidden="true"
/>
</div>
@ -77,7 +77,7 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-blue-400 dark:text-blue-50"
className="h-5 w-5 text-blue-400 "
aria-hidden="true"
/>
</div>
@ -123,7 +123,7 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-green-400 dark:text-green-50"
className="h-5 w-5 text-green-400 "
aria-hidden="true"
/>
</div>

2
src/frontend/src/alerts/error/index.tsx
View file

@ -44,7 +44,7 @@ export default function ErrorAlert({
<div className="flex">
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-red-400 dark:text-red-50"
className="h-5 w-5 text-red-400"
aria-hidden="true"
/>
</div>

2
src/frontend/src/alerts/notice/index.tsx
View file

@ -41,7 +41,7 @@ export default function NoticeAlert({
<div className="flex">
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-blue-400 dark:text-blue-50"
className="h-5 w-5 text-blue-400 "
aria-hidden="true"
/>
</div>

2
src/frontend/src/alerts/success/index.tsx
View file

@ -39,7 +39,7 @@ export default function SuccessAlert({
<div className="flex">
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-green-400 dark:text-green-50"
className="h-5 w-5 text-green-400 "
aria-hidden="true"
/>
</div>

2
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] dark:border-gray-600 cursor-pointer`}
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`}
onClick={() => {
handleBuild(flow);
}}

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

@ -33,7 +33,7 @@ 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] dark:border-gray-600 cursor-pointer"
bg-[#E2E7EE] cursor-pointer"
onClick={handleClick}
>
<button>

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -69,7 +69,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
<ExternalLink className="w-6 h-6 hover:text-ring ml-3" />
)}
</button>
</div>

4
src/frontend/src/components/headerComponent/index.tsx
View file

@ -75,7 +75,7 @@ export default function Header() {
href="https://github.com/logspace-ai/langflow"
target="_blank"
rel="noreferrer"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
>
<FaGithub className="h-5 w-5 mr-2" />
Star
@ -102,7 +102,7 @@ export default function Header() {
<Separator orientation="vertical" />
<button
className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
className="text-gray-600 hover:text-gray-500 "
onClick={() => {
setDark(!dark);
}}

2
src/frontend/src/components/promptComponent/index.tsx
View file

@ -74,7 +74,7 @@ export default function PromptAreaComponent({
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
</button>
</div>

2
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -77,7 +77,7 @@ export default function TextAreaComponent({
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
</button>
</div>

2
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
className="h-6 w-6 text-gray-800 pl-1 "
aria-hidden="true"
/>
</DialogTitle>

4
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription>
{data.node?.description}
<div className="flex pt-4">
<Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
<span className="text-sm font-semibold text-gray-800 dark:text-white">
<Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
<span className="text-sm font-semibold text-gray-800 ">
Parameters
</span>
</div>

4
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

@ -62,12 +62,12 @@ export default function ChatInput({
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<Lock
className="h-5 w-5 text-gray-500 dark:hover:text-gray-300 animate-pulse"
className="h-5 w-5 text-gray-500 animate-pulse"
aria-hidden="true"
/>
) : (
<Send
className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
className="h-5 w-5 text-gray-500 hover:text-gray-600 "
aria-hidden="true"
/>
)}

6
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -61,7 +61,7 @@ export default function ChatMessage({
</div>
)}
{chat.isSend && (
<User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
<User2 className="w-6 h-6 -mb-1 text-gray-800 " />
)}
</div>
{!chat.isSend ? (
@ -72,7 +72,7 @@ export default function ChatMessage({
onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer"
>
<MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
<MessageCircle className="w-5 h-5 animate-bounce " />
</div>
)}
{chat.thought && chat.thought !== "" && !hidden && (
@ -151,7 +151,7 @@ export default function ChatMessage({
</div>
) : (
<div className="w-full flex items-center">
<div className="text-start inline-block px-3 text-gray-600 dark:text-white">
<div className="text-start inline-block px-3 text-gray-600 ">
<span
className="text-muted-foreground "
dangerouslySetInnerHTML={{

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -52,7 +52,7 @@ export default function CodeAreaModal({
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>
<TerminalSquare
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
className="h-6 w-6 text-gray-800 pl-1 "
aria-hidden="true"
/>
</DialogTitle>

2
src/frontend/src/modals/genericModal/index.tsx
View file

@ -55,7 +55,7 @@ export default function GenericModal({
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
className="h-6 w-6 text-gray-800 pl-1 "
aria-hidden="true"
/>
</DialogTitle>

4
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -14,8 +14,8 @@ export default function DisclosureComponent({
<div>
<Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
<div className="flex gap-4">
<Icon size={22} className="text-gray-800 dark:text-white/80" />
<span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
<Icon size={22} className="text-gray-800 " />
<span className="flex items-center text-sm text-gray-800 font-medium">
{title}
</span>
</div>

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

@ -182,11 +182,11 @@ export default function ExtraSidebar() {
);
}}
>
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
<span className="text-black dark:text-white w-full pr-1 truncate text-xs">
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border">
<span className="text-black w-full pr-1 truncate text-xs">
{data[d][t].display_name}
</span>
<Menu className="w-4 h-6 text-gray-400 dark:text-gray-600" />
<Menu className="w-4 h-6 text-gray-400 " />
</div>
</div>
</div>