mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-09-11 14:36:35 +03:00
fix(frontend): phone display issues (#2386)
# 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
07f9078cb3
commit
56148878f6
@ -29,6 +29,7 @@ export const DeleteOrUnsubscribeConfirmationModal = ({
|
||||
}
|
||||
isOpen={isOpen}
|
||||
setOpen={setOpen}
|
||||
size="auto"
|
||||
Trigger={<div />}
|
||||
CloseTrigger={<div />}
|
||||
>
|
||||
|
@ -27,6 +27,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: Spacings.$spacing03;
|
||||
overflow: hidden;
|
||||
|
||||
.icon {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
.file_name {
|
||||
@include Typography.EllipsisOverflow;
|
||||
}
|
||||
}
|
||||
|
||||
.options_modal {
|
||||
|
@ -91,13 +91,15 @@ const KnowledgeItem = ({
|
||||
return (
|
||||
<div className={styles.knowledge_item_wrapper}>
|
||||
<div className={styles.left}>
|
||||
<div className={styles.icon}>
|
||||
{isUploadedKnowledge(knowledge) ? (
|
||||
getFileIcon(knowledge.fileName)
|
||||
) : (
|
||||
<Icon name="link" size="normal" color="black" />
|
||||
)}
|
||||
</div>
|
||||
{isUploadedKnowledge(knowledge) ? (
|
||||
getFileIcon(knowledge.fileName)
|
||||
) : (
|
||||
<Icon name="link" size="normal" color="black" />
|
||||
)}
|
||||
{isUploadedKnowledge(knowledge) ? (
|
||||
<span>{knowledge.fileName}</span>
|
||||
<span className={styles.file_name}>{knowledge.fileName}</span>
|
||||
) : (
|
||||
<a href={knowledge.url} target="_blank" rel="noopener noreferrer">
|
||||
{knowledge.url}
|
||||
|
@ -1,7 +1,5 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import Field from "@/lib/components/ui/Field";
|
||||
import { Select } from "@/lib/components/ui/Select";
|
||||
import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
|
||||
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
|
||||
|
||||
import { RemoveAccessIcon } from "./components/RemoveAccessIcon";
|
||||
@ -35,7 +33,6 @@ export const BrainUser = ({
|
||||
email,
|
||||
});
|
||||
const { currentBrain } = useBrainContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -49,15 +46,7 @@ export const BrainUser = ({
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-1">
|
||||
<Field
|
||||
name="email"
|
||||
required
|
||||
type="email"
|
||||
placeholder={t("email")}
|
||||
value={email}
|
||||
data-testid="role-assignation-email-input"
|
||||
readOnly
|
||||
/>
|
||||
<TextInput label="Email" inputValue={email} disabled={true} />
|
||||
</div>
|
||||
<Select
|
||||
onChange={(newRole) => void updateSelectedRole(newRole)}
|
||||
|
@ -52,6 +52,7 @@ const UserPage = (): JSX.Element => {
|
||||
<Modal
|
||||
isOpen={isLogoutModalOpened}
|
||||
setOpen={setIsLogoutModalOpened}
|
||||
size="auto"
|
||||
CloseTrigger={<div />}
|
||||
>
|
||||
<div className="text-center flex flex-col items-center gap-5">
|
||||
|
@ -43,7 +43,7 @@ export const AddBrainModal = (): JSX.Element => {
|
||||
desc={t("newBrainSubtitle", { ns: "brain" })}
|
||||
isOpen={isBrainCreationModalOpened}
|
||||
setOpen={setIsBrainCreationModalOpened}
|
||||
bigModal={true}
|
||||
size="big"
|
||||
CloseTrigger={<div />}
|
||||
>
|
||||
<div className={styles.add_brain_modal_container}>
|
||||
|
@ -38,7 +38,7 @@ export const UploadDocumentModal = (): JSX.Element => {
|
||||
setOpen={setShouldDisplayFeedCard}
|
||||
title={t("addKnowledgeTitle", { ns: "knowledge" })}
|
||||
desc={t("addKnowledgeSubtitle", { ns: "knowledge" })}
|
||||
bigModal={true}
|
||||
size="big"
|
||||
CloseTrigger={<div />}
|
||||
>
|
||||
<div className={styles.knowledge_modal}>
|
||||
|
@ -27,7 +27,11 @@
|
||||
width: 35vw;
|
||||
height: 80vh;
|
||||
|
||||
&.big_modal {
|
||||
&.auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.big {
|
||||
width: 40vw;
|
||||
height: 90vh;
|
||||
}
|
||||
@ -38,7 +42,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: ScreenSizes.$small) {
|
||||
width: 90vw;
|
||||
min-width: 90vw;
|
||||
}
|
||||
|
||||
.close_button_wrapper {
|
||||
|
@ -19,7 +19,7 @@ type CommonModalProps = {
|
||||
CloseTrigger?: ReactNode;
|
||||
isOpen?: undefined;
|
||||
setOpen?: undefined;
|
||||
bigModal?: boolean;
|
||||
size?: "auto" | "normal" | "big";
|
||||
unclosable?: boolean;
|
||||
unforceWhite?: boolean;
|
||||
};
|
||||
@ -38,8 +38,7 @@ const handleInteractOutside = (unclosable: boolean, event: Event) => {
|
||||
};
|
||||
|
||||
const handleModalContentAnimation = (
|
||||
isOpen: boolean,
|
||||
bigModal: boolean,
|
||||
size: "auto" | "normal" | "big",
|
||||
unforceWhite: boolean
|
||||
) => {
|
||||
const initialAnimation = { opacity: 0, y: "-40%" };
|
||||
@ -50,9 +49,9 @@ const handleModalContentAnimation = (
|
||||
initial: initialAnimation,
|
||||
animate: animateAnimation,
|
||||
exit: exitAnimation,
|
||||
className: `${styles.modal_content_wrapper} ${
|
||||
bigModal ? styles.big_modal : ""
|
||||
} ${unforceWhite ? styles.white : ""}`,
|
||||
className: `${styles.modal_content_wrapper} ${styles[size]} ${
|
||||
unforceWhite ? styles.white : ""
|
||||
}`,
|
||||
};
|
||||
};
|
||||
|
||||
@ -64,7 +63,7 @@ export const Modal = ({
|
||||
CloseTrigger,
|
||||
isOpen: customIsOpen,
|
||||
setOpen: customSetOpen,
|
||||
bigModal,
|
||||
size = "normal",
|
||||
unclosable,
|
||||
unforceWhite,
|
||||
}: ModalProps): JSX.Element => {
|
||||
@ -97,11 +96,7 @@ export const Modal = ({
|
||||
}
|
||||
>
|
||||
<motion.div
|
||||
{...handleModalContentAnimation(
|
||||
customIsOpen ?? isOpen,
|
||||
!!bigModal,
|
||||
!!unforceWhite
|
||||
)}
|
||||
{...handleModalContentAnimation(size, !!unforceWhite)}
|
||||
>
|
||||
<Dialog.Title
|
||||
className="m-0 text-2xl font-bold"
|
||||
|
@ -6,7 +6,7 @@ type TextInputProps = {
|
||||
iconName?: string;
|
||||
label: string;
|
||||
inputValue: string;
|
||||
setInputValue: (value: string) => void;
|
||||
setInputValue?: (value: string) => void;
|
||||
simple?: boolean;
|
||||
onSubmit?: () => void;
|
||||
disabled?: boolean;
|
||||
@ -35,7 +35,7 @@ export const TextInput = ({
|
||||
className={styles.text_input}
|
||||
type={crypted ? "password" : "text"}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onChange={(e) => setInputValue?.(e.target.value)}
|
||||
placeholder={label}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && onSubmit) {
|
||||
|
Loading…
Reference in New Issue
Block a user