- {pageStatus}
-
- {exactMemberMatchItem}
-
- {topMemberLeaderboard}
-
- {memberMatchItems}
-
- {loadMoreButton}
-
- {endOfResults}
+
+
+
SEARCH RESULTS
+
+
ITEMS MATCHING “{searchTerm}”
+
+
+
+
+ {
+ pageLoaded
+ ? (
+
+ {
+ currentItems.length
+ ? currentItems.map((item, index) => (
+
+ )) : No items available
+ }
+
+ )
+ :
+ }
+
+
+
);
};
MemberSearchView.propTypes = {
pageLoaded: PropTypes.bool.isRequired,
- loadingMore: PropTypes.bool.isRequired,
- error: PropTypes.bool.isRequired,
-
usernameMatches: PropTypes.arrayOf(PropTypes.shape({
handle: PropTypes.string,
})).isRequired,
- moreMatchesAvailable: PropTypes.bool.isRequired,
- totalCount: PropTypes.number.isRequired,
topMembers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
previousSearchTerm: PropTypes.string,
searchTermTag: PropTypes.shape({}),
-
- loadMemberSearch: PropTypes.func.isRequired,
};
MemberSearchView.defaultProps = {
diff --git a/src/shared/components/MemberSearch/MemberSearchView/style.scss b/src/shared/components/MemberSearch/MemberSearchView/style.scss
index aac41eea98..11eafceff0 100644
--- a/src/shared/components/MemberSearch/MemberSearchView/style.scss
+++ b/src/shared/components/MemberSearch/MemberSearchView/style.scss
@@ -1,10 +1,84 @@
-@import '~tc-ui/src/styles/tc-includes';
+@import "~styles/mixins";
-.member-search-view {
- margin: 0 32px;
- background-color: $tc-gray-neutral-dark;
+.member-search-wrapper {
+ max-width: $screen-max;
+ width: 100%;
+ margin: 0 auto;
+ background-color: $tc-white;
+ margin-bottom: 32px;
- @media (max-width: 700px) {
- margin: 0 10px;
+ .member-search {
+ width: 100%;
+ margin-top: 32px;
+
+ @include xs-to-sm {
+ margin: 16px;
+ }
+ }
+}
+
+.title {
+ @include barlow-condensed;
+
+ font-weight: 600;
+ font-size: 36px;
+ line-height: 32px;
+ letter-spacing: -1px;
+ padding-bottom: 24px;
+ border-bottom: 2px solid #eee;
+ color: $tco-black;
+
+ @include xs-to-md {
+ font-size: 26px;
+ }
+}
+
+.search-term {
+ @include barlow;
+
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 26px;
+ color: $tco-black;
+ margin-top: 32px;
+
+ @include xs-to-sm {
+ font-size: 16px;
+ line-height: 18px;
+ margin-top: 24px;
+ }
+}
+
+.member-search-item-wrapper {
+ margin-top: 42px;
+ display: flex;
+ flex-direction: column;
+
+ @include xs-to-sm {
+ margin-top: 24px;
+ border-bottom: 2px solid #e9e9e9;
+ padding-bottom: 24px;
+ }
+}
+
+.no-items {
+ text-align: center;
+ height: 50vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ span {
+ @include roboto-regular;
+
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: #000;
+
+ @include xs-to-sm {
+ font-size: 20px;
+ line-height: 28px;
+ }
}
}
diff --git a/src/shared/components/MemberSearch/TopMemberList/index.jsx b/src/shared/components/MemberSearch/TopMemberList/index.jsx
deleted file mode 100644
index 962bc631b2..0000000000
--- a/src/shared/components/MemberSearch/TopMemberList/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import shortId from 'shortid';
-import MemberItem from '../MemberItem';
-
-const TopMemberList = ({ topMembers }) => {
- const sortedTopMembers = _.orderBy(topMembers, 'wins', 'desc');
-
- const topMemberItems = sortedTopMembers.map((member, i) => (
-
- ));
-
- return (
-
- {topMemberItems}
-
- );
-};
-
-TopMemberList.propTypes = {
- topMembers: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-export default TopMemberList;
diff --git a/src/shared/components/MemberSearch/User/UserAvatar/default-avatar.svg b/src/shared/components/MemberSearch/User/UserAvatar/default-avatar.svg
deleted file mode 100644
index 9a5883f8e0..0000000000
--- a/src/shared/components/MemberSearch/User/UserAvatar/default-avatar.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
diff --git a/src/shared/components/MemberSearch/User/UserAvatar/index.jsx b/src/shared/components/MemberSearch/User/UserAvatar/index.jsx
index 27add3e31b..f833763d42 100644
--- a/src/shared/components/MemberSearch/User/UserAvatar/index.jsx
+++ b/src/shared/components/MemberSearch/User/UserAvatar/index.jsx
@@ -1,47 +1,31 @@
import React from 'react';
import PropTypes from 'prop-types';
-import LevelDesignatorIcon from '../../icons/LevelDesignatorIcon';
-import { memberLevelByRating } from '../../helpers';
import './style.scss';
+import { Link } from 'react-router-dom';
+import { getInitials } from '../../helpers';
+
+const UserAvatar = ({ photoURL, handle }) => (
+
+ {
+ photoURL ? (
+
+ ) : (
+
{getInitials(handle)}
+ )
+ }
+
+);
-const UserAvatar = ({ showLevel, rating, photoURL }) => {
- let levelIcon;
-
- if (showLevel) {
- levelIcon = (
-
-
-
- );
- }
-
- /* eslint-disable global-require */
- let backgroundImageUrl = `url(${require('./default-avatar.svg')})`;
-
- if (photoURL) {
- backgroundImageUrl = `url(${photoURL}), ${backgroundImageUrl}`;
- }
-
- // Delete -r when taking member search back out of the angular app
- // Renamed to -r to avoid naming collisions
- return (
-
- {levelIcon}
-
- );
+UserAvatar.defaultProps = {
+ photoURL: '',
+ handle: '',
};
-
UserAvatar.propTypes = {
- showLevel: PropTypes.bool,
- rating: PropTypes.number.isRequired,
photoURL: PropTypes.string,
+ handle: PropTypes.string,
};
-UserAvatar.defaultProps = {
- showLevel: '',
- photoURL: '',
-};
export default UserAvatar;
diff --git a/src/shared/components/MemberSearch/User/UserAvatar/style.scss b/src/shared/components/MemberSearch/User/UserAvatar/style.scss
index 1556476641..52aaf979ef 100644
--- a/src/shared/components/MemberSearch/User/UserAvatar/style.scss
+++ b/src/shared/components/MemberSearch/User/UserAvatar/style.scss
@@ -1,23 +1,39 @@
@import '~tc-ui/src/styles/tc-includes';
+@import "~styles/mixins";
-// Delete -r when taking member search back out of the angular app
-// Renamed to -r to avoid naming collisions
.user-avatar-r {
- width: 60px;
- height: 60px;
- margin-right: 20px;
+ width: 80px;
+ height: 80px;
+ margin-left: 24px;
position: relative;
border-radius: 50%;
background-size: cover;
background-position: center;
+ border: 3px solid #fff;
- @media (max-width: 700px) {
- margin-right: 10px;
+ @include xs-to-sm {
+ width: 64px;
+ height: 64px;
+ margin-left: 0;
}
+}
+
+.user-avatar-default {
+ background: linear-gradient(84.45deg, #05456d 2.12%, #0a7ac0 97.43%);
+ position: relative;
+
+ span {
+ @include barlow-condensed;
- .user-rank {
- position: absolute;
- top: 0;
- right: 0;
+ color: $tc-white;
+ font-size: 32px;
+ line-height: 32px;
+ font-weight: 600;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ vertical-align: middle;
+ flex-direction: column;
}
}
diff --git a/src/shared/components/MemberSearch/User/UserBio/index.jsx b/src/shared/components/MemberSearch/User/UserBio/index.jsx
deleted file mode 100644
index 3b3b159cd2..0000000000
--- a/src/shared/components/MemberSearch/User/UserBio/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Dotdotdot from 'react-dotdotdot';
-
-import './style.scss';
-
-const UserBio = ({ bio }) => (
-
-
- {bio}
-
-
-);
-
-
-UserBio.propTypes = {
- bio: PropTypes.string.isRequired,
-};
-
-export default UserBio;
diff --git a/src/shared/components/MemberSearch/User/UserBio/style.scss b/src/shared/components/MemberSearch/User/UserBio/style.scss
deleted file mode 100644
index 4561e9fc91..0000000000
--- a/src/shared/components/MemberSearch/User/UserBio/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '~tc-ui/src/styles/tc-includes';
-
-.user-bio {
- @include tc-body-small;
-
- font-family: "Roboto", Helvetica, Arial, sans-serif;
- color: $tc-gray-80;
- margin-top: 20px;
-}
diff --git a/src/shared/components/MemberSearch/User/UserStats/index.jsx b/src/shared/components/MemberSearch/User/UserStats/index.jsx
new file mode 100644
index 0000000000..4cd17053bd
--- /dev/null
+++ b/src/shared/components/MemberSearch/User/UserStats/index.jsx
@@ -0,0 +1,59 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+
+import TrackItem from '../../../ProfilePage/MemberTracks/TrackItem';
+import { trackMap } from '../../../ProfilePage/MemberTracks';
+import List from '../../../ProfilePage/Skills/List';
+
+import './style.scss';
+
+const UserStats = ({ tracks, skills }) => {
+ const normalizeSkills = skills.map((skill, index) => ({ tagId: index, tagName: skill.name }));
+ const verifiedSkills = _.filter(normalizeSkills, skill => _.includes(skill.sources, 'CHALLENGE'));
+ const userEnteredSkills = _.filter(normalizeSkills, skill => !_.includes(skill.sources, 'CHALLENGE'));
+
+ const renderTracks = (
+
+ {
+ tracks.map((track, index) => (
+
+ ))
+ }
+
+ );
+
+ const renderSkills = (
+
+
+
+
+
+ );
+
+ return (
+
+
{tracks.length ? renderTracks : No track added}
+
{skills.length ? renderSkills : No skills added}
+
+ );
+};
+
+UserStats.defaultProps = {
+ tracks: [],
+ skills: [],
+};
+
+UserStats.propTypes = {
+ tracks: PT.arrayOf(PT.shape()),
+ skills: PT.arrayOf(PT.shape()),
+};
+
+export default UserStats;
diff --git a/src/shared/components/MemberSearch/User/UserStats/style.scss b/src/shared/components/MemberSearch/User/UserStats/style.scss
new file mode 100644
index 0000000000..dce918bec2
--- /dev/null
+++ b/src/shared/components/MemberSearch/User/UserStats/style.scss
@@ -0,0 +1,47 @@
+@import "~styles/mixins";
+
+.user-stats {
+ margin-left: 24px;
+
+ @include xs-to-sm {
+ margin-left: 0;
+ }
+}
+
+.not-found-text {
+ @include roboto-regular;
+
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 22px;
+ color: #767676;
+
+ @include xs-to-sm {
+ &.track {
+ font-size: 12px;
+ line-height: 18px;
+ }
+ }
+}
+
+.skills-wrapper {
+ margin-top: 16px;
+
+ @include xs-to-sm {
+ margin-top: 8px;
+ }
+}
+
+.tracks {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+
+ @include xs-to-sm {
+ gap: 8px;
+ }
+}
+
+.skills {
+ max-width: fit-content;
+}
diff --git a/src/shared/components/MemberSearch/User/UsernameAndDetails/index.jsx b/src/shared/components/MemberSearch/User/UsernameAndDetails/index.jsx
index 1f60c712dd..a3e22d8b23 100644
--- a/src/shared/components/MemberSearch/User/UsernameAndDetails/index.jsx
+++ b/src/shared/components/MemberSearch/User/UsernameAndDetails/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import moment from 'moment';
+import { Link } from 'react-router-dom';
import { singlePluralFormatter } from '../../helpers';
import ISOCountries from '../../helpers/ISOCountries';
@@ -18,23 +19,27 @@ const UsernameAndDetails = ({
const numberWins = singlePluralFormatter(numWins, 'win');
- const memberSinceMMMYYYY = moment(memberSince).format('MMM YYYY');
+ const memberSinceYYYY = moment(memberSince).format('YYYY');
return (
- {username}
+ {username}
{userCountry}
- {numberWins && ` / ${numberWins}`}
+ {
+ numberWins
+ ? {numberWins}
+ : null
+ }
- Member since {memberSinceMMMYYYY}
+ Member since {memberSinceYYYY}
diff --git a/src/shared/components/MemberSearch/User/UsernameAndDetails/style.scss b/src/shared/components/MemberSearch/User/UsernameAndDetails/style.scss
index 535de5e8bf..eecb2f911b 100644
--- a/src/shared/components/MemberSearch/User/UsernameAndDetails/style.scss
+++ b/src/shared/components/MemberSearch/User/UsernameAndDetails/style.scss
@@ -1,36 +1,59 @@
@import '~tc-ui/src/styles/tc-includes';
+@import "~styles/mixins";
.username-and-details {
max-width: 225px;
+ margin-left: 16px;
.username {
- @include tc-heading;
+ @include roboto-bold;
- font-family: "Roboto", Helvetica, Arial, sans-serif;
- color: $tc-gray-80;
- text-overflow: ellipsis;
- overflow: hidden;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 26px;
+ color: $tco-black;
- @media (max-width: 700px) {
- max-width: 180px;
+ @include xs-to-sm {
+ font-size: 14px;
+ line-height: 20px;
}
}
.user-details {
.country-and-wins {
- @include tc-label-small;
+ @include barlow;
- color: $tc-gray-60;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ color: $tco-black;
+ margin-top: 1px;
+ text-transform: uppercase;
.user-country {
text-transform: uppercase;
+ padding-right: 8px;
+ }
+
+ .number-wins {
+ padding-left: 8px;
+ border-left: 2px solid #e9e9e9;
}
}
.member-since {
- @include tc-label-small;
+ @include roboto-regular;
- color: $tc-gray-30;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 22px;
+ color: #767676;
+ margin-top: 1px;
+
+ @include xs-to-sm {
+ font-size: 12px;
+ line-height: 18px;
+ }
}
}
}
diff --git a/src/shared/components/MemberSearch/helpers/index.js b/src/shared/components/MemberSearch/helpers/index.js
index a5adcec034..7b3842c7e3 100644
--- a/src/shared/components/MemberSearch/helpers/index.js
+++ b/src/shared/components/MemberSearch/helpers/index.js
@@ -244,3 +244,18 @@ export function getSearchTagPreposition(tagType) {
return 'in';
}
}
+
+/**
+ * Get Initials from handle
+ * @param {String} handle
+ * @returns {String} user initials
+ */
+export const getInitials = (handle) => {
+ const names = handle.split(' ');
+ let initials = names[0].substring(0, 1).toUpperCase();
+
+ if (names.length > 1) {
+ initials += names[names.length - 1].substring(0, 1).toUpperCase();
+ }
+ return initials;
+};
diff --git a/src/shared/components/MemberSearch/index.jsx b/src/shared/components/MemberSearch/index.jsx
index 108c17b78b..4f6ca198f6 100644
--- a/src/shared/components/MemberSearch/index.jsx
+++ b/src/shared/components/MemberSearch/index.jsx
@@ -4,8 +4,6 @@ import qs from 'qs';
import MemberSearchView from './MemberSearchView';
import { isEndOfScreen } from './helpers';
-import './style.scss';
-
export default class MemberSearch extends Component {
constructor(props) {
super(props);
@@ -39,15 +37,7 @@ export default class MemberSearch extends Component {
render() {
return (
-
+
);
}
}
diff --git a/src/shared/components/MemberSearch/style.scss b/src/shared/components/MemberSearch/style.scss
deleted file mode 100644
index 1286420505..0000000000
--- a/src/shared/components/MemberSearch/style.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.page-wrapper {
- display: block !important; // overrides .container>*:nth-child(2)
- width: 100%;
- min-height: 100%;
- background-color: #f6f6f6;
-}
-
-.fold-wrapper {
- margin: 0;
- min-height: 100%;
-}
-
-.view-container {
- min-height: 440px;
- padding-bottom: 30px;
-}
-
-:global {
- #member-search-wrapper {
- font-family: "Roboto", Helvetica, Arial, sans-serif !important;
-
- // Overrides .member-search-view
- > div {
- background-color: transparent;
- }
-
- // Overrides old style guide
- a {
- cursor: auto !important;
- transition: none !important;
- text-decoration: none !important;
- color: inherit !important;
-
- &:visited,
- &:hover,
- &:active {
- color: inherit !important;
- cursor: auto !important;
- text-decoration: none !important;
- }
- }
- }
-}
diff --git a/src/shared/components/ProfilePage/MemberTracks/TrackItem/styles.scss b/src/shared/components/ProfilePage/MemberTracks/TrackItem/styles.scss
index 949ad63e24..8cbc603141 100644
--- a/src/shared/components/ProfilePage/MemberTracks/TrackItem/styles.scss
+++ b/src/shared/components/ProfilePage/MemberTracks/TrackItem/styles.scss
@@ -4,6 +4,7 @@
padding: 4px 10px;
border: 2px solid $listing-checkbox-green;
border-radius: 4px;
+ background-color: $tc-white !important;
@include xs-to-sm {
padding: 2px 10px;
diff --git a/src/shared/components/ProfilePage/MemberTracks/index.jsx b/src/shared/components/ProfilePage/MemberTracks/index.jsx
index d9202fb388..6bdfe36551 100644
--- a/src/shared/components/ProfilePage/MemberTracks/index.jsx
+++ b/src/shared/components/ProfilePage/MemberTracks/index.jsx
@@ -5,6 +5,12 @@ import { indexOf } from 'lodash';
import './styles.scss';
import TrackItem from './TrackItem';
+export const trackMap = {
+ DEVELOP: 'Developer',
+ DESIGN: 'Designer',
+ DATA_SCIENCE: 'Data Scientist',
+};
+
const MemberTracks = ({
copilot,
info,
@@ -12,12 +18,6 @@ const MemberTracks = ({
}) => {
const { tracks } = info;
- const trackMap = {
- DEVELOP: 'Developer',
- DESIGN: 'Designer',
- DATA_SCIENCE: 'Data Scientist',
- };
-
return (
{
diff --git a/src/shared/components/ProfilePage/Skills/List/styles.scss b/src/shared/components/ProfilePage/Skills/List/styles.scss
index e43df3f141..26698f8c38 100644
--- a/src/shared/components/ProfilePage/Skills/List/styles.scss
+++ b/src/shared/components/ProfilePage/Skills/List/styles.scss
@@ -2,7 +2,8 @@
.list {
display: flex;
- gap: 4px;
+ column-gap: 4px;
+ row-gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
@@ -37,6 +38,7 @@
cursor: pointer;
width: fit-content;
padding: 1px 6px;
+ background-color: $tc-white;
span {
@include roboto-medium;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
index e7fa312d4d..357a115b92 100755
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
@@ -37,7 +37,7 @@ export default function AddSkillsModal({
setDisplayingSkills([...userSkills]);
}, [userSkills]);
- const find = (arr, i) => arr && arr.indexOf(i) !== -1;
+ const find = (arr, i) => arr && _.findIndex(arr, e => e.toLowerCase() === i.toLowerCase()) !== -1;
const findSkill = (arr, skill) => arr && arr.find(a => a.id === skill.id);
const popularSkills = React.useMemo(() => allSkills
diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
index b01cb53702..14175c3264 100644
--- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
+++ b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
@@ -300,7 +300,7 @@ export default function ChallengeViewSelector(props) {
return '';
})()}
{
- isMM && (
+ (isMM || challenge.track.toLowerCase() === 'data science') && (