SUP-2728, Add iOS community to Onboarding page (Skill picker)

-- Incorporated code review suggestions (more consistent BEM naming)

Author: vikasrohit

app/skill-picker/skill-picker.jade

@@ -4,18 +4,18 @@
   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.
 
   .communities(ng-show="!vm.loadingCommunities && vm.showCommunity")
-    .communities-title Communities
-    .communities-description Topcoder regularly establishes exclusive communities to help members develop expertise and earn money in particular technologies. Join a featured community to be notified of events and challenges.
-    .communities-list
-      .community(ng-repeat="(communityKey, community) in vm.communities", ng-class="{'disabled': !community.status}", ng-if="community.display")
-        .community-details
-          .community-icon(ng-class="{'disabled': !community.status}")
+    .communities__title Communities
+    .communities__description Topcoder regularly establishes exclusive communities to help members develop expertise and earn money in particular technologies. Join a featured community to be notified of events and challenges.
+    .communities__list
+      .community(ng-repeat="(communityKey, community) in vm.communities", ng-class="{'community--disabled': !community.status}", ng-if="community.display")
+        .community__details
+          .community__icon(ng-class="{'community__icon--disabled': !community.status}")
             img(ng-if="communityKey == 'ios' && community.status", src="/images/ico-ios-community.svg")
             img(ng-if="communityKey == 'ios' && !community.status", src="/images/ico-ios-community-grey.svg")
 
-          .community-text
-            span.community-title(class="{{!community.status && 'disabled'}}") {{community.displayName}}
-            .community-description
+          .community__text
+            span.community__title(class="{{!community.status && 'disabled'}}") {{community.displayName}}
+            .community__description
               span(ng-if="communityKey == 'ios'") Mobile app design and development for iOS, with Swift emphasis
 
         onoff-switch(model="community.status", unique-id="'community-' + communityKey")

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

@@ -33,19 +33,19 @@
   .communities {
     width: 100%;
     margin-bottom: 30px;
-    .communities-title {
+    .communities__title {
       @include sofia-pro-regular;
       text-transform: uppercase;
       font-size: 18px;
       padding-bottom: 10px;
     }
-    .communities-description {
+    .communities__description {
       @include font-with-weight('Merriweather Sans');
       color: #A3A3AE;
       font-size: 13px;
       line-height: 18px;
     }
-    .communities-list {
+    .communities__list {
       margin-top: 10px;
       .community {
         display: flex;
@@ -59,18 +59,18 @@
           background-color: $gray-lightest;
         }
 
-        .community-details {
+        .community__details {
           display: flex;
           flex-direction: row;
           align-items: center;
           padding-left: 10px;
         }
 
-        .community-text {
+        .community__text {
           margin-left: 10px;
         }
 
-        .community-title {
+        .community__title {
           font-size: 16px;
           line-height: 28px;
           @include font-with-weight('Sofia Pro', 500);
@@ -81,7 +81,7 @@
           }
         }
 
-        .community-description {
+        .community__description {
           @include font-with-weight('Merriweather Sans', 400);
           font-size: 13px;
           margin-top: 4px;