Skip to content

Commit 9c5958e

Browse files
thisismayureshthisismayuresh
authored
Merging Next (1.5.0 ) Into --> Main (#1057)
2 parents d43245e + ca26657 commit 9c5958e

34 files changed

+325
-299
lines changed

‎apps/api/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@impler/api",
3-
"version": "1.4.0",
3+
"version": "1.5.0",
44
"author": "implerhq",
55
"license": "MIT",
66
"private": true,

‎apps/queue-manager/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@impler/queue-manager",
3-
"version": "1.4.0",
3+
"version": "1.5.0",
44
"author": "implerhq",
55
"license": "MIT",
66
"private": true,

‎apps/queue-manager/src/consumers/send-bubble-data.consumer.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ export class SendBubbleDataConsumer extends BaseConsumer {
7373
'Content-Type': 'text/plain',
7474
},
7575
});
76-
7776
await this.makeResponseEntry(
7877
response,
7978
{ bubbleAppUrl: cachedData.bubbleAppUrl },

‎apps/web/components/Stepper/Stepper.styles.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createStyles } from '@mantine/core';
2+
3+
export const useStyles = createStyles((theme) => ({
4+
stepperContainer: {
5+
marginBottom: theme.spacing.xl,
6+
},
7+
stepText: {
8+
color: theme.colors.gray[5],
9+
fontSize: theme.fontSizes.sm,
10+
fontWeight: 500,
11+
marginBottom: theme.spacing.xs,
12+
},
13+
progressBar: {
14+
height: 4,
15+
backgroundColor: theme.colors.dark[4],
16+
17+
'& .mantine-Progress-bar': {
18+
backgroundColor: theme.colors.blue[5],
19+
},
20+
},
21+
}));

‎apps/web/components/Stepper/Stepper.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Box, Text, Progress } from '@mantine/core';
2+
import { useStyles } from './Stepper.styles';
3+
4+
interface StepperProps {
5+
currentStep: number;
6+
totalSteps: number;
7+
}
8+
9+
export const Stepper = ({ currentStep, totalSteps }: StepperProps) => {
10+
const { classes } = useStyles();
11+
const progressValue = (currentStep / totalSteps) * 100;
12+
13+
return (
14+
<Box className={classes.stepperContainer}>
15+
<Text className={classes.stepText}>
16+
Step {currentStep} of {totalSteps}
17+
</Text>
18+
<Progress value={progressValue} className={classes.progressBar} radius="xs" />
19+
</Box>
20+
);
21+
};

‎apps/web/components/signin/index.tsx‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import Link from 'next/link';
2-
import Image from 'next/image';
3-
import { Title, Text, Stack, Divider, Flex, Box, Alert, TextInput as Input } from '@mantine/core';
2+
import { Title, Text, Stack, Divider, Box, Alert, TextInput as Input, Container } from '@mantine/core';
43

54
import { Button } from '@ui/button';
65
import { useSignin } from '@hooks/auth/useSignin';
76
import { PasswordInput } from '@ui/password-input';
87
import { CONSTANTS, PLACEHOLDERS, ROUTES, colors } from '@config';
9-
10-
import DarkLogo from '@assets/images/logo-dark.png';
118
import { GithubIcon } from '@assets/icons/Github.icon';
129

1310
interface SigninProps {
@@ -19,21 +16,11 @@ export const Signin = ({ API_URL, error }: SigninProps) => {
1916
const { register, isLoginLoading, login, errorMessage } = useSignin();
2017

2118
return (
22-
<>
23-
<Flex
24-
gap="sm"
25-
direction="column"
26-
mb="md"
27-
align={{
28-
base: 'center',
29-
md: 'flex-start',
30-
}}
31-
>
32-
<Image src={DarkLogo} width={60} height={70} alt="Impler Logo" />
33-
<Title order={1} color="white">
34-
Sign In to your account
35-
</Title>
36-
</Flex>
19+
<Container size="xs">
20+
<Title order={1} color="white" mb="md">
21+
Let&apos;s Continue
22+
</Title>
23+
3724
<Box w="100%">
3825
<Button fullWidth component="a" size="md" href={API_URL + CONSTANTS.GITHUB_LOGIN_URL} leftIcon={<GithubIcon />}>
3926
Continue with Github
@@ -87,6 +74,6 @@ export const Signin = ({ API_URL, error }: SigninProps) => {
8774
</Text>
8875
</Stack>
8976
</form>
90-
</>
77+
</Container>
9178
);
9279
};

‎apps/web/config/constants.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { UserRolesEnum, IntegrationEnum, ColumnTypesEnum } from '@impler/shared'
77
import { Plan } from '@components/UpgradePlan/Plans';
88

99
export const CONSTANTS = {
10+
IMPLER_DOCUMENTATION: 'https://docs.impler.io',
11+
IMPLER_CAL_QUICK_MEETING: 'https://cal.com/impler/quick-chat',
1012
EXPLORE_PLANS_QUERY_LEY: 'explore_plans',
1113
PLAN_CODE_QUERY_KEY: 'plan_code',
1214
GITHUB_LOGIN_URL: '/v1/auth/github',

‎apps/web/config/theme.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const colors = {
1616
darkGrey: '#454545',
1717
stoneGrey: '#25262b',
1818
blackGrey: '#333333',
19+
darkGray: '#1A1B1E',
1920
darkBlue: '#5263FA',
2021
lightGrey: '#333333',
2122
faintGrey: '#1c1d21',

‎apps/web/layouts/OnboardLayout/OnboardLayout.styles.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,13 @@ const getContentContainerStyles = (theme: MantineTheme): Record<string, any> =>
3030
width: '65%',
3131
},
3232
});
33+
3334
const getSlideImageStyles = (): CSSObject => ({
3435
width: '100%',
3536
height: '100%',
3637
objectFit: 'contain',
3738
});
3839

39-
const getCarouselColStyles = (theme: MantineTheme): Record<string, any> => ({
40-
backgroundImage: `url(/images/auth-bg.png)`,
41-
backgroundPosition: 'center',
42-
backgroundSize: 'cover',
43-
padding: '40px',
44-
display: 'none',
45-
[`@media (min-width: ${theme.breakpoints.md}px)`]: {
46-
display: 'block',
47-
},
48-
});
49-
5040
const getGridStyles = (): Record<string, any> => ({
5141
minHeight: '100vh',
5242
width: '100vw',
@@ -59,14 +49,42 @@ const getViewportStyles = (): CSSObject => ({
5949
alignItems: 'center',
6050
});
6151

52+
const getLogoWrapperStyles = (theme: MantineTheme): CSSObject => ({
53+
position: 'absolute',
54+
top: theme.spacing.md,
55+
left: theme.spacing.md,
56+
zIndex: 10,
57+
});
58+
59+
const getFormWrapperStyles = (): CSSObject => ({
60+
display: 'flex',
61+
alignItems: 'center',
62+
justifyContent: 'center',
63+
minHeight: '100vh',
64+
width: '100%',
65+
margin: '0 auto', // keeps center alignment
66+
});
67+
68+
const getFormBoxStyles = (theme: MantineTheme): CSSObject => ({
69+
backgroundColor: theme.colors.dark[6],
70+
border: `1px solid ${theme.colors.gray[8]}`,
71+
borderRadius: theme.radius.sm,
72+
padding: theme.spacing.xl,
73+
boxShadow: theme.shadows.sm, // lighter shadow
74+
width: '100%',
75+
maxWidth: 400,
76+
});
77+
6278
export default createStyles((theme): Record<string, any> => {
6379
return {
6480
root: getRootStyles(),
6581
grid: getGridStyles(),
6682
image: getSlideImageStyles(),
6783
viewport: getViewportStyles(),
6884
contentCol: getContentColStyles(),
69-
carouselCol: getCarouselColStyles(theme),
7085
contentContainer: getContentContainerStyles(theme),
86+
logoWrapper: getLogoWrapperStyles(theme),
87+
formWrapper: getFormWrapperStyles(),
88+
formBox: getFormBoxStyles(theme),
7189
};
7290
});

‎apps/web/layouts/OnboardLayout/OnboardLayout.tsx‎

Lines changed: 37 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,25 @@
1+
import { Flex, Paper, Anchor } from '@mantine/core';
2+
import { PropsWithChildren } from 'react';
3+
import Link from 'next/link';
14
import Head from 'next/head';
25
import Image from 'next/image';
36
import dynamic from 'next/dynamic';
4-
import { PropsWithChildren } from 'react';
5-
import { Carousel } from '@mantine/carousel';
67
import { useQuery } from '@tanstack/react-query';
7-
import { Grid, Title, Text, Stack } from '@mantine/core';
88

99
import { commonApi } from '@libs/api';
10-
import { API_KEYS, TEXTS } from '@config';
10+
import { API_KEYS, colors, CONSTANTS, TEXTS } from '@config';
1111
import { IErrorObject } from '@impler/shared';
12+
import DarkLogo from '@assets/images/logo-dark.png';
1213

13-
import useStyles from './OnboardLayout.styles';
1414
import { useAppState } from 'store/app.context';
15-
import WidgetSlideImage from '@assets/images/auth-carousel/widget.png';
16-
import PowerfullSlideImage from '@assets/images/auth-carousel/powerfull.png';
17-
import UncertainitySlideImage from '@assets/images/auth-carousel/uncertainity.png';
1815

1916
const Support = dynamic(() => import('components/common/Support').then((mod) => mod.Support), {
2017
ssr: false,
2118
});
2219

23-
const slides: {
24-
image: any;
25-
title: string;
26-
subtitle: string;
27-
}[] = [
28-
{
29-
image: WidgetSlideImage,
30-
title: 'Guided Import Widget',
31-
subtitle: 'Within few minutes add scalable and production ready import widget to your application.',
32-
},
33-
{
34-
image: UncertainitySlideImage,
35-
title: 'Remove Uncertainity from Data',
36-
subtitle: 'Missing values, invalid format, empty rows and unknown column names gets handled automatically.',
37-
},
38-
{
39-
image: PowerfullSlideImage,
40-
title: 'Stay Powerful',
41-
subtitle: `Don't let old and buggy data import cross your way to scale and making your users happy.`,
42-
},
43-
];
20+
type OnboardLayoutProps = PropsWithChildren;
4421

45-
export function OnboardLayout({ children }: PropsWithChildren) {
46-
const { classes } = useStyles();
22+
export function OnboardLayout({ children }: OnboardLayoutProps) {
4723
const { setProfileInfo } = useAppState();
4824
useQuery<unknown, IErrorObject, IProfileData, [string]>(
4925
[API_KEYS.ME],
@@ -70,28 +46,36 @@ export function OnboardLayout({ children }: PropsWithChildren) {
7046
<meta name="og:description" content={TEXTS.SEO_DESCRIPTION} />
7147
</Head>
7248
<main>
73-
<Grid className={classes.grid} gutter={0}>
74-
<Grid.Col md={6} className={classes.contentCol}>
75-
<div className={classes.contentContainer}>{children}</div>
76-
</Grid.Col>
77-
<Grid.Col md={6} className={classes.carouselCol}>
78-
<Carousel loop slideGap="md" withIndicators classNames={classes}>
79-
{slides.map((slide, index) => (
80-
<Carousel.Slide key={index} className={classes.slide} h="100%">
81-
<Image src={slide.image} height={650} alt="Feature rich actions" className={classes.image} />
82-
<Stack className="content" spacing={10} px="lg">
83-
<Title order={1} align="center" color="white" className="title">
84-
{slide.title}
85-
</Title>
86-
<Text size="lg" fw={500} align="center" color="white" className="subtitle">
87-
{slide.subtitle}
88-
</Text>
89-
</Stack>
90-
</Carousel.Slide>
91-
))}
92-
</Carousel>
93-
</Grid.Col>
94-
</Grid>
49+
<Flex direction="column" mih="100vh">
50+
{/* Header with logo and help links */}
51+
<Flex p="xs" align="center" justify="space-between">
52+
<Image src={DarkLogo} width={30} height={35} alt="Impler Logo" />
53+
54+
<Flex gap="xs" align="center">
55+
<Link href={CONSTANTS.IMPLER_DOCUMENTATION} passHref legacyBehavior>
56+
<Anchor underline={false} component="a" fw={600} c="white" fz="sm">
57+
Need Help ?
58+
</Anchor>
59+
</Link>
60+
61+
<Anchor
62+
underline={false}
63+
href={CONSTANTS.IMPLER_CAL_QUICK_MEETING}
64+
fw={600}
65+
c={colors.goldenYellow}
66+
fz="sm"
67+
>
68+
Get in Touch
69+
</Anchor>
70+
</Flex>
71+
</Flex>
72+
73+
<Flex style={{ flexGrow: 1 }} align="center" justify="center">
74+
<Paper withBorder radius="md" p="lg" w={600} maw="90%">
75+
{children}
76+
</Paper>
77+
</Flex>
78+
</Flex>
9579
</main>
9680
<Support />
9781
</>

0 commit comments

Comments
 (0)