Update settings CSS

app/directives/skill-tile/skill-tile.directive.jade

@@ -1,9 +1,13 @@
 a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': skill.isNew}")
-
   .skill-icon(ng-switch="skill.category")
+    .remove-indicator
+
+    .hidden-indicator
+
     img(ng-switch-when="DEVELOP", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-develop.svg")
+
     img(ng-switch-when="DESIGN", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-design.svg")
+
     img(ng-switch-when="DATA_SCIENCE", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-data.svg")
-  .name {{skill.tagName}}
-  span.hidden(ng-if="skill.hidden") (Hidden)
 
+  .name {{skill.tagName}}

app/profile/subtrack/data/data.jade

@@ -2,7 +2,7 @@
   .top
     ul.horizontal-stats
       li.stat
-        .value.rating {{vm.typeStats.rank.rating}}
+        .value.rating(style="color: {{vm.typeStats.rank.rating | ratingColor}}") {{vm.typeStats.rank.rating}}
           span.square(style="background-color: {{vm.typeStats.rank.rating | ratingColor}}")
         .name RATING
 

app/settings/edit-profile/edit-profile.jade

@@ -48,7 +48,7 @@
 
       .section-fields
         track-toggle(tracks="vm.tracks")
-          
+
         button(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save
 
   .settings-section.skills
@@ -87,7 +87,7 @@
       .field-label Link your accounts
       .external-links
         external-accounts(linked-accounts="vm.linkedExternalAccounts.length", read-only="false")
-        
+
       .field-label(ng-show="vm.hasLinks") your accounts
       .existing-links
         external-links-data(ng-show="vm.hasLinks" linked-accounts-data="vm.linkedExternalAccountsData")

assets/css/directives/skill-tile.scss

@@ -1,62 +1,111 @@
 @import '../partials/combined';
+
 skill-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
-  text-align: center;
   height: 130px;
   width: 100px;
+
+  @media (min-width: 768px) {
+    width: 100px;
+    height: 180px;
+    width: 100px;
+  }
+
+  a:not(.hidden):hover {
+    div.skill-icon {
+      background-color: #FEE8EC;
+      border: 1px solid #FCBBC5;
+      box-shadow: none;
+
+      .remove-indicator {
+        display: block;
+      }
+    }
+    img {
+      opacity: .3;
+    }
+  }
+
+  .new {
+    .skill-icon {
+      background-color: #F2FAFF;
+      border: 1px solid #85CCFF;
+      box-shadow: 0 0 3px #0096FF;
+    }
+  }
+
+  a.hidden {
+    img {
+      opacity: .3;
+    }
+
+    .hidden-indicator {
+      display: block;
+    }
+
+    .name {
+      text-decoration: line-through;
+      color: $system-gray;
+    }
+  }
+
   .skill-icon {
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #fbfbfb;
+    background-color: #FBFBFB;
     padding: 10px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $gray-light;
     height: 80px;
     width: 80px;
-    img, i {
-      font-size: 45px;
-      height: 45px;
-      width: 45px;
+    @media (min-width: 768px) {
+      height: 100px;
+      width: 100px;
     }
-    &.new {
-      background-color: #85CCFF;
-      border: 1px solid #F2FAFF;
+
+    .remove-indicator {
+      position: absolute;
+      display: none;
+      top: 34px;
+      left: 30px;
+      @include background-image-size(40px, 50px);
+      background: url(/images/x-mark-red.svg);
+      z-index: 100;
     }
-  }
-  .name {
-    font-family: 'Sofia Pro';
-    font-weight: 300;
-    text-align: center;
-    margin-top: 10px;
-    font-size: 12px;
-    &.hidden {
-      @include sofia-pro-light;
-      text-decoration: line-through;
+
+    .hidden-indicator {
+      position: absolute;
+      display: none;
+      top: 32px;
+      left: 31px;
+      @include background-image-size(36px, 36px);
+      background: url(/images/x-mark-gray.svg);
+      z-index: 100;
     }
-  }
-  @media (min-width: 768px) {
-    width: 100px;
-    height: 180px;
-    margin: 0 30px;
-    width: 100px;
-    .skill-icon {
-      height: 100px;
-      width: 100px;
-      i {
-        font-size: 60px;
-        height: 60px;
+
+    img {
+      width: 48px;
+      height: 48px;
+      @media only screen and (min-width: 768px) {
         width: 60px;
+        height: 60px;
       }
     }
-    .name {
-      text-align: center;
-      margin-top: 10px;
+
+  }
+
+  .name {
+    @include sofia-pro-light;
+    margin-top: 10px;
+    font-size: 12px;
+    color: #3A3C3E;
+    text-align: center;
+    @media (min-width: 768px) {
       font-size: 14px;
-      line-height: 18px;
     }
   }
 }