Profiles app -> dev

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

@@ -32,17 +32,17 @@
         }
 
         .profileHeaderBottom {
-            height: 90px;
+            height: 30px;
             background-color: $tc-white;
-
-            @include ltelg {
-                height: 30px;
-            }
         }
     }
 
     .profileOuter {
-        margin-top: 130px;
+        margin-top: 185px;
+
+        @include ltelg {
+            margin-top: 155px;
+        }
 
         .profileInner {
             width: 100%;

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

@@ -6,8 +6,30 @@
     width: 100%;
 }
 
-.nameToggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
+.modalContent {
+    :global(.input-el) {
+        @include ltelg {
+            margin-bottom: $sp-4;
+        }
+    }
+
+    .radioButtons {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-top: $sp-4;
+
+        @include ltelg {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        >div:not(:last-child) {
+            margin-right: $sp-8;
+
+            @include ltelg {
+                margin-bottom: $sp-2;
+            }
+        }
+    }
+}

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

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
 import { reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
 
@@ -11,7 +11,9 @@ import {
     UserTraitCategoryNames,
     UserTraitIds,
 } from '~/libs/core'
-import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui'
+import { BaseModal, Button, InputRadio, InputText } from '~/libs/ui'
+
+import { NamesAndHandleAppearance } from '../ProfileHeader'
 
 import styles from './ModifyMemberNameModal.module.scss'
 
@@ -20,7 +22,7 @@ interface ModifyMemberNameModalProps {
     onClose: () => void
     onSave: () => void
     memberPersonalizationTraitsData: UserTrait[] | undefined
-    hideMyNameInProfile: boolean
+    namesAndHandleAppearance: NamesAndHandleAppearance | undefined
 }
 
 const methodsMap: { [key: string]: any } = {
@@ -47,8 +49,10 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
     const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(props.profile.lastName)
 
-    const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(props.hideMyNameInProfile)
+    const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [
+        NamesAndHandleAppearance | undefined, Dispatch<SetStateAction<NamesAndHandleAppearance | undefined>>
+    ]
+        = useState<NamesAndHandleAppearance | undefined>(props.namesAndHandleAppearance)
 
     function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
         setCurrentFirstName(e.target.value)
@@ -60,8 +64,8 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
         setIsFormChanged(true)
     }
 
-    function handleShowMyNameInProfileToggle(): void {
-        setHideMyNameInProfile(!hideMyNameInProfile)
+    function handleShowMyNameInProfileToggle(event: FocusEvent<HTMLInputElement>): void {
+        setNamesAndHandleAppearance(event.target.value as NamesAndHandleAppearance)
         setIsFormChanged(true)
     }
 
@@ -99,9 +103,9 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
                     data: [
                         ...reject(
                             props.memberPersonalizationTraitsData,
-                            (trait: any) => trait.hideNamesOnProfile,
+                            (trait: any) => trait.namesAndHandleAppearance,
                         ),
-                        { hideNamesOnProfile: hideMyNameInProfile },
+                        { namesAndHandleAppearance },
                     ],
                 },
             }]),
@@ -121,6 +125,7 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
             onClose={props.onClose}
             open
             title='My Name'
+            size='lg'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -160,12 +165,31 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
                     onChange={handleLastNameChange}
                     value={currentLastName}
                 />
-                <div className={styles.nameToggle}>
-                    <p>Hide my names on profile</p>
-                    <FormToggleSwitch
-                        name='hideMyNameInProfile'
+                <p className='body-main-bold'>Choose a combination to show:</p>
+                <div className={styles.radioButtons}>
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='First and Last Name Only'
+                        value='namesOnly'
+                        checked={namesAndHandleAppearance === 'namesOnly'}
+                        onChange={handleShowMyNameInProfileToggle}
+                        id='namesOnly'
+                    />
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='Handle Only'
+                        value='handleOnly'
+                        checked={namesAndHandleAppearance === 'handleOnly'}
+                        onChange={handleShowMyNameInProfileToggle}
+                        id='handleOnly'
+                    />
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='Both'
+                        value='namesAndHandle'
+                        checked={namesAndHandleAppearance === 'namesAndHandle'}
                         onChange={handleShowMyNameInProfileToggle}
-                        value={hideMyNameInProfile}
+                        id='namesAndHandle'
                     />
                 </div>
             </div>

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

@@ -7,8 +7,13 @@
 }
 
 .modalBody {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: 255px 1fr;
+    gap: 30px;
+
+    @include ltelg {
+        grid-template-columns: 1fr;
+    }
 
     :global(.body-main-bold) {
         margin-top: $sp-2;
@@ -19,26 +24,39 @@
         margin-left: $sp-4;
     }
 
-    form {
-        input {
-            display: none;
-        }
-
-        button {
-            margin: $sp-4 0;
-        }
-
-        p {
-            color: $red-100;
+    .imageArea {
+        border: 1px dashed $turq-160;
+        border-radius: 4px;
+        background-color: rgba(224, 250, 243, 0.3);
+        width: 255px;
+        height: 255px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        form {
+            input {
+                display: none;
+            }
+
+            .error {
+                color: $red-120;
+                text-align: center;
+                margin: 0 $sp-4;
+            }
+
+            :global(.body-small-bold) {
+                color: $turq-160;
+                text-transform: uppercase;
+            }
         }
-    }
 
-    .preview {
-        img {
-            max-width: 200px;
-            max-height: 200px;
-            border: 3px solid #fff;
-            border-radius: 50%;
+        .preview {
+            img {
+                max-width: 255px;
+                max-height: 255px;
+            }
         }
     }
 }

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

@@ -73,7 +73,8 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
         <BaseModal
             onClose={props.onClose}
             open
-            title='Your Photo'
+            title='Change Photo'
+            size='lg'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -82,7 +83,7 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
                         secondary
                     />
                     <Button
-                        label='Save'
+                        label='Save profile picture'
                         onClick={handleModifyPhotoSave}
                         primary
                         disabled={isSaving || !file}
@@ -91,38 +92,41 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
             )}
         >
             <div className={styles.modalBody}>
-                <p>Show the community who you are. Don&apos;t worry, you look great.</p>
-                <p className='body-main-bold'>Requirements:</p>
-                <ul>
-                    <li>PNG or JPG format.</li>
-                    <li>Maximum size: 2MB.</li>
-                </ul>
-                <form>
-                    <input
-                        ref={fileElRef}
-                        accept='image/png,image/jpeg'
-                        type='file'
-                        onChange={handleFilePickChange}
-                    />
-                    <Button
-                        label='Upload New Photo'
-                        primary
-                        onClick={handleFilePickClick}
-                    />
+                <div className={styles.imageArea} onClick={handleFilePickClick}>
+                    <form>
+                        <input
+                            ref={fileElRef}
+                            accept='image/png,image/jpeg'
+                            type='file'
+                            onChange={handleFilePickChange}
+                        />
+                        {
+                            fileSelectError && (
+                                <p className={styles.error}>{fileSelectError}</p>
+                            )
+                        }
+                        {
+                            !file && !fileSelectError && (
+                                <p className='body-small-bold'>Browse</p>
+                            )
+                        }
+                    </form>
                     {
-                        fileSelectError && (
-                            <p>{fileSelectError}</p>
+                        file && (
+                            <div className={styles.preview}>
+                                <img src={URL.createObjectURL(file)} alt='preview' />
+                            </div>
                         )
                     }
-                </form>
-                {
-                    file && (
-                        <div className={styles.preview}>
-                            <p className='body-main-bold'>Preview:</p>
-                            <img src={URL.createObjectURL(file)} alt='preview' />
-                        </div>
-                    )
-                }
+                </div>
+                <div>
+                    <p>Add a photo that you would like to share to the customers and community members.</p>
+                    <p className='body-main-bold'>Requirements:</p>
+                    <ul>
+                        <li>PNG or JPG format.</li>
+                        <li>Maximum size: 2MB.</li>
+                    </ul>
+                </div>
             </div>
         </BaseModal>
     )

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

@@ -19,7 +19,7 @@
         @include ltelg {
             margin: auto;
             position: absolute;
-            bottom: -125px;
+            bottom: -150px;
             left: calc(50% - 125px);
         }
 
@@ -28,7 +28,16 @@
             height: 300px;
             border: 12px solid $tc-white;
             border-radius: 50%;
-            background-color: $tc-white;
+            background: linear-gradient(90deg, #075F96, #038664);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            > span {
+                font-size: 100px;
+                line-height: 100px;
+                font-family: $font-barlow;
+            }
 
             @include ltelg {
                 width: 250px;