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

fix: Standardize font sizes using Tailwind classes across frontend components (#7770)

Browse source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2025-04-24 16:03:51 -03:00 • committed by GitHub
commit 9dabe63677
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 54 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
View file

@ -93,11 +93,11 @@ const ListItem = ({
</div>
)}
<div className="flex w-full flex-col truncate">
<div className="flex w-full truncate text-[13px] font-semibold">
<div className="flex w-full truncate text-mmd font-semibold">
<span className="truncate">{item.name}</span>
</div>
{"metaData" in item && item.metaData && (
<div className="flex w-full truncate text-[13px] text-gray-500">
<div className="flex w-full truncate text-mmd text-gray-500">
<span className="truncate">{item.metaData}</span>
</div>
)}
@ -105,7 +105,7 @@ const ListItem = ({
{isHovered || isFocused ? (
<div className="ml-auto flex items-center justify-start rounded-md">
<div className="flex items-center pr-1.5 text-[13px] font-semibold text-muted-foreground">
<div className="flex items-center pr-1.5 text-mmd font-semibold text-muted-foreground">
Select
</div>
<div className="flex items-center justify-center rounded-md">
@ -286,7 +286,7 @@ const ListSelectionComponent = ({
name={nodeClass?.icon || "unknown"}
className="h-[18px] w-[18px] text-muted-foreground"
/>
<div className="text-[13px] font-semibold">
<div className="text-mmd font-semibold">
{nodeClass?.display_name}
</div>
</div>

8
src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
View file

@ -78,7 +78,7 @@ export default function NodeDescription({
<MemoizedMarkdown
linkTarget="_blank"
className={cn(
"markdown prose flex w-full flex-col text-[13px] leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
"markdown prose flex w-full flex-col text-mmd leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
mdClassName,
)}
>
@ -153,7 +153,7 @@ export default function NodeDescription({
<Textarea
maxLength={charLimit}
className={cn(
"nowheel h-full w-full p-0 text-[13px] focus:border-primary focus:ring-0",
"nowheel h-full w-full p-0 text-mmd focus:border-primary focus:ring-0",
inputClassName,
)}
autoFocus
@ -166,7 +166,7 @@ export default function NodeDescription({
{charLimit && (nodeDescription?.length ?? 0) >= charLimit - 100 && (
<div
className={cn(
"pt-1 text-left text-[13px]",
"pt-1 text-left text-mmd",
(nodeDescription?.length ?? 0) >= charLimit
? "text-error"
: "text-primary",
@ -183,7 +183,7 @@ export default function NodeDescription({
data-testid="generic-node-desc"
ref={overflowRef}
className={cn(
"nodoubleclick generic-node-desc-text h-full cursor-grab text-[13px] text-muted-foreground word-break-break-word",
"nodoubleclick generic-node-desc-text h-full cursor-grab text-mmd text-muted-foreground word-break-break-word",
description === "" || !description ? "font-light italic" : "",
placeholderClassName,
)}

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

@ -100,7 +100,7 @@ export default function NodeName({
<div className="flex cursor-grab items-center gap-2">
<span
className={cn(
"max-w-44 cursor-grab truncate text-[14px]",
"max-w-44 cursor-grab truncate text-sm",
validationStatus?.data?.duration && "max-w-36",
beta && "max-w-36",
validationStatus?.data?.duration && beta && "max-w-20",

4
src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
View file

@ -369,7 +369,7 @@ export default function NodeStatus({
>
<div className="cursor-help">
{conditionSuccess && validationStatus?.data?.duration ? (
<div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-accent-emerald px-1 text-[11px] font-bold text-accent-emerald-foreground">
<div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-accent-emerald px-1 text-xxs font-bold text-accent-emerald-foreground">
<Check className="h-4 w-4 items-center self-center" />
<span>
{normalizeTimeString(validationStatus?.data?.duration)}
@ -388,7 +388,7 @@ export default function NodeStatus({
size="sq"
className="pointer-events-none mr-1 flex h-[22px] w-10 justify-center rounded-[8px] bg-accent-pink text-accent-pink-foreground"
>
<span className="text-[11px]">Beta</span>
<span className="text-xxs">Beta</span>
</Badge>
)}
</div>

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

@ -27,7 +27,7 @@ export default function OutputComponent({
return displayProxy(
<span
className={cn(
"text-[13px] font-medium",
"text-xs font-medium",
isToolMode && "text-secondary",
frozen ? "text-ice" : "",
)}

6
src/frontend/src/components/common/paginatorComponent/index.tsx
View file

@ -44,7 +44,7 @@ export default function PaginatorComponent({
return (
<div className="flex flex-1 items-center justify-between px-6">
<div className="flex items-center justify-end gap-1 text-[13px] text-secondary-foreground">
<div className="flex items-center justify-end gap-1 text-mmd text-secondary-foreground">
{(pageIndex - 1) * pageSize + 1}-
{Math.min(totalRowsCount, (pageIndex - 1) * pageSize + pageSize)}{" "}
<span className="text-muted-foreground">
@ -57,14 +57,14 @@ export default function PaginatorComponent({
</span>
</div>
<div className={"flex items-center gap-2"}>
<div className="flex items-center gap-1 text-[13px] text-secondary-foreground">
<div className="flex items-center gap-1 text-mmd text-secondary-foreground">
<Select
onValueChange={(value) => paginate(Number(value), size)}
value={pageIndex.toString()}
>
<SelectTrigger
direction="up"
className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0"
className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-mmd focus:border-none focus:ring-0 focus:!ring-offset-0"
>
<SelectValue placeholder="1" />
</SelectTrigger>

4
src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
View file

@ -101,7 +101,7 @@ export function ContentBlockDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="inline-block w-fit max-w-full text-[14px] font-semibold text-primary"
className="inline-block w-fit max-w-full text-sm font-semibold text-primary"
>
{headerTitle}
</Markdown>
@ -169,7 +169,7 @@ export function ContentBlockDisplay({
className="overflow-hidden pl-4 pt-[16px] font-medium"
>
<Markdown
className="text-[14px] font-semibold text-foreground"
className="text-sm font-semibold text-foreground"
remarkPlugins={[remarkGfm]}
linkTarget="_blank"
rehypePlugins={[rehypeMathjax]}

12
src/frontend/src/components/core/chatComponents/ContentDisplay.tsx
View file

@ -32,7 +32,7 @@ export default function ContentDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="inline-block w-fit max-w-full text-[14px] font-semibold text-foreground"
className="inline-block w-fit max-w-full text-sm font-semibold text-foreground"
>
{content.header.title}
</Markdown>
@ -57,7 +57,7 @@ export default function ContentDisplay({
remarkPlugins={[remarkGfm]}
linkTarget="_blank"
rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
components={{
p({ node, ...props }) {
return (
@ -154,7 +154,7 @@ export default function ContentDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
components={{
pre({ node, ...props }) {
return <>{props.children}</>;
@ -203,7 +203,7 @@ export default function ContentDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
>
**Input:**
</Markdown>
@ -216,7 +216,7 @@ export default function ContentDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
>
**Output:**
</Markdown>
@ -228,7 +228,7 @@ export default function ContentDisplay({
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
>
**Error:**
</Markdown>

2
src/frontend/src/components/core/chatComponents/DurationDisplay.tsx
View file

@ -65,7 +65,7 @@ export default function DurationDisplay({
bounce: 0,
duration: 300,
}}
className="text-[11px] font-bold tabular-nums"
className="text-xxs font-bold tabular-nums"
/>
</div>
</div>

6
src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -413,7 +413,7 @@ const SideBarFoldersButtonsComponent = ({
handleKeyDown={handleKeyDown}
/>
) : (
<span className="block w-0 grow truncate text-[13px] opacity-100">
<span className="block w-0 grow truncate text-mmd opacity-100">
{item.name}
</span>
)}
@ -459,7 +459,7 @@ const SideBarFoldersButtonsComponent = ({
>
<SidebarMenuButton
size="md"
className="text-[13px]"
className="text-mmd"
onClick={() => {
window.open("/store", "_blank");
}}
@ -473,7 +473,7 @@ const SideBarFoldersButtonsComponent = ({
isActive={checkPathFiles}
onClick={() => handleFilesClick?.()}
size="md"
className="text-[13px]"
className="text-mmd"
>
<ForwardedIconComponent name="File" />
My Files

2
src/frontend/src/customization/components/custom-parameter.tsx
View file

@ -64,7 +64,7 @@ export function getCustomParameterTitle({
<div className={cn(isFlexView && "max-w-56 truncate")}>
<span
data-testid={`title-${title.toLocaleLowerCase()}`}
className="text-[13px]"
className="text-mmd"
>
{title}
</span>

2
src/frontend/src/modals/EmbedModal/embed-modal.tsx
View file

@ -57,7 +57,7 @@ export default function EmbedModal({
return (
<BaseModal open={open} setOpen={setOpen} size="retangular">
<BaseModal.Header>
<div className="flex items-center gap-2 text-[16px] font-semibold">
<div className="flex items-center gap-2 text-base font-semibold">
<IconComponent name="Columns2" className="icon-size" />
Embed into site
</div>

2
src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx
View file

@ -131,7 +131,7 @@ export default function SessionSelector({
else toggleVisibility();
}}
className={cn(
"file-component-accordion-div group cursor-pointer rounded-md text-left text-[13px] hover:bg-secondary-hover",
"file-component-accordion-div group cursor-pointer rounded-md text-left text-mmd hover:bg-secondary-hover",
isVisible ? "bg-secondary-hover font-semibold" : "font-normal",
)}
>

2
src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx
View file

@ -33,7 +33,7 @@ export const ChatViewWrapper = ({
>
<div
className={cn(
"mb-4 flex h-[5%] items-center text-[16px] font-semibold",
"mb-4 flex h-[5%] items-center text-base font-semibold",
playgroundPage ? "justify-between" : "lg:justify-start",
)}
>

4
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx
View file

@ -60,7 +60,7 @@ const ButtonSendWrapper = ({
data-testid={showStopButton ? "button-stop" : "button-send"}
>
<Case condition={showStopButton}>
<div className="flex items-center gap-2 rounded-md text-[14px] font-medium">
<div className="flex items-center gap-2 rounded-md text-sm font-medium">
Stop
<Loading className="h-4 w-4" />
</div>
@ -75,7 +75,7 @@ const ButtonSendWrapper = ({
</Case> */}
<Case condition={showSendButton}>
<div className="flex h-fit w-fit items-center gap-2 text-[14px] font-medium">
<div className="flex h-fit w-fit items-center gap-2 text-sm font-medium">
Send
</div>
</Case>

2
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
View file

@ -38,7 +38,7 @@ const NoInputView: React.FC<NoInputViewProps> = ({
unstyled
className="form-modal-send-button cursor-pointer bg-muted text-foreground hover:bg-secondary-hover dark:hover:bg-input"
>
<div className="flex items-center gap-2 rounded-md text-[14px] font-medium">
<div className="flex items-center gap-2 rounded-md text-sm font-medium">
Stop
<Loading className="h-4 w-4" />
</div>

2
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/audio-settings/components/header.tsx
View file

@ -16,7 +16,7 @@ const AudioSettingsHeader = () => {
/>
Voice settings
</p>
<p className="text-[13px] leading-4 text-muted-foreground">
<p className="text-mmd leading-4 text-muted-foreground">
Voice chat is powered by OpenAI. You can also add more voices with
ElevenLabs.
</p>

6
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
View file

@ -293,7 +293,7 @@ export default function ChatMessage({
<div>
<div
className={cn(
"flex max-w-full items-baseline gap-3 truncate pb-2 text-[14px] font-semibold",
"flex max-w-full items-baseline gap-3 truncate pb-2 text-sm font-semibold",
)}
style={
chat.properties?.text_color
@ -316,7 +316,7 @@ export default function ChatMessage({
)}
</span>
{chat.properties?.source && !playgroundPage && (
<div className="text-[13px] font-normal text-muted-foreground">
<div className="text-mmd font-normal text-muted-foreground">
{chat.properties?.source.source}
</div>
)}
@ -417,7 +417,7 @@ export default function ChatMessage({
<>
<div
className={cn(
"w-full items-baseline whitespace-pre-wrap break-words text-[14px] font-normal",
"w-full items-baseline whitespace-pre-wrap break-words text-sm font-normal",
isEmpty ? "text-muted-foreground" : "text-primary",
)}
data-testid={`chat-message-${chat.sender_name}-${chatMessage}`}

2
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx
View file

@ -52,7 +52,7 @@ export const ErrorView = ({
{blocks.map((block, blockIndex) => (
<div
key={blockIndex}
className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground"
className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-sm text-foreground"
>
{block.contents.map((content, contentIndex) => {
if (content.type === "error") {

2
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message-field.tsx
View file

@ -66,7 +66,7 @@ export default function EditMessageField({
Cancel
</Button>
</div>
<div className="text-[13px] font-medium text-muted-foreground word-break-break-word">
<div className="text-mmd font-medium text-muted-foreground word-break-break-word">
Editing messages will update the memory but won't restart the
conversation.
</div>

2
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
View file

@ -39,7 +39,7 @@ export const MarkdownField = ({
linkTarget="_blank"
rehypePlugins={[rehypeMathjax, rehypeRaw]}
className={cn(
"markdown prose flex w-fit max-w-full flex-col items-baseline text-[14px] font-normal word-break-break-word dark:prose-invert",
"markdown prose flex w-fit max-w-full flex-col items-baseline text-sm font-normal word-break-break-word dark:prose-invert",
isEmpty ? "text-muted-foreground" : "text-primary",
)}
components={{

2
src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx
View file

@ -28,7 +28,7 @@ export const SidebarOpenView = ({
name="MessagesSquare"
className="h-[18px] w-[18px] text-ring"
/>
<div className="text-[13px] font-normal">Chat</div>
<div className="text-mmd font-normal">Chat</div>
</div>
<ShadTooltip styleClasses="z-50" content="New Chat">
<div>

2
src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx
View file

@ -109,7 +109,7 @@ export default function APITabsComponent() {
<TabsTrigger
key={index}
value={index.toString()}
className="flex items-center gap-2.5 rounded-md !border-0 px-4 py-2 !text-[14px] data-[state=active]:bg-background"
className="flex items-center gap-2.5 rounded-md !border-0 px-4 py-2 !text-sm data-[state=active]:bg-background"
>
<IconComponent name={tab.icon} className="h-4 w-4" />
{tab.title}

2
src/frontend/src/modals/apiModal/new-api-modal.tsx
View file

@ -73,7 +73,7 @@ export default function ApiModal({
/>
<span className="pl-2">API access</span>
{nodes.length > 0 && (
<div className="border-r-1 absolute right-12 flex items-center text-[13px] font-medium leading-[16px]">
<div className="border-r-1 absolute right-12 flex items-center text-mmd font-medium leading-[16px]">
<Button
variant="ghost"
size="icon"

2
src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx
View file

@ -132,7 +132,7 @@ export default function FileRendererComponent({
</span>
)}
{file.progress !== undefined && file.progress === -1 ? (
<span className="text-[13px] text-primary">
<span className="text-mmd text-primary">
Upload failed,{" "}
<span
className="cursor-pointer text-accent-pink-foreground underline"

2
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
View file

@ -31,7 +31,7 @@ export const ToolbarButton = memo(
data-testid={dataTestId}
>
<ForwardedIconComponent name={icon} className="h-4 w-4" />
{label && <span className="text-[13px] font-medium">{label}</span>}
{label && <span className="text-mmd font-medium">{label}</span>}
</Button>
</ShadTooltip>
),

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

@ -514,7 +514,7 @@ const NodeToolbarComponent = memo(
toolMode ? "text-primary" : "",
)}
/>
<span className="text-[13px] font-medium">Tool Mode</span>
<span className="text-mmd font-medium">Tool Mode</span>
<ToggleShadComponent
value={toolMode}
editNode={false}

4
src/frontend/src/pages/MainPage/pages/empty-page.tsx
View file

@ -1,4 +1,3 @@
import LangflowLogo from "@/assets/LangflowLogo.svg?react";
import logoDarkPng from "@/assets/logo_dark.png";
import logoLightPng from "@/assets/logo_light.png";
import CardsWrapComponent from "@/components/core/cardsWrapComponent";
@ -6,7 +5,6 @@ import { Button } from "@/components/ui/button";
import { DotBackgroundDemo } from "@/components/ui/dot-background";
import { DISCORD_URL, GITHUB_URL } from "@/constants/constants";
import { useGetUserData, useUpdateUser } from "@/controllers/API/queries/auth";
import { EnhancedBeamEffect } from "@/pages/MainPage/pages/enchanced-beam-effect";
import useAuthStore from "@/stores/authStore";
import { useDarkStore } from "@/stores/darkStore";
import { useFolderStore } from "@/stores/foldersStore";
@ -177,7 +175,7 @@ export const EmptyPageCommunity = ({
</div>
<p
data-testid="empty_page_drag_and_drop_text"
className="absolute bottom-5 left-0 right-0 mt-4 cursor-default text-center text-xs text-muted-foreground"
className="absolute bottom-5 left-0 right-0 mt-4 cursor-default text-center text-xxs text-muted-foreground"
>
{EMPTY_PAGE_DRAG_AND_DROP_TEXT}
</p>

2
src/frontend/src/pages/MainPage/pages/filesPage/index.tsx
View file

@ -107,7 +107,7 @@ export const FilesPage = () => {
</div>
{params.data.progress !== undefined &&
params.data.progress === -1 ? (
<span className="text-[13px] text-primary">
<span className="text-xs text-primary">
Upload failed,{" "}
<span
className="cursor-pointer text-accent-pink-foreground underline"

2
src/frontend/src/style/applies.css
View file

@ -1311,7 +1311,7 @@
}
.deploy-dropdown-item {
@apply h-11 cursor-pointer px-2.5 py-1 text-[14px] font-normal hover:bg-background !important;
@apply h-11 cursor-pointer px-2.5 py-1 text-sm font-normal hover:bg-background !important;
}
.deploy-dropdown-item > :first-child {

4
src/frontend/tailwind.config.mjs
View file

@ -342,6 +342,10 @@ const config = {
100: "100",
999: "999",
},
fontSize: {
"xxs": "11px",
"mmd": "13px",
},
},
},