admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed SignInUp Modal misalignment for devices smaller than 400px width (#6386)

Browse Source 
Hi @Bonapara,
Issue #6385 

I encountered an issue with the Modal component where its width was
fixed at 400px. While the container housing the Modal adjusted its size
based on the screen width, the Modal itself remained at 400px regardless
of the screen size.

I have implemented a change to address this problem. Could you please
review the changes and let me know your thoughts?

Thank you!




https://github.com/user-attachments/assets/8358aacb-d6c3-440e-895e-7abc4f8a3534

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
nitin
2024-08-07 19:07:32 +05:30
committed by GitHub
parent 5b7933a6ab
commit c836bbbfc2
20 changed files with 286 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
View File

@ -6,6 +6,7 @@ import { useDebouncedCallback } from 'use-debounce';
import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
import { TextInput } from '@/ui/input/components/TextInput';
import { Modal } from '@/ui/layout/modal/components/Modal';
import {
Section,
@ -27,8 +28,8 @@ export type ConfirmationModalProps = {
const StyledConfirmationModal = styled(Modal)`
border-radius: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(6)};
width: calc(400px - ${({ theme }) => theme.spacing(32)});
height: auto;
`;
const StyledCenteredButton = styled(Button)`
@ -85,54 +86,57 @@ export const ConfirmationModal = ({
return (
<AnimatePresence mode="wait">
<LayoutGroup>
<StyledConfirmationModal
isOpen={isOpen}
onClose={() => {
if (isOpen) {
setIsOpen(false);
}
}}
onEnter={onConfirmClick}
>
<StyledCenteredTitle>
<H1Title title={title} fontColor={H1TitleFontColor.Primary} />
</StyledCenteredTitle>
<StyledSection
alignment={SectionAlignment.Center}
fontColor={SectionFontColor.Primary}
>
{subtitle}
</StyledSection>
{confirmationValue && (
<Section>
<TextInput
value={inputConfirmationValue}
onChange={handleInputConfimrationValueChange}
placeholder={confirmationPlaceholder}
fullWidth
key={'input-' + confirmationValue}
/>
</Section>
)}
<StyledCenteredButton
onClick={() => setIsOpen(false)}
variant="secondary"
title="Cancel"
fullWidth
/>
<StyledCenteredButton
onClick={async () => {
await onConfirmClick();
setIsOpen(false);
{isOpen && (
<StyledConfirmationModal
onClose={() => {
if (isOpen) {
setIsOpen(false);
}
}}
variant="secondary"
accent={confirmButtonAccent}
title={deleteButtonText}
disabled={!isValidValue}
fullWidth
dataTestId="confirmation-modal-confirm-button"
/>
</StyledConfirmationModal>
onEnter={onConfirmClick}
isClosable={true}
padding="large"
>
<StyledCenteredTitle>
<H1Title title={title} fontColor={H1TitleFontColor.Primary} />
</StyledCenteredTitle>
<StyledSection
alignment={SectionAlignment.Center}
fontColor={SectionFontColor.Primary}
>
{subtitle}
</StyledSection>
{confirmationValue && (
<Section>
<TextInput
value={inputConfirmationValue}
onChange={handleInputConfimrationValueChange}
placeholder={confirmationPlaceholder}
fullWidth
key={'input-' + confirmationValue}
/>
</Section>
)}
<StyledCenteredButton
onClick={() => setIsOpen(false)}
variant="secondary"
title="Cancel"
fullWidth
/>
<StyledCenteredButton
onClick={async () => {
await onConfirmClick();
setIsOpen(false);
}}
variant="secondary"
accent={confirmButtonAccent}
title={deleteButtonText}
disabled={!isValidValue}
fullWidth
dataTestId="confirmation-modal-confirm-button"
/>
</StyledConfirmationModal>
)}
</LayoutGroup>
</AnimatePresence>
);