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

#6386) 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 <[email protected]>
twentyhq · Aug 7, 2024 · c836bbb · c836bbb
1 parent 5b7933a
commit c836bbb
Show file tree

Hide file tree

Showing 20 changed files with 286 additions and 338 deletions.
diff --git a/...ont/src/modules/auth/components/Modal.tsx → ...src/modules/auth/components/AuthModal.tsx b/...ont/src/modules/auth/components/Modal.tsx → ...src/modules/auth/components/AuthModal.tsx
@@ -1,17 +1,16 @@
-import React from 'react';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import styled from '@emotion/styled';
+import React from 'react';
 
-import { ModalLayout } from '@/ui/layout/modal/components/ModalLayout';
-
-const StyledContent = styled(ModalLayout.Content)`
+const StyledContent = styled(Modal.Content)`
   align-items: center;
-  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+  justify-content: center;
 `;
 
 type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
-  <ModalLayout padding={'none'}>
+  <Modal padding={'none'} modalVariant="primary">
     <StyledContent>{children}</StyledContent>
-  </ModalLayout>
+  </Modal>
 );
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ModalCloseButton } from './ModalCloseButton';
 
 const StyledModal = styled(Modal)`
@@ -16,7 +16,7 @@ const StyledModal = styled(Modal)`
     min-width: auto;
     min-height: auto;
     width: 100%;
-    height: 100%;
+    height: 80%;
   }
 `;
 
@@ -40,11 +40,15 @@ export const ModalWrapper = ({
   const { rtl } = useSpreadsheetImportInternal();
 
   return (
-    <StyledModal isOpen={isOpen} size="large">
-      <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
-        <ModalCloseButton onClose={onClose} />
-        {children}
-      </StyledRtlLtr>
-    </StyledModal>
+    <>
+      {isOpen && (
+        <StyledModal size="large" onClose={onClose} isClosable={true}>
+          <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
+            <ModalCloseButton onClose={onClose} />
+            {children}
+          </StyledRtlLtr>
+        </StyledModal>
+      )}
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
+
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@@ -14,8 +14,8 @@ import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ColumnGrid } from './components/ColumnGrid';
 import { TemplateColumn } from './components/TemplateColumn';
 import { UserTableColumn } from './components/UserTableColumn';

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/...ont/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@@ -4,8 +4,8 @@ import { useCallback, useState } from 'react';
 import { Heading } from '@/spreadsheet-import/components/Heading';
 import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
 import { ImportedRow } from '@/spreadsheet-import/types';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { SelectHeaderTable } from './components/SelectHeaderTable';
 
 const StyledHeading = styled(Heading)`

diff --git a/...front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/...front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -1,10 +1,11 @@
-import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
 
 import { Heading } from '@/spreadsheet-import/components/Heading';
 import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
 import { Radio } from '@/ui/input/components/Radio';
 import { RadioGroup } from '@/ui/input/components/RadioGroup';
+
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
 const StyledContent = styled(Modal.Content)`

diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx
@@ -3,10 +3,11 @@ import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { Modal } from '@/ui/layout/modal/components/Modal';
+
 import { StepBar } from '@/ui/navigation/step-bar/components/StepBar';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { UploadFlow } from './UploadFlow';
 
 const StyledHeader = styled(Modal.Header)`

diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
@@ -10,8 +10,8 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { Columns, MatchColumnsStep } from './MatchColumnsStep/MatchColumnsStep';
 import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep';
 import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';

diff --git a/...es/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx b/...es/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
@@ -1,9 +1,8 @@
-import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
 import { WorkBook } from 'xlsx-ugnis';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
-
 import { DropZone } from './components/DropZone';
 
 const StyledContent = styled(Modal.Content)`

diff --git a/...y-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/...y-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@@ -20,9 +20,9 @@ import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { Button } from '@/ui/input/button/components/Button';
 import { Toggle } from '@/ui/input/components/Toggle';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isDefined } from '~/utils/isDefined';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { generateColumns } from './components/columns';
 import { ImportedStructuredRowMetadata } from './types';
 

diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
@@ -11,7 +11,7 @@ import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
 
 const StyledDialogOverlay = styled(motion.div)`
   align-items: center;
-  background: ${({ theme }) => theme.background.overlay};
+  background: ${({ theme }) => theme.background.overlayPrimary};
   display: flex;
   height: 100dvh;
   justify-content: center;

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -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>
   );