672 use BEM for styles

.ember-cli

@@ -5,5 +5,6 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
+
   "disableAnalytics": false
 }

app/components/categories-list.js

@@ -19,7 +19,7 @@ const {
  * @extends Ember.Component
  */
 export default Component.extend({
-  classNames: ['categories-list'],
+  classNames: ['start__interests'],
 
   /**
    * An array of properties used to sort the list of categories.

app/components/drag-zone.js

@@ -7,7 +7,7 @@ const {
 } = Ember;
 
 export default Component.extend({
-  classNames: ['drag-zone'],
+  classNames: ['drag-zone', 'flexbox-container'],
 
   dragState: service(),
 

app/components/image-drop.js

@@ -25,15 +25,15 @@ export default Component.extend({
   attributeBindings: ['style'],
   classNames: ['image-drop'],
   classNameBindings: [
-    'active',
-    'circle:is-circular',
+    'active:image-drop--active',
+    'circle:image-drop--circle',
+    'isDraggingOnApp:image-drop--drag',
     'hasImage',
-    'isDraggingOnApp:is-dragging',
     'large:is-large'
   ],
   droppedImage: null,
   files: null,
-  helpText: 'Drop your image here.',
+  helpText: 'Click to add your photo.',
   originalImage: null,
   multiple: false,
   url: `https://api.cloudinary.com/v1_1/${ENV.cloudinary.cloud}/image/upload`,

app/components/navigation-menu.js

@@ -19,7 +19,8 @@ const {
   @extends Ember.Component
  */
 export default Component.extend({
-  classNames: ['menu', 'container'],
+  tagName: 'header',
+  classNames: ['site-header', 'container'],
 
   /**
     @property currentUser

app/components/organization-menu.js

@@ -5,5 +5,5 @@ const {
 } = Ember;
 
 export default Component.extend({
-  classNames: ['organization-menu', 'horizontal-menu']
+  classNames: ['organization-menu', 'organization-menu--horizontal']
 });

app/components/project-details.js

@@ -19,9 +19,10 @@ const {
  */
 
 export default Component.extend({
-  classNames: ['project-details'],
+  classNames: ['project__header'],
   classNameBindings: ['expanded'],
   expanded: false,
+  tagName: 'header',
 
   /**
     @property store

app/components/project-menu.js

@@ -20,8 +20,8 @@ const {
   @class project-menu
  */
 export default Component.extend({
-  classNames: ['project-menu', 'horizontal-menu'],
-  tagName: 'ul',
+  classNames: ['project__menu', 'project__menu--horizontal'],
+  tagName: 'nav',
 
   /**
     Retreives user credentials to show more content for project managers.

app/components/site-footer.js

@@ -3,5 +3,6 @@ import Ember from 'ember';
 const { Component } = Ember;
 
 export default Component.extend({
-  classNames: ['site-footer']
+  tagName: 'footer',
+  classNames: ['site-footer', 'container']
 });

app/components/user-dropdown.js

@@ -17,7 +17,7 @@ const {
   @extends Ember.Component
  */
 export default Component.extend({
-  classNames: ['user-dropdown', 'dropdown-menu', 'right'],
+  classNames: ['dropdown-menu', 'dropdown-menu--right'],
   /**
     @property session
     @type Ember.Service

app/routes/project/donate.js

@@ -16,7 +16,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 
   model() {
     return this.modelFor('project').reload().then((project) => {
-      let subscription = this.get('userSubscriptions').fetchForProject(project);
+      let subscription = get(this, 'userSubscriptions').fetchForProject(project);
       return RSVP.hash({ project, subscription });
     });
   },

app/routes/project/index.js

@@ -15,7 +15,6 @@ export default Route.extend({
       return RSVP.hash({ project, subscription });
     });
   },
-
   setupController(controller, { project, subscription }) {
     controller.setProperties({ project, subscription });
   }

app/styles/_alerts.scss

@@ -3,6 +3,8 @@
 }
 
 .alert {
+  z-index: 99999;
+
   .container {
     position: relative;
   }
@@ -43,7 +45,7 @@
 .alert-success {
   .full-width-container,
   .fixed-flash-inner {
-    background: $dark-blue;
+    background: $blue;
     color: white;
   }
 }
@@ -56,8 +58,10 @@
   }
 }
 
-.close {
+.alert__close {
+  color: white;
   left: -20px;
+  padding: none;
   position: absolute;
-  top: -3px;
+  top: 0;
 }

app/styles/_buttons.scss

@@ -1,3 +1,15 @@
+//
+// BUTTONS
+//
+
+// GUIDELINES
+// In order to make the styles more readable nesting should be used only for pseudo classes
+// e.g. :active, :disabled, :hover, :visited
+
+//
+// MIXINS
+//
+
 @mixin taskTypeButtonColors($type) {
   $background: map-get($taskTypeColors, $type);
   $text: map-get($taskTypeTextOnBackgroundColors, $type);
@@ -16,15 +28,15 @@
 @mixin primary-active {
   &.primary-active {
     &.active {
-      background: $primary-color;
-      border-color: $primary-color;
+      background: $blue;
+      border-color: $blue;
       color: white;
     }
   }
 }
 
 @mixin focus($color) {
-  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px $color;
+  box-shadow: 0 0 0 1px white, 0 0 0 3px $color;
 }
 
 @mixin colorButton($color) {
@@ -40,16 +52,16 @@
 }
 
 #{$all-buttons}, .button {
-  color: white;
   border-radius: 4px;
   border-style: solid;
   border-width: 1px;
-  padding: 11px 14px;
+  color: white;
+  display: inline-block;
   font-family: $body-font-family;
   font-size: $body-font-size-normal;
   font-weight: 500;
+  padding: 11px 14px;
   text-decoration: none;
-  display: inline-block;
 
   &:focus {
     outline: none;
@@ -69,6 +81,25 @@
   &.large {
     font-size: $body-font-size-large;
     padding: 15px 40px;
+  }
+
+  &.on-solid {
+    background: transparent;
+    border-color: white;
+    &:hover {
+      background: white;
+    }
+  }
+
+  &.default {
+    background: $default-color;
+    border: 1px solid $default-color;
+    &.on-solid {
+      background: transparent;
+      &:hover {
+        color: $blue;
+      }
+    }
 
     &.skill {
       padding: 11px 14px;
@@ -77,13 +108,13 @@
 
   &.clear {
     background: white;
-    border: 1px solid $border-default;
-    color: $dark-text;
-    font-weight: 300;
+    border: 1px solid $gray;
+    color: $text--dark;
+    font-weight: 400;
 
     &:focus {
       background: $clear-focus;
-      border-color: darken($border-default, 2%);
+      border-color: darken($gray, 2%);
     }
 
     @include primary-active;
@@ -144,9 +175,9 @@
 
     &.button-spinner {
       display: inline-block;
+      height: 22px;
       margin: -4px 8px -2px -2px;
       vertical-align: middle;
-      height: 22px;
       width: 22px;
 
       @include fadeIn(0.6s);
@@ -202,7 +233,7 @@
   &.clear {
     background: $clear-hover;
     background-image: linear-gradient(white, $clear-hover);
-    border-color: $border-default;
+    border-color: $gray;
 
     &:disabled {
       background: white;
@@ -250,9 +281,9 @@
 .button-group {
   @include clearfix;
 
-  position: relative;
   display: inline-block;
   font-size: 0;
+  position: relative;
   vertical-align: middle;
 
   #{$all-buttons}, .button {