mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-09-11 14:36:35 +03:00
fix(frontend): important buttons (#2613)
# 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
802a657cb6
commit
ed325c1b58
@ -80,6 +80,7 @@ export const BrainMainInfosStep = (): JSX.Element => {
|
|||||||
onClick={() => next()}
|
onClick={() => next()}
|
||||||
iconName="chevronRight"
|
iconName="chevronRight"
|
||||||
disabled={isDisabled}
|
disabled={isDisabled}
|
||||||
|
important={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -134,6 +134,7 @@ export const CreateBrainStep = (): JSX.Element => {
|
|||||||
knowledgeToFeed.length === 0 && !userIdentityData?.onboarded
|
knowledgeToFeed.length === 0 && !userIdentityData?.onboarded
|
||||||
}
|
}
|
||||||
isLoading={creating}
|
isLoading={creating}
|
||||||
|
important={true}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<QuivrButton
|
<QuivrButton
|
||||||
@ -142,6 +143,7 @@ export const CreateBrainStep = (): JSX.Element => {
|
|||||||
iconName="add"
|
iconName="add"
|
||||||
onClick={() => setCreateBrainStepIndex(1)}
|
onClick={() => setCreateBrainStepIndex(1)}
|
||||||
isLoading={creating}
|
isLoading={creating}
|
||||||
|
important={true}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,6 +51,7 @@ export const UploadDocumentModal = (): JSX.Element => {
|
|||||||
onClick={handleFeedBrain}
|
onClick={handleFeedBrain}
|
||||||
disabled={knowledgeToFeed.length === 0 || !currentBrain}
|
disabled={knowledgeToFeed.length === 0 || !currentBrain}
|
||||||
isLoading={feeding}
|
isLoading={feeding}
|
||||||
|
important={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,56 +19,60 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary {
|
|
||||||
border-color: var(--primary-0);
|
|
||||||
color: var(--primary-0);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--primary-0);
|
|
||||||
color: var(--text-0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dangerous {
|
|
||||||
border-color: var(--dangerous);
|
|
||||||
color: var(--dangerous);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dangerous);
|
|
||||||
color: var(--text-0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.gold {
|
|
||||||
border-color: var(--gold);
|
|
||||||
color: var(--gold);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--gold);
|
|
||||||
color: var(--text-0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
border-color: var(--border-2);
|
border-color: var(--border-2);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: var(--text-1);
|
color: var(--text-1);
|
||||||
|
background-color: var(--background-0);
|
||||||
|
|
||||||
&.dark {
|
&.dark {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.icon_label {
|
&.primary:not(.disabled) {
|
||||||
display: flex;
|
border-color: var(--primary-0);
|
||||||
flex-direction: row;
|
color: var(--primary-0);
|
||||||
gap: Spacings.$spacing02;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@media (max-width: ScreenSizes.$small) {
|
&:hover,
|
||||||
.label {
|
&.important {
|
||||||
display: none;
|
background-color: var(--primary-0);
|
||||||
|
color: var(--text-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dangerous:not(.disabled) {
|
||||||
|
border-color: var(--dangerous);
|
||||||
|
color: var(--dangerous);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.important {
|
||||||
|
background-color: var(--dangerous);
|
||||||
|
color: var(--text-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.gold:not(.disabled) {
|
||||||
|
border-color: var(--gold);
|
||||||
|
color: var(--gold);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.important {
|
||||||
|
background-color: var(--gold);
|
||||||
|
color: var(--text-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: Spacings.$spacing02;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media (max-width: ScreenSizes.$small) {
|
||||||
|
.label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,35 +16,60 @@ export const QuivrButton = ({
|
|||||||
iconName,
|
iconName,
|
||||||
disabled,
|
disabled,
|
||||||
hidden,
|
hidden,
|
||||||
|
important,
|
||||||
}: ButtonType): JSX.Element => {
|
}: ButtonType): JSX.Element => {
|
||||||
const [hovered, setHovered] = useState<boolean>(false);
|
const [hovered, setHovered] = useState<boolean>(false);
|
||||||
const { isDarkMode } = useUserSettingsContext();
|
const { isDarkMode } = useUserSettingsContext();
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (onClick) {
|
||||||
|
void onClick();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseEnter = () => {
|
||||||
|
setHovered(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
setHovered(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getIconColor = () => {
|
||||||
|
if (hovered || (important && !disabled)) {
|
||||||
|
return "white";
|
||||||
|
} else if (disabled) {
|
||||||
|
return "grey";
|
||||||
|
} else {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`
|
||||||
${styles.button_wrapper}
|
${styles.button_wrapper}
|
||||||
${styles[color]}
|
${styles[color]}
|
||||||
${disabled ? styles.disabled : ""}
|
|
||||||
${isDarkMode ? styles.dark : ""}
|
${isDarkMode ? styles.dark : ""}
|
||||||
${hidden ? styles.hidden : ""}
|
${hidden ? styles.hidden : ""}
|
||||||
|
${important ? styles.important : ""}
|
||||||
|
${disabled ? styles.disabled : ""}
|
||||||
`}
|
`}
|
||||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
onClick={handleClick}
|
||||||
onClick={() => onClick?.()}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseEnter={() => setHovered(true)}
|
onMouseLeave={handleMouseLeave}
|
||||||
onMouseLeave={() => setHovered(false)}
|
|
||||||
>
|
>
|
||||||
<div className={styles.icon_label}>
|
<div className={styles.icon_label}>
|
||||||
{!isLoading ? (
|
{!isLoading ? (
|
||||||
<Icon
|
<Icon
|
||||||
name={iconName}
|
name={iconName}
|
||||||
size="normal"
|
size="normal"
|
||||||
color={hovered ? "white" : disabled ? "grey" : color}
|
color={getIconColor()}
|
||||||
handleHover={false}
|
handleHover={false}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<LoaderIcon
|
<LoaderIcon
|
||||||
color={hovered ? "white" : disabled ? "grey" : color}
|
color={hovered || important ? "white" : disabled ? "grey" : color}
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -10,4 +10,5 @@ export interface ButtonType {
|
|||||||
onClick?: () => void | Promise<void>;
|
onClick?: () => void | Promise<void>;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
hidden?: boolean;
|
hidden?: boolean;
|
||||||
|
important?: boolean;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user