Profiles app -> dev

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss

@@ -2,6 +2,28 @@
 
 .educationCard {
     flex: 1;
+    margin-bottom: $sp-8;
+    font-size: 14px;
+    line-height: 22px;
+    color: $black-60;
+
+    :global(.body-main-bold) {
+        color: $black-100;
+    }
+
+    &.educationCardModalView {
+        margin-bottom: 0;
+
+        .educationCardHeader {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+
+            :global(.body-main-bold) {
+                margin-bottom: $sp-2;
+            }
+        }
+    }
 
     .educationCardHeader {
         display: flex;

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 import moment from 'moment'
 
 import { UserTrait } from '~/libs/core'
@@ -7,10 +8,11 @@ import styles from './EducationCard.module.scss'
 
 interface EducationCardProps {
     education: UserTrait
+    isModalView?: boolean
 }
 
 const EducationCard: FC<EducationCardProps> = (props: EducationCardProps) => (
-    <div className={styles.educationCard}>
+    <div className={classNames(styles.educationCard, props.isModalView ? styles.educationCardModalView : '')}>
         <div className={styles.educationCardHeader}>
             <div className={styles.educationCardHeaderLeft}>
                 <p className='body-main-bold'>

src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.module.scss

@@ -3,17 +3,25 @@
 .container {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
 
     .educationWrap {
-        margin-bottom: $sp-8;
+        margin: $sp-8 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: $sp-4;
+        width: 100%;
 
         &.noItems {
             margin-bottom: 0;
         }
 
         .educationCardWrap {
             display: flex;
-            align-items: center;
+            align-items: flex-start;
+            border: 1px solid $black-20;
+            border-radius: 8px;
+            padding: $sp-4;
 
             .actionElements {
                 display: flex;
@@ -60,27 +68,13 @@
 
     .formWrap {
         margin-top: $sp-4;
+        width: 100%;
 
         @include ltelg {
             :global(.input-wrapper) {
                 margin-bottom: $sp-2;
             }
         }
-
-        .formCTAs {
-            display: flex;
-            align-items: center;
-
-            svg {
-                width: 14px;
-                height: 14px;
-                margin-right: $sp-1;
-            }
-
-            .ctaBtnCancel {
-                margin-left: $sp-8;
-            }
-        }
     }
 }
 

src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.tsx

@@ -33,8 +33,8 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
     const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
+    const [addingNewItem, setAddingNewItem]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(props.education?.length === 0 || false)
 
     const [formValues, setFormValues]: [
         { [key: string]: string | boolean | Date | undefined },
@@ -62,6 +62,12 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
         = useState<UserTrait[] | undefined>(props.education)
 
     function handleModifyEducationSave(): void {
+        if (addingNewItem || editedItemIndex !== undefined) {
+            handleFormAction()
+
+            return
+        }
+
         setIsSaving(true)
 
         methodsMap[!!props.education ? 'update' : 'create'](props.profile.handle, [{
@@ -99,15 +105,12 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
         })
     }
 
-    function handleCancelEditMode(): void {
-        setEditedItemIndex(undefined)
-        resetForm()
-    }
-
     function resetForm(): void {
         setFormValues({})
+        setFormErrors({})
         formElRef.current.reset()
         setEditedItemIndex(undefined)
+        setAddingNewItem(false)
     }
 
     function handleFormAction(): void {
@@ -146,7 +149,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             )
         }
 
-        setIsFormChanged(true)
         resetForm()
     }
 
@@ -168,117 +170,125 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
 
         updatedEducation.splice(indx, 1)
         setMemberEducation(updatedEducation)
-        setIsFormChanged(true)
+    }
+
+    function handleAddNewItem(): void {
+        setAddingNewItem(true)
+    }
+
+    function handleModifyEducationCancel(): void {
+        if (addingNewItem || editedItemIndex !== undefined) {
+            setAddingNewItem(false)
+            setEditedItemIndex(undefined)
+            resetForm()
+        } else {
+            props.onClose()
+        }
     }
 
     return (
         <BaseModal
             onClose={props.onClose}
             open
             size='lg'
-            title='LEARNING & EDUCATION'
+            title='EDUCATION'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
                         label='Cancel'
-                        onClick={props.onClose}
+                        onClick={handleModifyEducationCancel}
                         secondary
                     />
                     <Button
                         label='Save'
                         onClick={handleModifyEducationSave}
                         primary
-                        disabled={isSaving || !isFormChanged}
+                        disabled={isSaving}
                     />
                 </div>
             )}
         >
             <div className={styles.container}>
-                <div className={classNames(styles.educationWrap, !memberEducation?.length ? styles.noItems : '')}>
-                    {
-                        memberEducation?.map((education: UserTrait, indx: number) => (
-                            <div
-                                className={styles.educationCardWrap}
-                                key={`${education.schoolCollegeName}-${education.major}`}
-                            >
-                                <EducationCard education={education} />
-                                <div className={styles.actionElements}>
-                                    <Button
-                                        className={styles.ctaBtn}
-                                        icon={IconOutline.PencilIcon}
-                                        onClick={bind(handleEducationEdit, this, indx)}
-                                        size='lg'
-                                    />
-                                    <Button
-                                        className={styles.ctaBtn}
-                                        icon={IconOutline.TrashIcon}
-                                        onClick={bind(handleEducationDelete, this, indx)}
-                                        size='lg'
-                                    />
-                                </div>
-                            </div>
-                        ))
-                    }
-                </div>
 
                 <p>
-                    Enter information about your schooling and degrees.
+                    Add degrees or other education details.
                 </p>
 
-                <form
-                    ref={formElRef}
-                    className={styles.formWrap}
-                >
-                    <InputText
-                        name='school'
-                        label='Name of College or University *'
-                        error={formErrors.schoolCollegeName}
-                        placeholder='Enter name of college or university'
-                        dirty
-                        tabIndex={0}
-                        type='text'
-                        onChange={bind(handleFormValueChange, this, 'schoolCollegeName')}
-                        value={formValues.schoolCollegeName as string}
-                    />
-                    <InputText
-                        name='major'
-                        label='Degree *'
-                        error={formErrors.major}
-                        placeholder='Enter Degree'
-                        dirty
-                        tabIndex={-1}
-                        type='text'
-                        onChange={bind(handleFormValueChange, this, 'major')}
-                        value={formValues.major as string}
-                    />
-                    <InputDatePicker
-                        label='End date (or expected)'
-                        date={formValues.endDate as Date}
-                        onChange={bind(handleFormValueChange, this, 'endDate')}
-                        disabled={false}
-                        error={formErrors.endDate}
-                        dirty
-                        showMonthPicker={false}
-                        showYearPicker
-                        dateFormat='yyyy'
-                    />
-                    <div className={styles.formCTAs}>
-                        {editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}
-                        <Button
-                            link
-                            label={`${editedItemIndex !== undefined ? 'Edit' : 'Add'} School / Degree`}
-                            onClick={handleFormAction}
-                        />
-                        {editedItemIndex !== undefined && (
-                            <Button
-                                className={styles.ctaBtnCancel}
-                                link
-                                label='Cancel'
-                                onClick={handleCancelEditMode}
-                            />
-                        )}
+                {editedItemIndex === undefined && !addingNewItem ? (
+                    <div className={classNames(styles.educationWrap, !memberEducation?.length ? styles.noItems : '')}>
+                        {
+                            memberEducation?.map((education: UserTrait, indx: number) => (
+                                <div
+                                    className={styles.educationCardWrap}
+                                    key={`${education.schoolCollegeName}-${education.major}`}
+                                >
+                                    <EducationCard education={education} isModalView />
+                                    <div className={styles.actionElements}>
+                                        <Button
+                                            className={styles.ctaBtn}
+                                            icon={IconOutline.PencilIcon}
+                                            onClick={bind(handleEducationEdit, this, indx)}
+                                            size='lg'
+                                        />
+                                        <Button
+                                            className={styles.ctaBtn}
+                                            icon={IconOutline.TrashIcon}
+                                            onClick={bind(handleEducationDelete, this, indx)}
+                                            size='lg'
+                                        />
+                                    </div>
+                                </div>
+                            ))
+                        }
                     </div>
-                </form>
+                ) : undefined}
+
+                {editedItemIndex !== undefined || addingNewItem ? (
+                    <form
+                        ref={formElRef}
+                        className={styles.formWrap}
+                    >
+                        <InputText
+                            name='school'
+                            label='Name of College or University *'
+                            error={formErrors.schoolCollegeName}
+                            placeholder='Enter name of college or university'
+                            dirty
+                            tabIndex={0}
+                            type='text'
+                            onChange={bind(handleFormValueChange, this, 'schoolCollegeName')}
+                            value={formValues.schoolCollegeName as string}
+                        />
+                        <InputText
+                            name='major'
+                            label='Degree *'
+                            error={formErrors.major}
+                            placeholder='Enter Degree'
+                            dirty
+                            tabIndex={-1}
+                            type='text'
+                            onChange={bind(handleFormValueChange, this, 'major')}
+                            value={formValues.major as string}
+                        />
+                        <InputDatePicker
+                            label='End date (or expected)'
+                            date={formValues.endDate as Date}
+                            onChange={bind(handleFormValueChange, this, 'endDate')}
+                            disabled={false}
+                            error={formErrors.endDate}
+                            dirty
+                            showMonthPicker={false}
+                            showYearPicker
+                            dateFormat='yyyy'
+                        />
+                    </form>
+                ) : (
+                    <Button
+                        label='+ Add Education'
+                        secondary
+                        onClick={handleAddNewItem}
+                    />
+                )}
             </div>
         </BaseModal>
     )

src/config/environments/default.env.ts

@@ -47,9 +47,9 @@ export const STRIPE = {
 }
 
 export const URLS = {
-    ACCOUNT_SETTINGS: `${TOPCODER_URL}/settings/account`,
+    ACCOUNT_SETTINGS: `https://account-settings.${TC_DOMAIN}/#account`,
     UNIVERSAL_NAV: `https://uni-nav.${TC_DOMAIN}/v1/tc-universal-nav.js`,
-    USER_PROFILE: `${TOPCODER_URL}/members`,
+    USER_PROFILE: `https://profile.${TC_DOMAIN}`,
 }
 
 export const MEMBER_VERIFY_LOOKER = getReactEnv<number>('MEMBER_VERIFY_LOOKER', 3322)

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss

@@ -48,6 +48,8 @@
             border: none;
             background-color: transparent;
             margin: auto;
+            -webkit-appearance: menulist;
+            appearance: menulist;
 
             option:hover {
                 background-color: $turq-160;