Refactored ProfilePicture to use React component (ifmeorg#876)

* Refactored ProfilePicture to use React component

1. Updated ProfilePicture class to use Avatar React component.
2. Enhanced Avatar component to use react-lazyload
3. Updated tests that assert on the ProfilePicture
4. Fixed some tests for language toggling involving page transitions

* Fixing CodeClimate complaints

* Fixing typo

* Reorganizing MomentsApp bundle

* Fixing lint errors and paths

* Updating tests to asseto on Hash

* Updating flow handling of assets

* Fixing lint ignore

* Adding ignore path for CodeClimate

Author: baohouse

.codeclimate.yml

@@ -21,6 +21,7 @@ engines:
     - public/javascripts/
     - vendor/assets/javascripts
     - client/karma.conf.js
+    - client/flow/
   fixme:
     enabled: false
   rubocop:

Rakefile

@@ -4,7 +4,7 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be
 # available to Rake.
 
-require File.expand_path('../config/application', __FILE__)
+require File.expand_path('config/application', __dir__)
 Rails.application.load_tasks
 require 'fileutils'
 require 'yaml'

app/assets/stylesheets/application.scss

@@ -544,47 +544,40 @@ a.highlight:hover {
 
 /* Images */
 
-img {
-  max-width: 100%;
+.avatar {
+  margin: 0;
+
+  .portrait {
+    border-color: $container-color;
+    border-width: 2px;
+    background-color: $background-color;
+  }
 }
 
-.mini_profile_picture {
+.mini_profile_picture .portrait {
   width: 100px;
   height: 100px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  object-fit: cover;
 
   @media screen and (max-width: $small) {
     width: 50px;
     height: 50px;
   }
 }
 
-.contributor_picture,
-.profile_picture {
+.contributor_picture .portrait,
+.profile_picture .portrait {
   width: 55px;
   height: 55px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  margin: 0 auto;
-  object-fit: cover;
 
   @media screen and (min-width: $small + 1) {
     width: 150px;
     height: 150px;
   }
 }
 
-.home_picture {
+.home_picture .portrait {
   width: 50px;
   height: 50px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  margin: 0 auto;
-  display: block;
-  overflow: hidden;
-  object-fit: cover;
 
   @media screen and (min-width: $medium + 1) {
     width: 100px;
@@ -593,22 +586,30 @@ img {
 }
 
 .small_profile_picture_div {
-  width: 100px;
-  height: 100px;
+  width: 1px;
 
-  @media screen and (max-width: $small) {
-    width: 50px;
-    height: 50px;
+  .portrait {
+    width: 100px;
+    height: 100px;
+
+    @media screen and (max-width: $small) {
+      width: 50px;
+      height: 50px;
+    }
   }
 }
 
 .profile_picture_div {
-  width: 150px;
-  height: 150px;
+  width: 1px;
 
-  @media screen and (max-width: $small) {
-    width: 55px;
-    height: 55px;
+  .portrait {
+    width: 150px;
+    height: 150px;
+
+    @media screen and (max-width: $small) {
+      width: 55px;
+      height: 55px;
+    }
   }
 }