Merge pull request #2683 from topcoder-platform/issue_2642

Fix for issue #2642

Author: sushilshinde

.circleci/config.yml

@@ -175,6 +175,7 @@ workflows:
             branches:
               only: 
                 - develop-from-master-23may
+                - hot-fixes-4
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -189,7 +190,6 @@ workflows:
           filters:
             branches:
               only:
-                - hot-fixes-2
                 - develop
                 - general-features
                 - develop-from-master-23may

src/shared/components/Settings/Profile/Skills/index.jsx

@@ -20,6 +20,7 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
 import DevFallbackIcon from 'assets/images/profile/skills/id-develop.svg';
 import DesignFallbackIcon from 'assets/images/profile/skills/id-design.svg';
 import DataFallbackIcon from 'assets/images/profile/skills/id-data.svg';
+import VerifiedBadgeIcon from 'assets/images/verified-skill-badge.svg';
 import { isomorphy } from 'topcoder-react-utils';
 
 import './styles.scss';
@@ -303,6 +304,7 @@ export default class Skills extends ConsentComponent {
           skill.id === arraySkill[i].tagId
         ));
         if (result && result.length > 0) {
+          result[0].sources = arraySkill[i].sources;
           filterUserSkills.push(result[0]);
           if (_.some(result[0].categories, category => category.toLowerCase() === 'design')) {
             design.push(result[0].name);
@@ -505,10 +507,13 @@ export default class Skills extends ConsentComponent {
                               <div styleName="hidden-indicator" />
                               { imageExist(`id-${skill.id}.svg`) ? getImage(`id-${skill.id}.svg`) : <FallbackIcon /> }
                             </div>
+                          </a>
+                          <div styleName="name-wrapper">
                             <div styleName="name">
                               {_.truncate(skill.name, { length: 18, separator: ' ' })}
                             </div>
-                          </a>
+                            {_.includes(skill.sources, 'CHALLENGE') && <div styleName="verified-badge"><VerifiedBadgeIcon /></div> }
+                          </div>
                         </div>
                       </li>
                     );

src/shared/components/Settings/Profile/Skills/styles.scss

@@ -228,7 +228,7 @@
   }
 
   li {
-    margin: 0 10px 55px;
+    margin: 0 10px 10px;
     border-radius: 6px;
 
     @include xs-to-lg {
@@ -261,6 +261,32 @@
     text-decoration: none;
   }
 
+  .name-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    padding-top: 5px;
+    padding-bottom: 10px;
+    flex-shrink: 0;
+
+    .name {
+      @include roboto-regular;
+
+      font-size: 12px;
+      line-height: 15px;
+      color: #262628;
+      text-align: center;
+    }
+
+    .verified-badge {
+      padding-left: 5px;
+      font-size: 0;
+    }
+  }
+
   .skill-icon {
     position: relative;
     display: flex;
@@ -317,17 +343,6 @@
     }
   }
 
-  .name {
-    @include roboto-regular;
-
-    margin-top: 10px;
-    font-size: 12px;
-    line-height: 15px;
-    color: #262628;
-    text-align: center;
-    width: 100%;
-  }
-
   a.skill-hidden {
     img {
       opacity: 0.3;