feat: Responsive design improvements (#352)

chavda-bhavik · web-flow · commit 0900d2cfadc4 · 2023-08-29T12:55:32.000+05:30
diff --git a/apps/widget/package.json b/apps/widget/package.json
@@ -43,6 +43,7 @@
     "@impler/shared": "^0.7.2",
     "@mantine/core": "^5.6.3",
     "@mantine/dropzone": "^5.6.3",
+    "@mantine/hooks": "^6.0.19",
     "@mantine/notifications": "5.6.3",
     "@sentry/react": "^7.19.0",
     "@sentry/tracing": "^7.19.0",
diff --git a/apps/widget/src/components/Common/Footer/Footer.tsx b/apps/widget/src/components/Common/Footer/Footer.tsx
@@ -80,13 +80,13 @@ export function Footer(props: IFooterProps) {
   };
 
   return (
-    <Group className={classes.wrapper}>
+    <Group className={classes.wrapper} spacing="xs">
       <a className={classes.poweredBy} href={variables.implerWebsite} target="_blank" rel="noopener noreferrer">
         <Text size="xs">
           Powered by <img src="/logo-full.png" className={classes.implerImage} />
         </Text>
       </a>
-      <Group spacing="md">{FooterActions[active]}</Group>
+      <Group spacing="xs">{FooterActions[active]}</Group>
     </Group>
   );
 }
diff --git a/apps/widget/src/components/Common/Footer/Styles.tsx b/apps/widget/src/components/Common/Footer/Styles.tsx
@@ -3,7 +3,11 @@ import { colors } from '@config';
 import { createStyles, MantineTheme } from '@mantine/core';
 
 export const getWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
+  flexDirection: 'column-reverse',
   justifyContent: 'space-between',
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    flexDirection: 'row',
+  },
 });
 
 export const getPoweredByLinkStyles = (theme: MantineTheme): React.CSSProperties => ({
diff --git a/apps/widget/src/components/Common/Heading/Heading.tsx b/apps/widget/src/components/Common/Heading/Heading.tsx
@@ -1,4 +1,4 @@
-import { Group, Title, useMantineTheme } from '@mantine/core';
+import { Group, MediaQuery, Title, useMantineTheme } from '@mantine/core';
 import { Stepper } from '@ui/Stepper';
 import { TEXTS, variables } from '@config';
 import { PhasesEum } from '@types';
@@ -27,9 +27,11 @@ export function Heading({ active, title }: IHeadingProps) {
   const theme = useMantineTheme();
 
   return (
-    <Group style={{ justifyContent: 'space-between' }} mb="lg">
-      <Title order={3}>{title}</Title>
-      <Stepper active={active} steps={Steps} primaryColor={theme.colors.primary[variables.colorIndex]} />
-    </Group>
+    <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+      <Group style={{ justifyContent: 'space-between' }} mb="lg">
+        <Title order={3}>{title}</Title>
+        <Stepper active={active} steps={Steps} primaryColor={theme.colors.primary[variables.colorIndex]} />
+      </Group>
+    </MediaQuery>
   );
 }
diff --git a/apps/widget/src/components/Common/Layout/Styles.tsx b/apps/widget/src/components/Common/Layout/Styles.tsx
@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 import { createStyles, MantineTheme } from '@mantine/core';
 
-export const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
-  paddingRight: 24,
-  paddingLeft: 24,
-  paddingBottom: 24,
+export const getRootStyles = (theme: MantineTheme) => ({
+  paddingBottom: 16,
+  '@media (min-width: 768px)': {
+    paddingRight: 24,
+    paddingLeft: 24,
+    paddingBottom: 24,
+  },
   border: '1px solid transparent',
   display: 'flex',
   flexDirection: 'column',
diff --git a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
@@ -59,7 +59,7 @@ export function Phase1(props: IPhase1Props) {
           />
         )}
         <div className={classes.download}>
-          <Button loading={isDownloadInProgress} size="sm" leftIcon={<Download />} onClick={onDownload}>
+          <Button loading={isDownloadInProgress} leftIcon={<Download />} onClick={onDownload}>
             {TEXTS.PHASE1.DOWNLOAD_SAMPLE}
           </Button>
         </div>
diff --git a/apps/widget/src/components/widget/Phases/Phase2/MappingHeading/MappingHeading.tsx b/apps/widget/src/components/widget/Phases/Phase2/MappingHeading/MappingHeading.tsx
@@ -9,10 +9,10 @@ export const MappingHeading = React.forwardRef<HTMLDivElement, {}>((props, ref)
   return (
     <Group style={{ justifyContent: 'space-between' }} noWrap ref={ref}>
       <Group className={classes.textWrapper} align="stretch" noWrap>
-        <Text color="dimmed" style={{ width: '50%' }}>
+        <Text color="dimmed" className={classes.text}>
           {TEXTS.PHASE2.NAME_IN_SCHEMA_TITLE}
         </Text>
-        <Text color="dimmed" style={{ width: '50%' }}>
+        <Text color="dimmed" className={classes.text}>
           {TEXTS.PHASE2.NAME_IN_SHEET_TITLE}
         </Text>
       </Group>
diff --git a/apps/widget/src/components/widget/Phases/Phase2/MappingHeading/Styles.tsx b/apps/widget/src/components/widget/Phases/Phase2/MappingHeading/Styles.tsx
@@ -10,8 +10,17 @@ export const getTextWrapperStyles = (theme: MantineTheme): React.CSSProperties =
   },
 });
 
+export const getTextStyles = (theme: MantineTheme): React.CSSProperties => ({
+  width: '50%',
+  fontSize: theme.fontSizes.xs,
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    fontSize: theme.fontSizes.sm,
+  },
+});
+
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
     textWrapper: getTextWrapperStyles(theme),
+    text: getTextStyles(theme),
   };
 });
diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
@@ -63,12 +63,14 @@ export function Phase3(props: IPhase3Props) {
   return (
     <>
       <LoadingOverlay visible={!isInitialDataLoaded || isConfirmReviewLoading} />
-      <Group className={classes.textContainer} align="center">
+      <Group className={classes.textContainer} align="center" spacing="xs">
         <Group align="center" spacing="xs">
           <Warning fill={colors.red} className={classes.warningIcon} />
-          <Text color={colors.red}>{TEXTS.PHASE3.INVALID_DATA_INFO}</Text>
+          <Text size="xs" inline color={colors.red} style={{ flex: 1 }}>
+            {TEXTS.PHASE3.INVALID_DATA_INFO}
+          </Text>
         </Group>
-        <Button size="sm" leftIcon={<Download />} onClick={onExportData}>
+        <Button leftIcon={<Download />} onClick={onExportData}>
           {TEXTS.PHASE3.EXPORT_DATA}
         </Button>
       </Group>
diff --git a/apps/widget/src/components/widget/Phases/Phase4/Phase4.tsx b/apps/widget/src/components/widget/Phases/Phase4/Phase4.tsx
@@ -22,10 +22,10 @@ export function Phase4(props: IPhase4Props) {
     <>
       <Group className={classes.wrapper}>
         <CheckIcon className={classes.check} />
-        <Title color={primaryColor} order={2} mt="md">
+        <Title className={classes.title} color={primaryColor} order={2} mt="md">
           {replaceVariablesInString(TEXTS.COMPLETE.title, { count: numberFormatter(rowsCount) })}
         </Title>
-        <Text size="xl" color="dimmed">
+        <Text className={classes.subTitle} color="dimmed">
           {replaceVariablesInString(TEXTS.COMPLETE.subTitle, { count: numberFormatter(rowsCount) })}
         </Text>
       </Group>
diff --git a/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx b/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx
@@ -17,13 +17,33 @@ export const getWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
 export const getCheckIconStyles = (theme: MantineTheme): React.CSSProperties => ({
   backgroundColor: colors.success,
   color: colors.white,
-  height: 70,
   borderRadius: '100%',
-  padding: 10,
+  height: 50,
+  padding: 5,
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    height: 70,
+    padding: 10,
+  },
+});
+
+export const getTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
+  fontSize: theme.fontSizes.xl,
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    fontSize: 30,
+  },
+});
+
+export const getSubTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
+  fontSize: theme.fontSizes.lg,
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    fontSize: 25,
+  },
 });
 
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
+    subTitle: getSubTitleStyles(theme),
+    title: getTitleStyles(theme),
     wrapper: getWrapperStyles(theme),
     check: getCheckIconStyles(theme),
   };
diff --git a/apps/widget/src/components/widget/Widget.styles.tsx b/apps/widget/src/components/widget/Widget.styles.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export const getTitleStyles = (theme: MantineTheme) => ({
+  display: 'block',
+  [`@media (max-width: ${theme.spacing.md}px)`]: {
+    display: 'none',
+  },
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    title: getTitleStyles(theme),
+  };
+});
diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx
@@ -1,16 +1,17 @@
 import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
 import { Modal } from '@ui/Modal';
 import { ParentWindow } from '@util';
-import { useAppState } from '@store/app.context';
-import { useQueryClient } from '@tanstack/react-query';
-import { PhasesEum, PromptModalTypesEnum } from '@types';
+import { IUpload } from '@impler/shared';
 import { Phase1 } from './Phases/Phase1';
 import { Phase2 } from './Phases/Phase2';
 import { Phase3 } from './Phases/Phase3';
 import { Phase4 } from './Phases/Phase4';
+import { useAppState } from '@store/app.context';
 import { PromptModal } from './Phases/PromptModal';
 import { Layout } from 'components/Common/Layout';
-import { IUpload } from '@impler/shared';
+import { PhasesEum, PromptModalTypesEnum } from '@types';
 import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
 
 export function Widget() {
@@ -62,7 +63,7 @@ export function Widget() {
   };
 
   return (
-    <Modal opened onClose={onClose}>
+    <Modal title={title || templateInfo?.name} opened onClose={onClose}>
       <Layout active={phase} title={title || templateInfo?.name}>
         {PhaseView[phase]}
         <PromptModal
diff --git a/apps/widget/src/config/theme.config.ts b/apps/widget/src/config/theme.config.ts
@@ -7,4 +7,11 @@ export const mantineConfig: MantineThemeOverride = {
   headings: {
     fontFamily: "'Poppins', sans serif",
   },
+  breakpoints: {
+    xs: 0,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1440,
+  },
 };
diff --git a/apps/widget/src/design-system/Button/Button.styles.tsx b/apps/widget/src/design-system/Button/Button.styles.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export const getRootStyles = (theme: MantineTheme) => ({
+  height: 35,
+  paddingBlock: 5,
+  paddingInline: 7,
+  fontSize: theme.fontSizes.sm,
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    height: 40,
+    paddingBlock: 10,
+    paddingInline: 15,
+  },
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    root: getRootStyles(theme),
+  };
+});
diff --git a/apps/widget/src/design-system/Button/Button.tsx b/apps/widget/src/design-system/Button/Button.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { Button as MantineButton, MantineSize } from '@mantine/core';
+import useStyles from './Button.styles';
 
 interface IButtonProps {
   variant?: 'filled' | 'outline';
@@ -12,6 +13,7 @@ interface IButtonProps {
 }
 
 export function Button(props: PropsWithChildren<IButtonProps>) {
+  const { classes } = useStyles();
   const { variant, disabled, children, loading, onClick, size = 'md', color, leftIcon } = props;
 
   return (
@@ -23,6 +25,7 @@ export function Button(props: PropsWithChildren<IButtonProps>) {
       onClick={onClick}
       size={size}
       color={color}
+      classNames={classes}
     >
       {children}
     </MantineButton>
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.style.ts b/apps/widget/src/design-system/Dropzone/Dropzone.style.ts
@@ -26,11 +26,14 @@ export const getIconStyles = (theme) => ({
 });
 
 export const getCheckIconStyles = (theme) => ({
-  height: 60,
+  height: 40,
   backgroundColor: colors.success,
   borderRadius: '50%',
   color: 'white',
   display: 'block',
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    height: 50,
+  },
 });
 
 export const getWrapperStyles = (theme) => ({
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.tsx
@@ -43,7 +43,7 @@ export function Dropzone(props: IDropzoneProps) {
             <Group position="center" mb="sm">
               <CheckIcon className={classes.checkIcon} />
             </Group>
-            <Text size="xl" mb="sm" align="center">
+            <Text size="lg" mb="sm" align="center">
               {TEXTS.DROPZONE.FILE_SELECTION}
             </Text>
             {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
diff --git a/apps/widget/src/design-system/File/File.style.ts b/apps/widget/src/design-system/File/File.style.ts
@@ -28,9 +28,30 @@ export const getCrossIconStyles = (theme: MantineTheme): React.CSSProperties =>
 export const getNameTextStyles = (theme: MantineTheme): React.CSSProperties => ({
   color: colors.darkDeem,
   fontWeight: 'bold',
+  textOverflow: 'ellipsis',
+  width: '100%',
+  maxWidth: '105px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  [`@media (min-width: ${theme.breakpoints.sm}px)`]: {
+    maxWidth: '300px',
+  },
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    maxWidth: '400px',
+  },
+});
+
+export const getExtensionTextStyles = (theme: MantineTheme): React.CSSProperties => ({
+  color: colors.darkDeem,
+  fontWeight: 'bold',
+  whiteSpace: 'nowrap',
 });
 
 export const getSizeTextStyles = (theme: MantineTheme): React.CSSProperties => ({
+  display: 'none',
+  [`@media (min-width: ${theme.breakpoints.sm}px)`]: {
+    display: 'block',
+  },
   color: colors.darkDeem,
 });
 
@@ -41,5 +62,6 @@ export default createStyles((theme: MantineTheme, params, getRef): Record<string
     crossIcon: getCrossIconStyles(theme),
     nameText: getNameTextStyles(theme),
     sizeText: getSizeTextStyles(theme),
+    extensionText: getExtensionTextStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/File/File.tsx b/apps/widget/src/design-system/File/File.tsx
@@ -3,6 +3,7 @@ import { Group, Text } from '@mantine/core';
 import useStyles from './File.style';
 import { colors } from '../../config/colors.config';
 import { formatBytes } from '../../util/helpers/common.helpers';
+import { variables } from '@config';
 
 interface IFile {
   name: string;
@@ -25,9 +26,14 @@ export function File(props: IFile) {
     <Group className={classes.root}>
       <Group spacing="xs">
         <FileIcon className={classes.fileIcon} fill={colors.darkDeem} />
-        <Text size="sm" inline className={classes.nameText}>
-          {name}
-        </Text>
+        <Group spacing={0} noWrap>
+          <Text size="sm" inline className={classes.nameText}>
+            {name.split('.')[variables.baseIndex]}
+          </Text>
+          <Text size="sm" inline className={classes.extensionText}>
+            .{name.split('.').pop()}
+          </Text>
+        </Group>
       </Group>
       <Group spacing="xs">
         <Text size="sm" inline className={classes.sizeText}>
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
diff --git a/apps/widget/src/design-system/Modal/Modal.style.ts b/apps/widget/src/design-system/Modal/Modal.style.ts
diff --git a/apps/widget/src/design-system/Pagination/Pagination.style.tsx b/apps/widget/src/design-system/Pagination/Pagination.style.tsx
diff --git a/apps/widget/src/design-system/Pagination/Pagination.tsx b/apps/widget/src/design-system/Pagination/Pagination.tsx
diff --git a/apps/widget/src/design-system/Stepper/Stepper.styles.ts b/apps/widget/src/design-system/Stepper/Stepper.styles.ts
diff --git a/apps/widget/src/design-system/Stepper/Stepper.tsx b/apps/widget/src/design-system/Stepper/Stepper.tsx
diff --git a/apps/widget/src/design-system/Table/Table.style.ts b/apps/widget/src/design-system/Table/Table.style.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
