Skip to content

Commit 005521b

Browse files
kkartunovkkartunov
authored
Merge pull request #802 from topcoder-platform/profiles-app
Profiles app -> dev
2 parents 589a257 + 64f4a19 commit 005521b

File tree

11 files changed

+267
-87
lines changed

11 files changed

+267
-87
lines changed

‎src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@
3232
}
3333

3434
.profileHeaderBottom {
35-
height: 90px;
35+
height: 30px;
3636
background-color: $tc-white;
37-
38-
@include ltelg {
39-
height: 30px;
40-
}
4137
}
4238
}
4339

4440
.profileOuter {
45-
margin-top: 130px;
41+
margin-top: 185px;
42+
43+
@include ltelg {
44+
margin-top: 155px;
45+
}
4646

4747
.profileInner {
4848
width: 100%;

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,30 @@
66
width: 100%;
77
}
88

9-
.nameToggle {
10-
display: flex;
11-
align-items: center;
12-
justify-content: space-between;
13-
}
9+
.modalContent {
10+
:global(.input-el) {
11+
@include ltelg {
12+
margin-bottom: $sp-4;
13+
}
14+
}
15+
16+
.radioButtons {
17+
display: flex;
18+
align-items: center;
19+
justify-content: flex-start;
20+
margin-top: $sp-4;
21+
22+
@include ltelg {
23+
flex-direction: column;
24+
align-items: flex-start;
25+
}
26+
27+
>div:not(:last-child) {
28+
margin-right: $sp-8;
29+
30+
@include ltelg {
31+
margin-bottom: $sp-2;
32+
}
33+
}
34+
}
35+
}

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx‎

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch, FC, SetStateAction, useState } from 'react'
1+
import { Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
22
import { reject, trim } from 'lodash'
33
import { toast } from 'react-toastify'
44

@@ -11,7 +11,9 @@ import {
1111
UserTraitCategoryNames,
1212
UserTraitIds,
1313
} from '~/libs/core'
14-
import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui'
14+
import { BaseModal, Button, InputRadio, InputText } from '~/libs/ui'
15+
16+
import { NamesAndHandleAppearance } from '../ProfileHeader'
1517

1618
import styles from './ModifyMemberNameModal.module.scss'
1719

@@ -20,7 +22,7 @@ interface ModifyMemberNameModalProps {
2022
onClose: () => void
2123
onSave: () => void
2224
memberPersonalizationTraitsData: UserTrait[] | undefined
23-
hideMyNameInProfile: boolean
25+
namesAndHandleAppearance: NamesAndHandleAppearance | undefined
2426
}
2527

2628
const methodsMap: { [key: string]: any } = {
@@ -47,8 +49,10 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
4749
const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
4850
= useState<string>(props.profile.lastName)
4951

50-
const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch<SetStateAction<boolean>>]
51-
= useState<boolean>(props.hideMyNameInProfile)
52+
const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [
53+
NamesAndHandleAppearance | undefined, Dispatch<SetStateAction<NamesAndHandleAppearance | undefined>>
54+
]
55+
= useState<NamesAndHandleAppearance | undefined>(props.namesAndHandleAppearance)
5256

5357
function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
5458
setCurrentFirstName(e.target.value)
@@ -60,8 +64,8 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
6064
setIsFormChanged(true)
6165
}
6266

63-
function handleShowMyNameInProfileToggle(): void {
64-
setHideMyNameInProfile(!hideMyNameInProfile)
67+
function handleShowMyNameInProfileToggle(event: FocusEvent<HTMLInputElement>): void {
68+
setNamesAndHandleAppearance(event.target.value as NamesAndHandleAppearance)
6569
setIsFormChanged(true)
6670
}
6771

@@ -99,9 +103,9 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
99103
data: [
100104
...reject(
101105
props.memberPersonalizationTraitsData,
102-
(trait: any) => trait.hideNamesOnProfile,
106+
(trait: any) => trait.namesAndHandleAppearance,
103107
),
104-
{ hideNamesOnProfile: hideMyNameInProfile },
108+
{ namesAndHandleAppearance },
105109
],
106110
},
107111
}]),
@@ -121,6 +125,7 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
121125
onClose={props.onClose}
122126
open
123127
title='My Name'
128+
size='lg'
124129
buttons={(
125130
<div className={styles.modalButtons}>
126131
<Button
@@ -160,12 +165,31 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
160165
onChange={handleLastNameChange}
161166
value={currentLastName}
162167
/>
163-
<div className={styles.nameToggle}>
164-
<p>Hide my names on profile</p>
165-
<FormToggleSwitch
166-
name='hideMyNameInProfile'
168+
<p className='body-main-bold'>Choose a combination to show:</p>
169+
<div className={styles.radioButtons}>
170+
<InputRadio
171+
name='showMyNameInProfile'
172+
label='First and Last Name Only'
173+
value='namesOnly'
174+
checked={namesAndHandleAppearance === 'namesOnly'}
175+
onChange={handleShowMyNameInProfileToggle}
176+
id='namesOnly'
177+
/>
178+
<InputRadio
179+
name='showMyNameInProfile'
180+
label='Handle Only'
181+
value='handleOnly'
182+
checked={namesAndHandleAppearance === 'handleOnly'}
183+
onChange={handleShowMyNameInProfileToggle}
184+
id='handleOnly'
185+
/>
186+
<InputRadio
187+
name='showMyNameInProfile'
188+
label='Both'
189+
value='namesAndHandle'
190+
checked={namesAndHandleAppearance === 'namesAndHandle'}
167191
onChange={handleShowMyNameInProfileToggle}
168-
value={hideMyNameInProfile}
192+
id='namesAndHandle'
169193
/>
170194
</div>
171195
</div>

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberPhotoModal/ModifyMemberPhotoModal.module.scss‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@
77
}
88

99
.modalBody {
10-
display: flex;
11-
flex-direction: column;
10+
display: grid;
11+
grid-template-columns: 255px 1fr;
12+
gap: 30px;
13+
14+
@include ltelg {
15+
grid-template-columns: 1fr;
16+
}
1217

1318
:global(.body-main-bold) {
1419
margin-top: $sp-2;
@@ -19,26 +24,39 @@
1924
margin-left: $sp-4;
2025
}
2126

22-
form {
23-
input {
24-
display: none;
25-
}
26-
27-
button {
28-
margin: $sp-4 0;
29-
}
30-
31-
p {
32-
color: $red-100;
27+
.imageArea {
28+
border: 1px dashed $turq-160;
29+
border-radius: 4px;
30+
background-color: rgba(224, 250, 243, 0.3);
31+
width: 255px;
32+
height: 255px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
cursor: pointer;
37+
38+
form {
39+
input {
40+
display: none;
41+
}
42+
43+
.error {
44+
color: $red-120;
45+
text-align: center;
46+
margin: 0 $sp-4;
47+
}
48+
49+
:global(.body-small-bold) {
50+
color: $turq-160;
51+
text-transform: uppercase;
52+
}
3353
}
34-
}
3554

36-
.preview {
37-
img {
38-
max-width: 200px;
39-
max-height: 200px;
40-
border: 3px solid #fff;
41-
border-radius: 50%;
55+
.preview {
56+
img {
57+
max-width: 255px;
58+
max-height: 255px;
59+
}
4260
}
4361
}
4462
}

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberPhotoModal/ModifyMemberPhotoModal.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
7373
<BaseModal
7474
onClose={props.onClose}
7575
open
76-
title='Your Photo'
76+
title='Change Photo'
77+
size='lg'
7778
buttons={(
7879
<div className={styles.modalButtons}>
7980
<Button
@@ -82,7 +83,7 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
8283
secondary
8384
/>
8485
<Button
85-
label='Save'
86+
label='Save profile picture'
8687
onClick={handleModifyPhotoSave}
8788
primary
8889
disabled={isSaving || !file}
@@ -91,38 +92,41 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
9192
)}
9293
>
9394
<div className={styles.modalBody}>
94-
<p>Show the community who you are. Don&apos;t worry, you look great.</p>
95-
<p className='body-main-bold'>Requirements:</p>
96-
<ul>
97-
<li>PNG or JPG format.</li>
98-
<li>Maximum size: 2MB.</li>
99-
</ul>
100-
<form>
101-
<input
102-
ref={fileElRef}
103-
accept='image/png,image/jpeg'
104-
type='file'
105-
onChange={handleFilePickChange}
106-
/>
107-
<Button
108-
label='Upload New Photo'
109-
primary
110-
onClick={handleFilePickClick}
111-
/>
95+
<div className={styles.imageArea} onClick={handleFilePickClick}>
96+
<form>
97+
<input
98+
ref={fileElRef}
99+
accept='image/png,image/jpeg'
100+
type='file'
101+
onChange={handleFilePickChange}
102+
/>
103+
{
104+
fileSelectError && (
105+
<p className={styles.error}>{fileSelectError}</p>
106+
)
107+
}
108+
{
109+
!file && !fileSelectError && (
110+
<p className='body-small-bold'>Browse</p>
111+
)
112+
}
113+
</form>
112114
{
113-
fileSelectError && (
114-
<p>{fileSelectError}</p>
115+
file && (
116+
<div className={styles.preview}>
117+
<img src={URL.createObjectURL(file)} alt='preview' />
118+
</div>
115119
)
116120
}
117-
</form>
118-
{
119-
file && (
120-
<div className={styles.preview}>
121-
<p className='body-main-bold'>Preview:</p>
122-
<img src={URL.createObjectURL(file)} alt='preview' />
123-
</div>
124-
)
125-
}
121+
</div>
122+
<div>
123+
<p>Add a photo that you would like to share to the customers and community members.</p>
124+
<p className='body-main-bold'>Requirements:</p>
125+
<ul>
126+
<li>PNG or JPG format.</li>
127+
<li>Maximum size: 2MB.</li>
128+
</ul>
129+
</div>
126130
</div>
127131
</BaseModal>
128132
)

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
@include ltelg {
2020
margin: auto;
2121
position: absolute;
22-
bottom: -125px;
22+
bottom: -150px;
2323
left: calc(50% - 125px);
2424
}
2525

@@ -28,7 +28,16 @@
2828
height: 300px;
2929
border: 12px solid $tc-white;
3030
border-radius: 50%;
31-
background-color: $tc-white;
31+
background: linear-gradient(90deg, #075F96, #038664);
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
36+
> span {
37+
font-size: 100px;
38+
line-height: 100px;
39+
font-family: $font-barlow;
40+
}
3241

3342
@include ltelg {
3443
width: 250px;

0 commit comments

Comments
 (0)