mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
fix(frontend): user invite UI on Mobile (#2586)
# 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
4d457a9010
commit
59124ba0d4
@ -6,12 +6,16 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: Spacings.$spacing05;
|
||||
max-width: 100%;
|
||||
|
||||
.selector {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: ScreenSizes.$small) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -1,7 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
|
||||
import styles from "./UserToInvite.module.scss";
|
||||
|
||||
import { SingleSelector } from "../../../../../../../../../lib/components/ui/SingleSelector/SingleSelector";
|
||||
@ -43,16 +41,21 @@ export const UserToInvite = ({
|
||||
|
||||
return (
|
||||
<div className={styles.user_to_invite_wrapper}>
|
||||
<Icon
|
||||
color="dangerous"
|
||||
name="delete"
|
||||
handleHover={true}
|
||||
size="normal"
|
||||
onClick={removeCurrentInvitation}
|
||||
<TextInput
|
||||
label="Email"
|
||||
inputValue={email}
|
||||
setInputValue={setEmail}
|
||||
onKeyDown={(event) => {
|
||||
if (
|
||||
event.key === "Backspace" &&
|
||||
removeCurrentInvitation &&
|
||||
!email.length
|
||||
) {
|
||||
removeCurrentInvitation();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput label="Email" inputValue={email} setInputValue={setEmail} />
|
||||
|
||||
<div className={styles.selector}>
|
||||
<SingleSelector
|
||||
selectedOption={{ label: selectedRole, value: selectedRole }}
|
||||
|
@ -11,6 +11,7 @@ type TextInputProps = {
|
||||
onSubmit?: () => void;
|
||||
disabled?: boolean;
|
||||
crypted?: boolean;
|
||||
onKeyDown?: (event: React.KeyboardEvent) => void;
|
||||
};
|
||||
|
||||
export const TextInput = ({
|
||||
@ -22,6 +23,7 @@ export const TextInput = ({
|
||||
onSubmit,
|
||||
disabled,
|
||||
crypted,
|
||||
onKeyDown,
|
||||
}: TextInputProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
@ -41,6 +43,7 @@ export const TextInput = ({
|
||||
if (e.key === "Enter" && onSubmit) {
|
||||
onSubmit();
|
||||
}
|
||||
onKeyDown?.(e);
|
||||
}}
|
||||
/>
|
||||
{!simple && iconName && (
|
||||
|
Loading…
Reference in New Issue
Block a user