GAME-222 prominent add skills note

Author: kkartunov

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * Child component of Settings/Profile renders "Skills" section of profile setting page.
  */
@@ -375,12 +376,7 @@ export default class Skills extends ConsentComponent {
             <div styleName="title-wrap" style={{ alignItems: userSkills.length >= MIN_SKILLS_TO_REMIND ? 'center' : 'flex-start' }}>
               <h2 styleName="form-title">Skills</h2>
               {
-                userSkills.length < MIN_SKILLS_TO_REMIND ? (
-                  // eslint-disable-next-line max-len
-                  <p>To be able to match you with the best opportunities at Topcoder,<br />please be sure you have at least {MIN_SKILLS_TO_REMIND} skills listed in your profile.</p>
-                ) : (
-                  <YouGotSkillsBadge />
-                )
+                userSkills.length >= MIN_SKILLS_TO_REMIND && <YouGotSkillsBadge />
               }
             </div>
 
@@ -390,6 +386,27 @@ export default class Skills extends ConsentComponent {
               </div>
 
               <div styleName="form-body">
+                {
+                  userSkills.length < MIN_SKILLS_TO_REMIND && (
+                    <div styleName="skill-note">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fill="#137D60"
+                          fillRule="evenodd"
+                          d="M12 4a8 8 0 100 16 8 8 0 000-16zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12zm9-4a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zm-1 4a1 1 0 011-1h1a1 1 0 011 1v3a1 1 0 110 2h-1a1 1 0 01-1-1v-3a1 1 0 01-1-1z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <p>To be able to match you with the best opportunities at Topcoder, please be sure you have at least <span>{MIN_SKILLS_TO_REMIND} skills</span> listed in your profile.</p>
+                    </div>
+                  )
+                }
                 {skillList}
               </div>
 

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import "~styles/mixins";
 
 .skillList {
@@ -92,6 +93,8 @@
 
 .form-body {
   flex: 0 0 calc(50% + 13px);
+  display: flex;
+  flex-direction: column;
 }
 
 .form-footer {
@@ -131,6 +134,30 @@
   }
 }
 
+.skill-note {
+  display: flex;
+  background-color: $color-black-5;
+  padding: $pad-md $pad-lg;
+  border-radius: 4px;
+  margin-bottom: $pad-lg;
+
+  svg {
+    margin-right: $margin-md;
+    min-width: 24px;
+  }
+
+  p,
+  span {
+    @include roboto-medium;
+
+    line-height: 24px;
+  }
+
+  span {
+    color: $color-turq-160;
+  }
+}
+
 @include xs-to-md {
   .form-container {
     padding: $pad-xxl $pad-lg;
@@ -179,3 +206,13 @@
     }
   }
 }
+
+@include xs-to-sm {
+  .skill-note {
+    flex-direction: column;
+
+    svg {
+      margin-bottom: $margin-md;
+    }
+  }
+}