SUP-1754, [Registration] Fix UX and UI skill picker issues

Fixed issues mentioned in for 3.14.43 screenshot except the icons. Not able to extract the icons without outline from designs.

Author: vikasrohit

app/directives/track-toggle/track-toggle.directive.jade

@@ -1,25 +1,24 @@
 .track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']")
   hr(class="{{!$index  && 'first'}}")
 
-  .top
-    .title(ng-class="{'disabled': !tracks[track]}")
-      img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
-      img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
-      img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
+  .content
+    .track-details
+      .icon(ng-class="{'disabled': !tracks[track]}")
+        img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
+        img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
+        img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
 
-      span {{track | track}}
+      .text
+        span.title {{track | track}}
+        .description
+          span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX
+          span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting
+          span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis
 
     .onoffswitch
       input.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='', ng-model="tracks[track]", id="{{track}}-onoffswitch")
       label.onoffswitch-label(for='{{track}}-onoffswitch')
         span.onoffswitch-inner
         span.onoffswitch-switch
 
-
-  .bottom
-    .description
-      span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX
-      span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting
-      span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis
-
 hr

app/skill-picker/skill-picker.jade

@@ -1,11 +1,11 @@
 .skill-picker-container
-  h1 Welcome to Topcoder!
+  h1 Welcome to Topcoder
 
   p.instruction Hi {{vm.username}}! Your account is now active. To Help other members get to know you, select the tracks in which you're interested, and specify some of your skills. You can edit this information later on your Profile.
 
   .tracks-container
     .title tracks
-    .description Topcoder’s three categories of challenges… please pick at least one based on your skills and interests.
+    .description Topcoder's three categories of challenges… please pick at least one based on your skills and interests.
     .tracks
       track-toggle(tracks="vm.tracks")
 

assets/css/directives/track-toggle.scss

@@ -1,3 +1,5 @@
+@import '../partials/combined';
+
 track-toggle {
   hr {
     margin-top: 15px;
@@ -11,28 +13,42 @@ track-toggle {
     display: flex;
     flex-direction: column;
     align-items: left;
-    .top {
+    .content {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+
+      .track-details {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-left: 30px;
+
+        .icon {
+          &.disabled {
+            color: #b7b7b7;
+          }
+          img {
+            height: 32px;
+            width: 35px;
+          }
+          span {
+            font-family: 'Sofia Pro';
+            font-size: 22px;
+          }
+        }
+      }
+    }
+    .text {
+      margin-left: 25px;
       .title {
+        font-size: 22px;
+        line-height: 28px;
+        @include sofia-pro-regular;
         &.disabled {
           color: #b7b7b7;
         }
-        img {
-          height: 25px;
-          width: 25px;
-          margin-bottom: -4px;
-          margin-right: 3px;
-        }
-        span {
-          font-family: 'Sofia Pro';
-          font-size: 22px;
-        }
       }
-    }
-    .bottom {
-      margin-top: 10px;
       .description {
         font-family: 'Source Sans Pro';
         font-size: 13px;
@@ -51,22 +67,25 @@ track-toggle {
   }
 }
 .onoffswitch {
-  position: relative; width: 60px;
+  position: relative; width: 45px;
+  height: 24px;
+  align-self: center;
   -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+  margin-right: 30px;
 }
 .onoffswitch-checkbox {
   display: none;
 }
 .onoffswitch-label {
   display: block; overflow: hidden; cursor: pointer;
-  border-radius: 36px;
+  border-radius: 12px;
 }
 .onoffswitch-inner {
   display: block; width: 200%; margin-left: -100%;
   transition: margin 0.3s ease-in 0s;
 }
 .onoffswitch-inner:before, .onoffswitch-inner:after {
-  display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px;
+  display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
   font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
   box-sizing: border-box;
 }
@@ -84,14 +103,14 @@ track-toggle {
   text-align: right;
 }
 .onoffswitch-switch {
-  display: block; width: 19px; margin: 3.5px;
+  display: block; width: 19px; margin: 2.5px;
   height: 19px;
   background: #FFFFFF;
   position: absolute; top: 0; bottom: 0;
-  margin-top: 3.45px;
-  right: 30px;
+  margin-top: 2.45px;
+  right: 20px;
   border: none;
-  border-radius: 36px;
+  border-radius: 12px;
   transition: all 0.3s ease-in 0s; 
 }
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

assets/css/skill-picker/skill-picker.scss

@@ -20,6 +20,7 @@
     margin: 20px;
     font-size: 28px;
     @include sofia-pro-bold;
+    text-transform: uppercase;
   }
   .instruction {
     margin-bottom: 25px;
@@ -30,21 +31,23 @@
 
   .tracks-container {
     width: 100%;
-    .title {
+    >.title {
       @include sofia-pro-regular;
       text-transform: uppercase;
       font-size: 18px;
       padding-bottom: 10px;
     }
-    .description {
-      @include source-sans-italic;
+    >.description {
+      @include source-sans-regular;
       color: #A3A3AE;
       font-size: 13px;
+      line-height: 18px;
       // border-bottom: 1px solid #A3A3AE;
-      padding-bottom: 5px;
     }
     .tracks {
-      margin: 0 30px;
+      margin-top: 10px;
+      .track {
+      }
     }
   }
 
@@ -59,6 +62,7 @@
       @include source-sans-italic;
       color: #A3A3AE;
       font-size: 13px;
+      line-height: 20px;
       border-bottom: 1px solid #A3A3AE;
       padding-bottom: 5px;
     }
@@ -137,11 +141,7 @@
 
   p {
     font-size: 15px;
-    padding: 5px 20px;
-
-    &.instruction {
-      max-width: 440px;
-    }
+    padding: 5px 0px;
   }
   .button-l{
     margin: 30px;