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

Fixed buttons, applying unstyled to them instead of variant none

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-17 11:12:27 -03:00
commit afd07fcfed
15 changed files with 100 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -114,7 +114,7 @@ export default function ParameterComponent({
const logs = (data?.logs[outputName] ?? [])[0];
if (Array.isArray(logs) && logs.length > 1) {
return logs.some(
(log) => log.type === "error" || log.type === "ValueError"
(log) => log.type === "error" || log.type === "ValueError",
);
} else {
return logs?.type === "error" || logs?.type === "ValueError";
@ -156,7 +156,7 @@ export default function ParameterComponent({
handleUpdateValues,
debouncedHandleUpdateValues,
setNode,
setIsLoading
setIsLoading,
);
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -164,7 +164,7 @@ export default function ParameterComponent({
name,
takeSnapshot,
setNode,
updateNodeInternals
updateNodeInternals,
);
const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -173,13 +173,13 @@ export default function ParameterComponent({
let disabled =
edges.some(
(edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false;
let disabledOutput =
edges.some(
(edge) =>
edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false;
const handleRefreshButtonPress = async (name, data) => {
@ -190,7 +190,7 @@ export default function ParameterComponent({
const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false
skipSnapshot: boolean | undefined = false,
): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot);
};
@ -304,14 +304,14 @@ export default function ParameterComponent({
className={classNames(
left ? "my-12 -ml-0.5" : "my-12 -mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : ""
!showNode ? "mt-0" : "",
)}
style={{
borderColor: color ?? nodeColors.unknown,
}}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!)
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
></Handle>
@ -341,8 +341,7 @@ export default function ParameterComponent({
<div className="flex-1">
<Button
disabled={disabledOutput}
variant="none"
size="none"
unstyled
onClick={() => handleUpdateOutputHide()}
data-testid={`output-inspection-${title.toLowerCase()}`}
>
@ -366,7 +365,7 @@ export default function ParameterComponent({
</ShadTooltip>
) : (
<div className="flex gap-2">
<span className={!left && data.node?.frozen ? " text-ice" : ""}>
<span className={!left && data.node?.frozen ? "text-ice" : ""}>
{renderTitle()}
</span>
{!left && (
@ -380,8 +379,7 @@ export default function ParameterComponent({
}
>
<Button
variant="none"
size="none"
unstyled
disabled={!displayOutputPreview || unknownOutput}
onClick={() => setOpenOutputModal(true)}
data-testid={`output-inspection-${title.toLowerCase()}`}
@ -389,7 +387,7 @@ export default function ParameterComponent({
{errorOutput ? (
<IconComponent
className={classNames(
"h-5 w-5 rounded-md text-status-red"
"h-5 w-5 rounded-md text-status-red",
)}
name={"X"}
/>
@ -398,8 +396,8 @@ export default function ParameterComponent({
className={classNames(
"h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput
? " hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground"
? "hover:text-medium-indigo"
: "cursor-not-allowed text-muted-foreground",
)}
name={"ScanEye"}
/>
@ -430,7 +428,10 @@ export default function ParameterComponent({
{left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
<></>
) : (
<Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted">
<Button
unstyled
className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
>
<div className="flex">
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@ -457,12 +458,12 @@ export default function ParameterComponent({
}
className={classNames(
left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background"
"h-3 w-3 rounded-full border-2 bg-background",
)}
style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!)
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
/>

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

@ -440,8 +440,7 @@ export default function GenericNode({
<ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
<Button
onClick={handleUpdateCode}
variant="none"
size="none"
unstyled
className={"group p-1"}
loading={loadingUpdate}
>
@ -615,8 +614,7 @@ export default function GenericNode({
setValidationStatus(null);
buildFlow({ stopNodeId: data.id });
}}
variant="none"
size="none"
unstyled
className="group p-1"
>
<div
@ -844,8 +842,7 @@ export default function GenericNode({
)}
>
<Button
variant="none"
size="none"
unstyled
className="left-0 right-0 rounded-full border bg-background"
onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
>

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

@ -52,7 +52,7 @@ export default function Header(): JSX.Element {
const profileImageUrl =
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
profileCircle;
async function checkForChanges(): Promise<void> {
@ -65,7 +65,7 @@ export default function Header(): JSX.Element {
const lastFlowVisitedIndex = routeHistory
.reverse()
.findIndex(
(path) => path.includes("/flow/") && path !== location.pathname
(path) => path.includes("/flow/") && path !== location.pathname,
);
const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@ -91,8 +91,7 @@ export default function Header(): JSX.Element {
</Link>
{showArrowReturnIcon && (
<Button
variant="none"
size="none"
unstyled
onClick={() => {
checkForChanges();
redirectToLastLocation();
@ -198,8 +197,7 @@ export default function Header(): JSX.Element {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="none"
size="none"
unstyled
data-testid="user-profile-settings"
className="shrink-0"
>
@ -207,7 +205,7 @@ export default function Header(): JSX.Element {
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle
@ -225,7 +223,7 @@ export default function Header(): JSX.Element {
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle

40
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -31,7 +31,7 @@ const SideBarFoldersButtonsComponent = ({
const [foldersNames, setFoldersNames] = useState({});
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [editFolders, setEditFolderName] = useState(
folders.map((obj) => ({ name: obj.name, edit: false }))
folders.map((obj) => ({ name: obj.name, edit: false })),
);
const uploadFolder = useFolderStore((state) => state.uploadFolder);
const currentFolder = pathname.split("/");
@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
folderId,
handleFolderChange
handleFolderChange,
);
const handleUploadFlowsToFolder = () => {
@ -86,7 +86,7 @@ const SideBarFoldersButtonsComponent = ({
addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
(res) => {
refreshFolders();
}
},
);
}
@ -104,7 +104,6 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ name: obj.name, edit: false }));
}, [folders]);
const handleEditNameFolder = async (item) => {
const newEditFolders = editFolders.map((obj) => {
if (obj.name === item.name) {
@ -122,30 +121,24 @@ const SideBarFoldersButtonsComponent = ({
...item,
name: foldersNames[item.name],
flows: item.flows?.length > 0 ? item.flows : [],
components:
item.components?.length > 0
? item.components
: [],
components: item.components?.length > 0 ? item.components : [],
};
const updatedFolder = await updateFolder(
body,
item.id!
);
const updatedFolder = await updateFolder(body, item.id!);
const updatedFolderIndex = folders.findIndex(
(f) => f.id === updatedFolder.id
(f) => f.id === updatedFolder.id,
);
const updateFolders = [...folders];
updateFolders[updatedFolderIndex] = updatedFolder;
setFolders(updateFolders);
setFoldersNames({});
setEditFolderName(
folders.map((obj) => ({
name: obj.name,
edit: false,
}))
})),
);
} else {
setFoldersNames((old) => ({
@ -153,7 +146,7 @@ const SideBarFoldersButtonsComponent = ({
[item.name]: item.name,
}));
}
}
};
return (
<>
@ -183,7 +176,7 @@ const SideBarFoldersButtonsComponent = ({
<>
{folders.map((item, index) => {
const editFolderName = editFolders?.filter(
(folder) => folder.name === item.name
(folder) => folder.name === item.name,
)[0];
return (
<div
@ -199,7 +192,7 @@ const SideBarFoldersButtonsComponent = ({
? "border border-border bg-muted hover:bg-muted"
: "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
"group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
folderIdDragging === item.id! ? "bg-border" : ""
folderIdDragging === item.id! ? "bg-border" : "",
)}
onClick={() => handleChangeFolder!(item.id!)}
>
@ -269,7 +262,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({
name: obj.name,
edit: false,
}))
})),
);
}
if (e.key === "Enter") {
@ -278,8 +271,8 @@ const SideBarFoldersButtonsComponent = ({
handleKeyDown(e, e.key, "");
}}
autoFocus={true}
onBlur={async () => { handleEditNameFolder(item)
onBlur={async () => {
handleEditNameFolder(item);
}}
value={foldersNames[item.name]}
id={`input-folder-${item.name}`}
@ -314,8 +307,7 @@ const SideBarFoldersButtonsComponent = ({
e.stopPropagation();
e.preventDefault();
}}
size="none"
variant="none"
unstyled
>
<IconComponent
name={"Download"}

21
src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
View file

@ -22,8 +22,7 @@ export default function TableOptions({
<div>
<ShadTooltip content="Reset Columns">
<Button
variant="none"
size="none"
unstyled
onClick={() => {
resetGrid();
}}
@ -33,7 +32,7 @@ export default function TableOptions({
name="RotateCcw"
strokeWidth={2}
className={cn(
"h-5 w-5 text-primary transition-all hover:text-accent-foreground"
"h-5 w-5 text-primary transition-all hover:text-accent-foreground",
)}
/>
</Button>
@ -50,12 +49,7 @@ export default function TableOptions({
)
}
>
<Button
variant="none"
size="none"
onClick={duplicateRow}
disabled={!hasSelection}
>
<Button unstyled onClick={duplicateRow} disabled={!hasSelection}>
<IconComponent
name="Copy"
className={cn("h-5 w-5 text-primary transition-all")}
@ -75,17 +69,12 @@ export default function TableOptions({
)
}
>
<Button
variant="none"
size="none"
onClick={deleteRow}
disabled={!hasSelection}
>
<Button unstyled onClick={deleteRow} disabled={!hasSelection}>
<IconComponent
name="Trash2"
className={cn(
"h-5 w-5 text-primary transition-all",
!hasSelection ? "" : "hover:text-status-red"
!hasSelection ? "" : "hover:text-status-red",
)}
/>
</Button>

14
src/frontend/src/components/ui/button.tsx
View file

@ -20,7 +20,6 @@ const buttonVariants = cva(
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
none: "",
},
size: {
default: "h-10 py-2 px-4",
@ -28,14 +27,13 @@ const buttonVariants = cva(
xs: "py-0.5 px-3 rounded-md",
lg: "h-11 px-8 rounded-md",
icon: "py-1 px-1 rounded-md",
none: "",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
},
);
export interface ButtonProps
@ -43,6 +41,7 @@ export interface ButtonProps
VariantProps<typeof buttonVariants> {
asChild?: boolean;
loading?: boolean;
unstyled?: boolean;
}
function toTitleCase(text: string) {
@ -57,6 +56,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{
className,
variant,
unstyled,
size,
loading,
type,
@ -65,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
children,
...props
},
ref
ref,
) => {
const Comp = asChild ? Slot : "button";
let newChildren = children;
@ -75,7 +75,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<>
<Comp
className={cn(buttonVariants({ variant, size, className }))}
className={
!unstyled ? buttonVariants({ variant, size, className }) : className
}
disabled={loading || disabled}
{...(asChild ? {} : { type: type || "button" })}
ref={ref}
@ -97,7 +99,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
</Comp>
</>
);
}
},
);
Button.displayName = "Button";

7
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
View file

@ -28,13 +28,12 @@ const ButtonSendWrapper = ({
noInput
? "bg-high-indigo text-background"
: chatValue
? "text-primary"
: "bg-chat-send text-background"
? "text-primary"
: "bg-chat-send text-background",
)}
disabled={lockChat || saveLoading}
onClick={(): void => send()}
variant="none"
size="none"
unstyled
>
<Case
condition={

3
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
View file

@ -22,8 +22,7 @@ const UploadFileButton = ({
lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
}`}
onClick={handleButtonClick}
variant="none"
size="none"
unstyled
>
<ForwardedIconComponent name="PaperclipIcon" />
</Button>

2
src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
View file

@ -14,7 +14,7 @@ export default function DownloadButton({
className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground`}
>
<Button
variant={"none"}
unstyled
className="bg-transparent px-2 py-1 text-ring"
onClick={handleDownload}
>

9
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -59,7 +59,7 @@ export default function ChatView({
//
.filter(
(output) =>
output.data.message || (!output.data.message && output.artifacts)
output.data.message || (!output.data.message && output.artifacts),
)
.map((output, index) => {
try {
@ -140,7 +140,7 @@ export default function ChatView({
function updateChat(
chat: ChatMessageType,
message: string,
stream_url?: string
stream_url?: string,
) {
chat.message = message;
updateFlowPool(chat.componentId, {
@ -156,7 +156,7 @@ export default function ChatView({
setIsDragging,
setFiles,
currentFlowId,
setErrorData
setErrorData,
);
return (
@ -171,8 +171,7 @@ export default function ChatView({
<div className="eraser-position">
<Button
className="flex gap-1"
size="none"
variant="none"
unstyled
disabled={lockChat}
onClick={() => handleSelectChange("builds")}
>

42
src/frontend/src/modals/IOModal/index.tsx
View file

@ -36,25 +36,25 @@ export default function IOModal({
const allNodes = useFlowStore((state) => state.nodes);
const setMessages = useMessagesStore((state) => state.setMessages);
const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput"
(input) => input.type !== "ChatInput",
);
const chatInput = useFlowStore((state) => state.inputs).find(
(input) => input.type === "ChatInput"
(input) => input.type === "ChatInput",
);
const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput"
(output) => output.type !== "ChatOutput",
);
const chatOutput = useFlowStore((state) => state.outputs).find(
(output) => output.type === "ChatOutput"
(output) => output.type === "ChatOutput",
);
const nodes = useFlowStore((state) => state.nodes).filter(
(node) =>
inputs.some((input) => input.id === node.id) ||
outputs.some((output) => output.id === node.id)
outputs.some((output) => output.id === node.id),
);
const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -131,7 +131,7 @@ export default function IOModal({
const { handleRemoveSession } = useRemoveSession(
setSuccessData,
setErrorData
setErrorData,
);
useEffect(() => {
@ -155,7 +155,7 @@ export default function IOModal({
({ rows, columns }) => {
setMessages(rows);
setColumns(columns);
}
},
);
}
}, [open]);
@ -194,7 +194,7 @@ export default function IOModal({
<div className="flex-max-width h-full">
<div
className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
)}
>
<Tabs
@ -223,11 +223,11 @@ export default function IOModal({
<TabsContent value={"1"} className="api-modal-tabs-content">
{nodes
.filter((node) =>
inputs.some((input) => input.id === node.id)
inputs.some((input) => input.id === node.id),
)
.map((node, index) => {
const input = inputs.find(
(input) => input.id === node.id
(input) => input.id === node.id,
)!;
return (
<div
@ -284,11 +284,11 @@ export default function IOModal({
<TabsContent value={"2"} className="api-modal-tabs-content">
{nodes
.filter((node) =>
outputs.some((output) => output.id === node.id)
outputs.some((output) => output.id === node.id),
)
.map((node, index) => {
const output = outputs.find(
(output) => output.id === node.id
(output) => output.id === node.id,
)!;
const textOutputValue =
(flowPool[node!.id] ?? [])[
@ -379,7 +379,7 @@ export default function IOModal({
</ShadTooltip>
<div className="flex shrink-0 items-center justify-center gap-2 align-middle">
<Button
variant="none"
unstyled
size="icon"
onClick={(e) => {
e.preventDefault();
@ -439,7 +439,7 @@ export default function IOModal({
<div
className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : ""
!selectedViewField ? "hidden" : "",
)}
>
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
@ -458,7 +458,7 @@ export default function IOModal({
</div>
<div className="h-full w-full">
{inputs.some(
(input) => input.id === selectedViewField.id
(input) => input.id === selectedViewField.id,
) && (
<IOFieldView
type={InputOutput.INPUT}
@ -468,7 +468,7 @@ export default function IOModal({
/>
)}
{outputs.some(
(output) => output.id === selectedViewField.id
(output) => output.id === selectedViewField.id,
) && (
<IOFieldView
type={InputOutput.OUTPUT}
@ -478,12 +478,12 @@ export default function IOModal({
/>
)}
{sessions.some(
(session) => session === selectedViewField.id
(session) => session === selectedViewField.id,
) && (
<SessionView
rows={messages.filter(
(message) =>
message.session_id === selectedViewField.id
message.session_id === selectedViewField.id,
)}
/>
)}
@ -493,7 +493,7 @@ export default function IOModal({
<div
className={cn(
"flex h-full w-full",
selectedViewField ? "hidden" : ""
selectedViewField ? "hidden" : "",
)}
>
{haveChat ? (
@ -525,7 +525,7 @@ export default function IOModal({
"h-4 w-4",
isBuilding
? "animate-spin"
: "fill-current text-medium-indigo"
: "fill-current text-medium-indigo",
)}
/>
),

3
src/frontend/src/modals/secretKeyModal/index.tsx
View file

@ -112,8 +112,7 @@ export default function SecretKeyModal({
onClick={() => {
handleCopyClick();
}}
variant="none"
size="none"
unstyled
>
{textCopied ? (
<IconComponent name="Copy" className="h-4 w-4" />

8
src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
View file

@ -3,6 +3,7 @@ import { NodeToolbar } from "reactflow";
import { GradientGroup } from "../../../../icons/GradientSparkles";
import useFlowStore from "../../../../stores/flowStore";
import { validateSelection } from "../../../../utils/reactflowUtils";
import { Button } from "../../../../components/ui/button";
export default function SelectionMenu({
onClick,
nodes,
@ -13,7 +14,7 @@ export default function SelectionMenu({
const [disable, setDisable] = useState<boolean>(
lastSelection && edges.length > 0
? validateSelection(lastSelection!, edges).length > 0
: false
: false,
);
const [isOpen, setIsOpen] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false);
@ -61,7 +62,8 @@ export default function SelectionMenu({
(isTransitioning ? " opacity-100" : " opacity-0")
}
>
<button
<Button
unstyled
className={`${
disable
? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
@ -77,7 +79,7 @@ export default function SelectionMenu({
disabled={disable}
/>
Group
</button>
</Button>
</div>
</div>
</NodeToolbar>

11
src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
View file

@ -52,8 +52,7 @@ const HeaderComponent = ({
}
>
<Button
variant="none"
size="none"
unstyled
onClick={handleExport}
disabled={disableFunctions}
>
@ -75,8 +74,7 @@ const HeaderComponent = ({
}
>
<Button
variant="none"
size="none"
unstyled
onClick={handleDuplicate}
disabled={disableFunctions}
>
@ -98,8 +96,7 @@ const HeaderComponent = ({
}
>
<Button
variant="none"
size="none"
unstyled
onClick={handleDelete}
disabled={disableFunctions}
>
@ -107,7 +104,7 @@ const HeaderComponent = ({
name="Trash2"
className={cn(
"h-5 w-5 text-primary transition-all",
disableFunctions ? "" : "hover:text-status-red"
disableFunctions ? "" : "hover:text-status-red",
)}
/>
</Button>

5
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
View file

@ -49,8 +49,7 @@ export default function ProfilePictureChooserComponent({
{profilePictures[folder].map((path, idx) => (
<Button
ref={value === folder + "/" + path ? ref : undefined}
size="none"
variant="none"
unstyled
onClick={() => onChange(folder + "/" + path)}
className="shrink-0 px-0.5 py-2"
>
@ -58,7 +57,7 @@ export default function ProfilePictureChooserComponent({
key={idx}
src={`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
folder + "/" + path
}`}