Skip to content

Commit d1bf247

Browse files
danialraza03danialraza03
authored
Merge pull request #35 from zenml-io/ahsan/feat/auth-screens
Ahsan/feat/auth screens
2 parents 056ced2 + a7c6f3a commit d1bf247

File tree

21 files changed

+144
-202
lines changed

21 files changed

+144
-202
lines changed

‎src/api/session/signUpApi.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ interface NewAccount {
1212
userId: string;
1313
username: string;
1414
fullName: any;
15-
email: string;
1615
password: string;
1716
token: string;
1817
}
@@ -31,7 +30,6 @@ const signUpApi = ({ account }: Params): Promise<void> =>
3130
data: JSON.stringify({
3231
name: account.username,
3332
full_name: account.fullName,
34-
email: account.email,
3533
password: account.password,
3634
activation_token: account.token
3735
}),

‎src/redux/actions/session/signupAction.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import signUpApi from '../../../api/session/signUpApi';
44
export const signUpAction = ({
55
userId,
66
username,
7-
email,
87
fullName,
98
password,
109
token,
@@ -13,7 +12,6 @@ export const signUpAction = ({
1312
}: {
1413
userId: string;
1514
username: string;
16-
email: string;
1715
fullName: string;
1816
password: string;
1917
token: any;
@@ -32,7 +30,6 @@ export const signUpAction = ({
3230
account: {
3331
userId,
3432
username,
35-
email,
3633
fullName,
3734
password,
3835
token,

‎src/services/locales/zu.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@
291291
"text": "Stack Components"
292292
},
293293
"setting": {
294-
"text": "Setting"
294+
"text": "Settings"
295295
}
296296
}
297297
},

‎src/ui/components/Filters/filter.module.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
height: 4rem;
55
background-color: $whiteColor;
66
border: 1px solid var(--lightGrey);
7-
border-radius: 4px;
87
box-sizing: border-box;
98
display: flex;
109
// width: 93%;
@@ -13,6 +12,25 @@
1312
padding-left: 1.6rem;
1413
padding-right: 1.6rem;
1514
outline: 0;
16-
margin-top: 26px;
15+
margin-top: 23px;
1716
line-height: 37px;
1817
}
18+
19+
.tile {
20+
height: 28px;
21+
background-color: #EDE4FF;
22+
margin-top: -5px !important;
23+
margin-left: 7px !important;
24+
border-radius: 4px;
25+
padding: 5px 11px !important
26+
}
27+
28+
.removeIcon {
29+
margin-top: 23px !important;
30+
padding-top: 4px !important;
31+
width: 34px;
32+
height: 40px;
33+
border: 1px solid #C9CBD0;
34+
border-top-right-radius: 4px;
35+
border-bottom-right-radius: 4px
36+
}

‎src/ui/components/Filters/index.tsx‎

Lines changed: 66 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import {
66
FormDropdownField,
77
FormTextField,
88
icons,
9+
Paragraph
910
} from '../../components';
1011
import { iconColors, iconSizes } from '../../../constants';
12+
import { formatDateToDisplay } from '../../../utils';
1113
import DatePicker from 'react-datepicker';
1214

1315
import 'bootstrap/dist/css/bootstrap.min.css';
@@ -363,12 +365,15 @@ const FilterComponent = ({
363365
switch (filter?.contains.selectedValue.type) {
364366
case 'string':
365367
return (
366-
<FormTextField
367-
label={''}
368-
placeholder={''}
369-
value={filter.filterValue}
370-
onChange={(value: string) => handleValueFieldChange(filter, value)}
371-
/>
368+
<Box style={{ width: '146px' }}>
369+
<FormTextField
370+
label={''}
371+
placeholder={''}
372+
value={filter.filterValue}
373+
onChange={(value: string) => handleValueFieldChange(filter, value)}
374+
style={{ borderRadius: 0, width: '146px', fontSize: '12px', color: '#424240' }}
375+
/>
376+
</Box>
372377
);
373378
case 'date':
374379
const ExampleCustomInput = forwardRef(
@@ -387,20 +392,25 @@ const FilterComponent = ({
387392
);
388393
// date-picker
389394
return (
390-
<DatePicker
391-
selected={filter.filterValue}
392-
onChange={(value: any) => handleValueFieldChange(filter, value)}
393-
customInput={<ExampleCustomInput />}
394-
/>
395+
<Box style={{ width: '146px' }}>
396+
<DatePicker
397+
selected={filter.filterValue}
398+
onChange={(value: any) => handleValueFieldChange(filter, value)}
399+
customInput={<ExampleCustomInput />}
400+
/>
401+
</Box>
395402
);
396403
default:
397404
return (
398-
<FormTextField
399-
label={''}
400-
placeholder={''}
401-
disabled
402-
value={filter.filterValue}
403-
/>
405+
<Box style={{ width: '146px' }}>
406+
<FormTextField
407+
label={''}
408+
placeholder={''}
409+
disabled
410+
value={filter.filterValue}
411+
style={{ borderRadius: 0, width: '146px', fontSize: '12px', color: '#424240' }}
412+
/>
413+
</Box>
404414
);
405415
}
406416
};
@@ -432,31 +442,32 @@ const FilterComponent = ({
432442
/>
433443
</Box>
434444
{console.log(filters)}
435-
<Box style={{ padding: '5px 0px 0px 7px' }} className="text-muted h5">
445+
<Box style={{ padding: '5px 0px 0px 7px', display: 'flex' }} className="text-muted h5">
436446
{/* Filter your stack */}
437447
{!applyFilter && !filters[0]?.column?.selectedValue?.label
438448
? 'Filter your stack'
439449
: filters[0]?.column?.selectedValue.label && !applyFilter
440450
? filters.map((filter: any, index: number) => {
441451
return (
442-
<FlexBox.Row>
443-
<Box
444-
onClick={() => hanldeDelete(index)}
445-
style={{
446-
width: '33px',
447-
height: '33px',
448-
// background: '#8045FF',
449-
borderRadius: '4px',
450-
}}
451-
>
452-
{`${filter.column.selectedValue.label} ${filter.filterValue}`}
452+
<FlexBox.Row key={index} className={styles.tile}>
453+
<Box onClick={() => hanldeDelete(index)}>
454+
{`${filter.column.selectedValue.label} ${typeof filter.filterValue === 'string' ? filter.filterValue : formatDateToDisplay(filter.filterValue)}`}
453455
</Box>
456+
457+
<Box onClick={() => setFilter([])} >
458+
<icons.closeWithBorder
459+
style={{ paddingLeft: '7px' }}
460+
size={iconSizes.sm}
461+
color={iconColors.grey}
462+
/>
463+
</Box>
464+
454465
</FlexBox.Row>
455466
);
456467
})
457468
: 'Filter your stack'}
458-
{!applyFilter && !filters[0]?.column?.selectedValue?.label ? (
459-
'Filter your stack'
469+
{/* {!applyFilter && !filters[0]?.column?.selectedValue?.label ? (
470+
null
460471
) : filters[0]?.column?.selectedValue.label && !applyFilter ? (
461472
<Box
462473
onClick={() => setFilter([])}
@@ -468,27 +479,28 @@ const FilterComponent = ({
468479
borderRadius: '4px',
469480
}}
470481
>
471-
<icons.delete
482+
<icons.close
472483
style={{ padding: '7px 0px 0px 7px' }}
473-
size={iconSizes.md}
484+
size={iconSizes.sm}
474485
color={iconColors.grey}
475486
/>
476487
</Box>
477488
) : (
478-
'Filter your stack'
479-
)}
489+
null
490+
)} */}
480491
</Box>
481492
</FlexBox>
482493
{applyFilter && (
483-
<Box className="mb-4">
494+
<Box className="mb-4 mt-19">
484495
<Container>
485-
<p className="h3 text-muted">Custom Filtering</p>
496+
<Paragraph className="h3 text-muted" color='black' style={{ fontSize: '16px' }}>Custom Filtering</Paragraph>
486497
{filters.map((filter: any, index: number) => {
487498
return (
488-
<FlexBox.Row key={index} className="align-items-center mb-1">
489-
<Box className="mr-4 mt-5 h4 text-muted">
499+
<FlexBox.Row key={index} className="mb-1">
500+
<Box className="mr-4 mt-5 h4 text-muted" style={{ fontSize: '12px', width: '46px', color: '#424240' }}>
490501
{index === 0 ? 'Where' : 'And'}
491502
</Box>
503+
<Box style={{ width: '146px' }}>
492504
<FormDropdownField
493505
label={''}
494506
onChange={(value: string) =>
@@ -497,7 +509,13 @@ const FilterComponent = ({
497509
placeholder={'Column Name'}
498510
value={filter.column.selectedValue.value}
499511
options={filter.column.options}
512+
style={{ borderTopRightRadius: 0,
513+
borderBottomRightRadius: 0, width: '146px',
514+
fontSize: '12px', color: '#424240'
515+
}}
500516
/>
517+
</Box>
518+
<Box style={{ width: '146px' }}>
501519
<FormDropdownField
502520
label={''}
503521
disabled={!filter.column.selectedValue.type}
@@ -510,22 +528,17 @@ const FilterComponent = ({
510528
filter.contains.options,
511529
filter.column.selectedValue.type,
512530
)}
513-
/>
531+
style={{ borderRadius: 0, width: '146px',
532+
fontSize: '12px', color: '#424240'
533+
}}
534+
/>
535+
</Box>
514536
{valueField(filter)}
515537

516-
<Box
517-
onClick={() => hanldeDelete(index)}
518-
style={{
519-
marginTop: '23px',
520-
width: '130px',
521-
height: '40px',
522-
border: '1px solid #c9cbd0',
523-
borderRadius: '4px',
524-
}}
525-
>
538+
<Box onClick={() => hanldeDelete(index)} className={styles.removeIcon}>
526539
<icons.delete
527540
style={{ padding: '7px 0px 0px 7px' }}
528-
size={iconSizes.md}
541+
size={iconSizes.sm}
529542
color={iconColors.grey}
530543
/>
531544
</Box>
@@ -534,10 +547,10 @@ const FilterComponent = ({
534547
})}
535548
<FlexBox.Row className="mt-5" onClick={addAnotherFilter}>
536549
<icons.simplePlus
537-
size={iconSizes.lg}
550+
size={iconSizes.md}
538551
color={iconColors.darkGrey}
539552
/>
540-
<span className="h3 text-muted ml-1 mt-2">Add Condition</span>
553+
<Paragraph className="h3 text-muted ml-1 mt-2" style={{ fontSize: '14px', fontWeight: 'bold', color: '#747474', cursor: 'pointer' }}>Add Condition</Paragraph>
541554
</FlexBox.Row>
542555
</Container>
543556
</Box>

‎src/ui/components/forms/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const FormTextField = (props: {
4545
disabled?: boolean;
4646
type?: string;
4747
name?: string;
48+
style?: any;
4849
}): JSX.Element => (
4950
<FlexBox.Column fullWidth>
5051
<FlexBox alignItems="center" fullWidth>
@@ -55,6 +56,7 @@ export const FormTextField = (props: {
5556
InputComponent={
5657
<TextInput
5758
{...props}
59+
style={props.style}
5860
placeholder={props.placeholder}
5961
hasError={props.error?.hasError}
6062
value={props.value}
@@ -80,6 +82,7 @@ export const FormDropdownField = (props: {
8082
error?: FieldError;
8183
disabled?: boolean;
8284
name?: string;
85+
style?: any;
8386
}): JSX.Element => (
8487
<FlexBox.Column fullWidth>
8588
<FlexBox alignItems="center" fullWidth>
@@ -90,6 +93,7 @@ export const FormDropdownField = (props: {
9093
InputComponent={
9194
<DropdownInput
9295
{...props}
96+
style={props.style}
9397
placeholder={props.placeholder}
9498
hasError={props.error?.hasError}
9599
value={props.value}

‎src/ui/components/inputs/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const BaseInput = ({
3636
type,
3737
hasError,
3838
className,
39+
style,
3940
...props
4041
}: {
4142
onChange: any;
@@ -44,6 +45,7 @@ export const BaseInput = ({
4445
type: string;
4546
hasError?: boolean;
4647
className?: string;
48+
style?: any;
4749
}): JSX.Element => (
4850
<input
4951
{...props}
@@ -52,6 +54,7 @@ export const BaseInput = ({
5254
placeholder={placeholder}
5355
className={cn(styles.input, hasError ? styles.error : null, className)}
5456
type={type}
57+
style={style}
5558
/>
5659
);
5760

@@ -114,6 +117,7 @@ export const TextInput = ({
114117
value,
115118
placeholder,
116119
hasError,
120+
style,
117121
type = 'text',
118122
...props
119123
}: {
@@ -122,6 +126,7 @@ export const TextInput = ({
122126
placeholder?: string;
123127
hasError?: boolean;
124128
type?: string;
129+
style?: any;
125130
}): JSX.Element => (
126131
<BaseInput
127132
{...props}
@@ -132,6 +137,7 @@ export const TextInput = ({
132137
value={value}
133138
placeholder={placeholder}
134139
type={type}
140+
style={style}
135141
/>
136142
);
137143

@@ -141,20 +147,23 @@ export const DropdownInput = ({
141147
placeholder,
142148
hasError,
143149
options,
150+
style,
144151
...props
145152
}: {
146153
onChange: any;
147154
value: string;
148155
placeholder?: string;
149156
hasError?: boolean;
150157
options: Record<string, string>[];
158+
style: any;
151159
}): JSX.Element => (
152160
<select
153161
{...props}
154162
onChange={(e: any) => onChange(e.target.value)}
155163
value={value}
156164
placeholder={placeholder}
157165
className={cn(styles.input, hasError ? styles.error : null)}
166+
style={style}
158167
>
159168
<option selected disabled value="">
160169
{placeholder}

0 commit comments

Comments
 (0)