mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
fix(frontend): tooltip on folder line (#2650)
…isabled state # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
ca6c0a86dc
commit
aac7c15151
@ -2,6 +2,7 @@ import { useState } from "react";
|
||||
|
||||
import { Checkbox } from "@/lib/components/ui/Checkbox/Checkbox";
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
|
||||
|
||||
import styles from "./SyncElementLine.module.scss";
|
||||
|
||||
@ -64,7 +65,7 @@ export const SyncElementLine = ({
|
||||
setChecked((prevChecked) => !prevChecked);
|
||||
};
|
||||
|
||||
return (
|
||||
const content = (
|
||||
<div
|
||||
className={`${styles.sync_element_line_wrapper} ${
|
||||
isCheckboxHovered || !isFolder || checked ? styles.no_hover : ""
|
||||
@ -85,11 +86,6 @@ export const SyncElementLine = ({
|
||||
checked={checked}
|
||||
setChecked={handleSetChecked}
|
||||
disabled={!selectable}
|
||||
tooltip={
|
||||
!selectable
|
||||
? "Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort."
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -97,4 +93,12 @@ export const SyncElementLine = ({
|
||||
<span className={styles.element_name}>{name}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return selectable ? (
|
||||
content
|
||||
) : (
|
||||
<Tooltip tooltip="Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort.">
|
||||
{content}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
@ -48,13 +48,13 @@ export const BrainRecapStep = (): JSX.Element => {
|
||||
return (
|
||||
<div className={styles.brain_recap_wrapper}>
|
||||
<div className={styles.content_wrapper}>
|
||||
<span className={styles.title}>Brain Recap</span>
|
||||
<MessageInfoBox type="warning">
|
||||
<span className={styles.warning_message}>
|
||||
Depending on the number of knowledge, the upload can take
|
||||
<strong> few minutes</strong>.
|
||||
</span>
|
||||
</MessageInfoBox>
|
||||
<span className={styles.title}>Brain Recap</span>
|
||||
<div className={styles.brain_info_wrapper}>
|
||||
<div className={styles.name_field}>
|
||||
<Controller
|
||||
|
@ -3,14 +3,12 @@ import { useEffect, useState } from "react";
|
||||
import styles from "./Checkbox.module.scss";
|
||||
|
||||
import { Icon } from "../Icon/Icon";
|
||||
import Tooltip from "../Tooltip/Tooltip";
|
||||
|
||||
interface CheckboxProps {
|
||||
label?: string;
|
||||
checked: boolean;
|
||||
setChecked: (value: boolean) => void;
|
||||
disabled?: boolean;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
export const Checkbox = ({
|
||||
@ -18,7 +16,6 @@ export const Checkbox = ({
|
||||
checked,
|
||||
setChecked,
|
||||
disabled,
|
||||
tooltip,
|
||||
}: CheckboxProps): JSX.Element => {
|
||||
const [currentChecked, setCurrentChecked] = useState<boolean>(checked);
|
||||
|
||||
@ -26,7 +23,7 @@ export const Checkbox = ({
|
||||
setCurrentChecked(checked);
|
||||
}, [checked]);
|
||||
|
||||
const checkboxElement = (
|
||||
return (
|
||||
<div
|
||||
className={`${styles.checkbox_wrapper} ${
|
||||
disabled ? styles.disabled : ""
|
||||
@ -47,10 +44,4 @@ export const Checkbox = ({
|
||||
{label && <span>{label}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return tooltip ? (
|
||||
<Tooltip tooltip={tooltip}>{checkboxElement}</Tooltip>
|
||||
) : (
|
||||
checkboxElement
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user