incorporate feedback

Author: codeMinter

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

@@ -507,13 +507,13 @@ export default class Skills extends ConsentComponent {
                               <div styleName="hidden-indicator" />
                               { imageExist(`id-${skill.id}.svg`) ? getImage(`id-${skill.id}.svg`) : <FallbackIcon /> }
                             </div>
-                            <div styleName="name-wrapper">
-                              <div styleName="name">
-                                {_.truncate(skill.name, { length: 18, separator: ' ' })}
-                              </div>
-                              {_.includes(skill.sources, 'CHALLENGE') && <div styleName="verified-badge"><VerifiedBadgeIcon /></div> }
-                            </div>
                           </a>
+                          <div styleName="name-wrapper">
+                            <div styleName="name">
+                              {_.truncate(skill.name, { length: 18, separator: ' ' })}
+                            </div>
+                            {_.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,14 +261,39 @@
     text-decoration: none;
   }
 
+  .name-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    padding: 5px 0px 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;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: #fbfbfb;
-    padding: 10px;
+    padding: 0px 10px 0px;
     border: 1px solid $tc-gray-20;
     border-radius: 6px;
     height: 75px;
@@ -317,28 +342,6 @@
     }
   }
 
-  .name-wrapper {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .name {
-      @include roboto-regular;
-
-      font-size: 12px;
-      line-height: 15px;
-      color: #262628;
-      text-align: center;
-      width: 100%;
-    }
-
-    .verified-badge {
-      padding-left: 5px;
-      font-size: 0;
-    }
-  }
-
   a.skill-hidden {
     img {
       opacity: 0.3;