Skip to content

Commit b3c83dc

Browse files
jmgasperjmgasper
authored
Merge pull request #735 from topcoder-platform/onboarding-mobile-views
Onboarding - mobile views
2 parents bbf2b88 + e66f2f1 commit b3c83dc

File tree

18 files changed

+315
-218
lines changed

18 files changed

+315
-218
lines changed

‎src/apps/onboarding/src/components/FieldAvatar/index.tsx

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,51 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
5353
setIsPhotoEditMode(true)
5454
}
5555

56+
const bottomButtons = imgUrl ? (
57+
<div className='d-flex gap-8 mobile-full-width'>
58+
<Button
59+
size='lg'
60+
secondary
61+
iconToLeft
62+
icon={IconOutline.UploadIcon}
63+
disabled={!props.memberInfo || isSaving}
64+
onClick={showEditPhoto}
65+
className='mt-16 mobile-flex-1'
66+
>
67+
change
68+
</Button>
69+
<Button
70+
size='lg'
71+
secondary
72+
iconToLeft
73+
icon={IconOutline.TrashIcon}
74+
disabled={!props.memberInfo || isSaving}
75+
onClick={handleRemovePhoto}
76+
className='mt-16 mobile-flex-1'
77+
>
78+
delete
79+
</Button>
80+
</div>
81+
) : (
82+
<Button
83+
size='lg'
84+
secondary
85+
iconToLeft
86+
icon={IconOutline.UploadIcon}
87+
disabled={!props.memberInfo}
88+
onClick={showEditPhoto}
89+
className='mt-16 mobile-flex-1'
90+
>
91+
add image
92+
</Button>
93+
)
94+
5695
return (
5796
<div
58-
className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
97+
className={classNames(styles.container, props.className, 'd-flex flex-column align-items-start')}
5998
>
6099
<h3>Photo</h3>
61-
<div className='d-flex gap-30'>
100+
<div className='d-flex gap-30 mt-16'>
62101
<div className={classNames(
63102
'd-flex',
64103
styles.blockImg,
@@ -78,46 +117,14 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
78117
Make a great first impression to potential customers with a
79118
professional photo that represents your style.
80119
</span>
81-
{imgUrl ? (
82-
<div className='d-flex gap-8'>
83-
<Button
84-
size='lg'
85-
secondary
86-
iconToLeft
87-
icon={IconOutline.UploadIcon}
88-
disabled={!props.memberInfo || isSaving}
89-
onClick={showEditPhoto}
90-
className='mt-16'
91-
>
92-
change
93-
</Button>
94-
<Button
95-
size='lg'
96-
secondary
97-
iconToLeft
98-
icon={IconOutline.TrashIcon}
99-
disabled={!props.memberInfo || isSaving}
100-
onClick={handleRemovePhoto}
101-
className='mt-16'
102-
>
103-
delete
104-
</Button>
105-
</div>
106-
) : (
107-
<Button
108-
size='lg'
109-
secondary
110-
iconToLeft
111-
icon={IconOutline.UploadIcon}
112-
disabled={!props.memberInfo}
113-
onClick={showEditPhoto}
114-
className='mt-16'
115-
>
116-
add image
117-
</Button>
118-
)}
120+
<div className='mobile-hide'>
121+
{bottomButtons}
122+
</div>
119123
</div>
120124
</div>
125+
<div className='desktop-hide full-width d-flex'>
126+
{bottomButtons}
127+
</div>
121128

122129
{
123130
isPhotoEditMode && props.memberInfo && (

‎src/apps/onboarding/src/components/modal-add-education/index.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import _ from 'lodash'
33
import classNames from 'classnames'
44
import moment from 'moment'
55

6-
import { BaseModal, Button, InputText } from '~/libs/ui'
6+
import { Button, InputText } from '~/libs/ui'
77

88
import DateInput from '../DateInput'
99
import EducationInfo, { emptyEducationInfo } from '../../models/EducationInfo'
1010
import FormField from '../FormField'
11+
import OnboardingBaseModal from '../onboarding-base-modal'
1112

1213
import styles from './styles.module.scss'
1314

@@ -59,7 +60,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
5960
}, [props.editingEducation])
6061

6162
return (
62-
<BaseModal
63+
<OnboardingBaseModal
6364
buttons={(
6465
<div className='d-flex gap-16'>
6566
<Button
@@ -97,12 +98,9 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
9798
</div>
9899
)}
99100
onClose={props.onClose || _.noop}
100-
open
101-
size='body'
102101
title={props.editingEducation ? 'Edit Education' : 'Add Education'}
103-
classNames={{ modal: styles.infoModal }}
104102
>
105-
<div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
103+
<div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
106104
<div className='full-width'>
107105
<InputText
108106
name='collegeName'
@@ -183,7 +181,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
183181
</div>
184182
</div>
185183
</div>
186-
</BaseModal>
184+
</OnboardingBaseModal>
187185
)
188186
}
189187

‎src/apps/onboarding/src/components/modal-add-education/styles.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
padding: 35px 32px 32px 32px !important;
55
max-width: 600px !important;
66

7+
@include ltemd {
8+
max-width: 375px !important;
9+
}
10+
711
:global(.react-responsive-modal-closeButton) {
812
display: flex;
913
right: 32px;

‎src/apps/onboarding/src/components/modal-add-work/index.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import _ from 'lodash'
33
import classNames from 'classnames'
44
import moment from 'moment'
55

6-
import { BaseModal, Button, InputSelect, InputText } from '~/libs/ui'
6+
import { Button, InputSelect, InputText } from '~/libs/ui'
77
import { FormInputCheckbox } from '~/apps/self-service/src/components/form-elements'
88

99
import { INDUSTRIES_OPTIONS } from '../../config'
1010
import DateInput from '../DateInput'
1111
import FormField from '../FormField'
12+
import OnboardingBaseModal from '../onboarding-base-modal'
1213
import WorkInfo, { emptyWorkInfo } from '../../models/WorkInfo'
1314

1415
import styles from './styles.module.scss'
@@ -69,7 +70,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
6970
}, [props.editingWork])
7071

7172
return (
72-
<BaseModal
73+
<OnboardingBaseModal
7374
buttons={(
7475
<div className='d-flex gap-16'>
7576
<Button
@@ -110,12 +111,9 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
110111
</div>
111112
)}
112113
onClose={props.onClose || _.noop}
113-
open
114-
size='body'
115114
title={props.editingWork ? 'Edit Experience' : 'Add Experience'}
116-
classNames={{ modal: styles.infoModal }}
117115
>
118-
<div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
116+
<div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
119117
<div className='full-width'>
120118
<InputText
121119
name='company'
@@ -227,7 +225,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
227225
</FormField>
228226
</div>
229227
</div>
230-
<div className='mt-16'>
228+
<div className='mt-16 mobile-mt-0'>
231229
<FormInputCheckboxMiddleware
232230
label='I am currently working in this role'
233231
checked={workInfo.currentlyWorking}
@@ -241,7 +239,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
241239
/>
242240
</div>
243241
</div>
244-
</BaseModal>
242+
</OnboardingBaseModal>
245243
)
246244
}
247245

‎src/apps/onboarding/src/components/modal-add-work/styles.module.scss

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1 @@
11
@import '@libs/ui/styles/includes';
2-
3-
.infoModal {
4-
padding: 35px 32px 32px 32px !important;
5-
max-width: 600px !important;
6-
7-
:global(.react-responsive-modal-closeButton) {
8-
display: flex;
9-
right: 32px;
10-
top: 46px !important;
11-
12-
path {
13-
color: $turq-160;
14-
}
15-
}
16-
17-
hr {
18-
margin-top: 30px;
19-
}
20-
21-
h3 {
22-
font-family: $font-barlow;
23-
color: $black-100;
24-
font-size: 34px;
25-
font-style: normal;
26-
font-weight: 600;
27-
line-height: 40px;
28-
text-transform: none;
29-
}
30-
31-
.modalContent {
32-
width: 100%;
33-
}
34-
}

‎src/apps/onboarding/src/components/modal-upload-photo/index.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { DropzoneState, useDropzone } from 'react-dropzone'
33
import _ from 'lodash'
44
import classNames from 'classnames'
55

6-
import { BaseModal, Button } from '~/libs/ui'
6+
import { Button } from '~/libs/ui'
77
import { updateMemberPhotoAsync } from '~/libs/core'
88

99
import MemberInfo from '../../models/MemberInfo'
10+
import OnboardingBaseModal from '../onboarding-base-modal'
1011

1112
import styles from './styles.module.scss'
1213

@@ -63,7 +64,7 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
6364
}
6465

6566
return (
66-
<BaseModal
67+
<OnboardingBaseModal
6768
buttons={(
6869
<div className='d-flex gap-16'>
6970
<Button
@@ -82,12 +83,14 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
8283
</div>
8384
)}
8485
onClose={props.onClose || _.noop}
85-
open
86-
size='body'
8786
title='Profile Photo'
88-
classNames={{ modal: styles.infoModal }}
8987
>
90-
<div className={classNames(styles.modalContent, 'd-flex align-items-start')}>
88+
<div
89+
className={classNames(
90+
styles.modalContent,
91+
'd-flex mobile-flex-column align-items-start mobile-gap-16',
92+
)}
93+
>
9194
{(!isSaving && !imgUrl) ? (
9295
<div {...getRootProps()} className={styles.blockDropZone}>
9396
<input {...getInputProps()} />
@@ -128,7 +131,7 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
128131
</ul>
129132
</div>
130133
</div>
131-
</BaseModal>
134+
</OnboardingBaseModal>
132135
)
133136
}
134137

‎src/apps/onboarding/src/components/modal-upload-photo/styles.module.scss

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,7 @@
11
@import '@libs/ui/styles/includes';
22

3-
.infoModal {
4-
padding: 35px 32px 32px 32px !important;
5-
max-width: 600px !important;
6-
7-
:global(.react-responsive-modal-closeButton) {
8-
display: flex;
9-
right: 32px;
10-
top: 46px !important;
11-
12-
path {
13-
color: $turq-160;
14-
}
15-
}
16-
17-
hr {
18-
margin-top: 30px;
19-
}
20-
21-
h3 {
22-
font-family: $font-barlow;
23-
color: $black-100;
24-
font-size: 34px;
25-
font-style: normal;
26-
font-weight: 600;
27-
line-height: 40px;
28-
text-transform: none;
29-
}
30-
31-
.modalContent {
32-
width: 100%;
33-
}
34-
}
35-
36-
.blockDropZone {
3+
.blockDropZone,
4+
.blockPhoto {
375
width: 256px;
386
height: 256px;
397
margin-right: 24px;
@@ -46,6 +14,13 @@
4614
flex-direction: column;
4715
background-color: rgba(224, 250, 243, 0.30);
4816

17+
@include ltemd {
18+
width: 100%;
19+
height: 343px;
20+
}
21+
}
22+
23+
.blockDropZone {
4924
.textDragAndDrop {
5025
font-size: 16px;
5126
font-style: normal;
@@ -79,13 +54,6 @@
7954
}
8055

8156
.blockPhoto {
82-
width: 256px;
83-
height: 256px;
84-
margin-right: 24px;
85-
flex-shrink: 0;
86-
border: 1px dashed $turq-160;
87-
background-color: rgba(224, 250, 243, 0.30);
88-
8957
img {
9058
width: 100%;
9159
height: 100%;
@@ -96,4 +64,8 @@
9664
.listRequirements {
9765
list-style: disc;
9866
padding-left: 24px;
67+
68+
@include ltemd {
69+
margin-bottom: 21px;
70+
}
9971
}

0 commit comments

Comments
 (0)