Merge pull request #796 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/config/constants.ts

@@ -8,6 +8,8 @@ export const TC_VERIFIED_SKILL_LABEL: string = 'Topcoder Verified'
 
 export const EDIT_MODE_QUERY_PARAM: string = 'edit-mode'
 
+export const TALENT_SEARCH_MODE_QUERY_PARAM: string = 'talent-search'
+
 export enum profileEditModes {
     aboutMe = 'aboutMe',
     languages = 'languages',

src/apps/profiles/src/member-profile/languages/LanguageCard/LanguageCard.tsx

@@ -1,4 +1,3 @@
-import { compact } from 'lodash'
 import { FC } from 'react'
 
 import { UserTrait } from '~/libs/core'
@@ -11,14 +10,7 @@ interface LanguageCardProps {
 
 const LanguageCard: FC<LanguageCardProps> = (props: LanguageCardProps) => (
     <div className={styles.language}>
-        <p className='body-main-medium'>{props.trait.language}</p>
-        <p className='body-small'>
-            {compact([
-                props.trait.spokenLevel ? `Spoken: ${props.trait.spokenLevel}` : undefined,
-                props.trait.writtenLevel ? `Written: ${props.trait.writtenLevel}` : undefined,
-            ])
-                .join(' | ')}
-        </p>
+        <p className='body-main-bold'>{props.trait.language}</p>
     </div>
 )
 

src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx

@@ -8,7 +8,6 @@ import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
 
 import { ModifyLanguagesModal } from './ModifyLanguagesModal'
-import { LanguageCard } from './LanguageCard'
 import styles from './MemberLanguages.module.scss'
 
 interface MemberLanguagesProps {
@@ -74,8 +73,11 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
             )}
             <div className={styles.languages}>
                 {
-                    memberLanguages?.map((trait: UserTrait) => (
-                        <LanguageCard trait={trait} key={`member-lan-${trait.language}`} />
+                    memberLanguages?.map((trait: UserTrait, indx: number) => (
+                        <span key={`member-lan-${trait.language}`}>
+                            {trait.language}
+                            {indx < memberLanguages.length - 1 && ', '}
+                        </span>
                     ))
                 }
             </div>

src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss

@@ -14,50 +14,49 @@
 .formWrap {
     display: flex;
     flex-direction: column;
-    min-height: 500px;
     margin-top: $sp-2;
 
     @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;
-        }
-    }
 }
 
 .languages {
-    margin-bottom: $sp-15;
-
-    &.noLanguages {
-        margin-bottom: 0;
-    }
+    margin: $sp-4 0 $sp-6;
+    padding-bottom: $sp-4;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: $sp-4;
+    border-bottom: 1px solid $black-20;
 
     .languageItemWrap {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: $sp-2;
         border-radius: 8px;
-        padding: $sp-2;
+        padding: $sp-5 $sp-6;
         border: 1px solid $black-10;
 
-        button svg {
-            width: 16px;
-            height: 16px;
+        button {
+            padding-right: 0;
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
         }
     }
+}
+
+.langModal {
+    @include gtemd {
+        overflow: visible !important;
+    }
+}
+
+.langModalBody {
+    overflow: visible !important;
 }