Merge branch 'ux-release-1' of https://github.com/biosistemika/scinote-web into zd_SCI_2218_2219

2024-09-20 23:16:15 +08:00 · 2018-04-05 08:51:58 +02:00 · 2018-04-05 08:51:58 +02:00 · a8a19df06d
parent d47337fbf3 e608d629c7
commit a8a19df06d
58 changed files with 1091 additions and 7898 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -1,8 +1,16 @@
+env:
+  - DOCKER_COMPOSE_VERSION=1.13.0
+
 sudo: required
+language: ruby
 install: true
 services:
  - docker
-before_script:
+before_install:
+  - sudo rm /usr/local/bin/docker-compose
+  - curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
+  - chmod +x docker-compose
+  - sudo mv docker-compose /usr/local/bin
  - make docker
 script:
  - make tests-ci
--- a/1
+++ b/1
@ -13,7 +13,6 @@ gem 'bootstrap-sass', '~> 3.3.7'
 gem 'sass-rails', '~> 5.0.6'
 gem 'bootstrap_form'
 gem 'yomu'
-gem 'font-awesome-rails', '~> 4.7.0.2'
 gem 'recaptcha', require: 'recaptcha/rails'
 gem 'sanitize', '~> 4.4'
 gem 'omniauth'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -137,7 +137,7 @@ GEM
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11.0)
    byebug (9.1.0)
-    capybara (2.17.0)
+    capybara (2.18.0)
      addressable
      mini_mime (>= 0.1.3)
      nokogiri (>= 1.3.3)
@ -221,8 +221,6 @@ GEM
    ffi (1.9.18)
    figaro (1.1.1)
      thor (~> 0.14)
-    font-awesome-rails (4.7.0.3)
-      railties (>= 3.2, < 5.2)
    gherkin (5.0.0)
    globalid (0.4.1)
      activesupport (>= 4.2.0)
@ -300,7 +298,7 @@ GEM
      rails (>= 3.2.0)
    newrelic_rpm (4.7.1.340)
    nio4r (2.2.0)
-    nokogiri (1.8.1)
+    nokogiri (1.8.2)
      mini_portile2 (~> 2.3.0)
    nokogumbo (1.4.13)
      nokogiri
@ -346,9 +344,9 @@ GEM
      pry (~> 0.10)
    pry-rails (0.3.6)
      pry (>= 0.10.4)
-    public_suffix (3.0.1)
+    public_suffix (3.0.2)
    puma (3.11.2)
-    rack (2.0.3)
+    rack (2.0.4)
    rack-test (0.6.3)
      rack (>= 1.0)
    rails (5.1.1)
@ -556,7 +554,6 @@ DEPENDENCIES
  factory_bot_rails
  faker
  figaro
-  font-awesome-rails (~> 4.7.0.2)
  hammerjs-rails
  i18n-js (~> 3.0)
  introjs-rails
--- a/5
+++ b/5
@ -83,7 +83,10 @@ integration-tests:
 	@$(MAKE) rails cmd="bundle exec cucumber"

 tests-ci:
-	@docker-compose run -e ENABLE_EMAIL_CONFIRMATIONS=false -e MAILER_PORT=$MAILER_PORT -e SMTP_DOMAIN=$SMTP_DOMAIN -e SMTP_USERNAME=$SMTP_USERNAME -e SMTP_PASSWORD=$SMTP_PASSWORD -e SMTP_ADDRESS=$SMTP_ADDRESS -e PAPERCLIP_HASH_SECRET=PAPERCLIP_HASH_SECRET -e MAIL_SERVER_URL=localhost -e PAPERCLIP_STORAGE=filesystem -e ENABLE_TUTORIAL=false -e ENABLE_RECAPTCHA=false -e ENABLE_USER_CONFIRMATION=false -e ENABLE_USER_REGISTRATION=true --rm web bash -c "bundle install && rake db:create db:migrate && rake db:migrate RAILS_ENV=test && yarn install && bundle exec rspec && bundle exec cucumber"
+	@docker-compose run --rm web bash -c "bundle install && npm install"
+	@docker-compose up -d webpack
+	@docker-compose ps
+	@docker-compose run -e ENABLE_EMAIL_CONFIRMATIONS=false -e MAILER_PORT=$MAILER_PORT -e SMTP_DOMAIN=$SMTP_DOMAIN -e SMTP_USERNAME=$SMTP_USERNAME -e SMTP_PASSWORD=$SMTP_PASSWORD -e SMTP_ADDRESS=$SMTP_ADDRESS -e PAPERCLIP_HASH_SECRET=PAPERCLIP_HASH_SECRET -e MAIL_SERVER_URL=localhost -e PAPERCLIP_STORAGE=filesystem -e ENABLE_TUTORIAL=false -e ENABLE_RECAPTCHA=false -e ENABLE_USER_CONFIRMATION=false -e ENABLE_USER_REGISTRATION=true --rm web bash -c "rake db:create db:migrate && rake db:migrate RAILS_ENV=test && npm install && bundle exec rspec && bundle exec cucumber"

 console:
 	@$(MAKE) rails cmd="rails console"
--- a/app/assets/javascripts/assets.js
+++ b/app/assets/javascripts/assets.js
@ -25,29 +25,22 @@ function setupAssetsLoading() {
          $el.next().hide();
          $el.html("");

-          if (data.type === "image") {
+          if (data.type === 'image') {
            $el.html(
-              "<a class='image-preview-link' id='modal_link" +
+              "<a class='file-preview-link' id='modal_link" +
              data['asset-id'] + "' data-status='asset-present' " +
-              "href='" + data['download-url'] + "'>" +
-              "<img src='" + data['image-tag-url'] + "' data-preview-url='" +
-              data['preview-url'] + "'><p>" +
+              "href='" + data['download-url'] + "' data-preview-url='" +
+              data['preview-url'] + "'>" +
+              "<img src='" + data['image-tag-url'] + "'><p>" +
              data.filename + '</p></a>'
            );
-          } else if (data.type === 'wopi') {
-            if (data['wopi-edit']) {
-              wopiBtns = data['wopi-file-name'] +
-                         data['wopi-view'] +
-                         data['wopi-edit'];
-            } else {
-              wopiBtns = data['wopi-file-name'] +
-                         data['wopi-view'];
-            }
-            $el.html(wopiBtns);
          } else {
            $el.html(
-              "<a href='" + data['download-url'] + "'><p>" +
-              data.filename + "</p></a>"
+              "<a class='file-preview-link' id='modal_link" +
+              data['asset-id'] + "' data-status='asset-present' " +
+              "href='" + data['download-url'] + "' data-preview-url='" +
+              data['preview-url'] + "'><p>" +
+              data.filename + '</p></a>'
            );
          }
          animateSpinner(null, false);
--- a/app/assets/javascripts/sitewide/file_preview.js
+++ b/app/assets/javascripts/sitewide/file_preview.js
@ -0,0 +1,58 @@
+(function(global) {
+  'use strict';
+
+  global.initPreviewModal = function initPreviewModal() {
+    var name;
+    var url;
+    var downloadUrl;
+    $('.file-preview-link').off('click');
+    $('.file-preview-link').click(function(e) {
+      e.preventDefault();
+      name = $(this).find('p').text();
+      url = $(this).data('preview-url');
+      downloadUrl = $(this).attr('href');
+      openPreviewModal(name, url, downloadUrl);
+    });
+  }
+
+  function openPreviewModal(name, url, downloadUrl) {
+    var modal = $('#filePreviewModal');
+    $.ajax({
+      url: url,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data) {
+        modal.find('.file-preview-container').empty();
+        modal.find('.file-wopi-controls').empty();
+        if (data.hasOwnProperty('wopi-controls')) {
+          modal.find('.file-wopi-controls').html(data['wopi-controls']);
+        }
+        var link = modal.find('.file-download-link');
+        link.attr('href', downloadUrl);
+        link.attr('data-no-turbolink', true);
+        link.attr('data-status', 'asset-present');
+        if (data['type'] === 'image') {
+          modal.find('.file-preview-container')
+               .append($('<img>')
+                 .attr('src', data['large-preview-url'])
+                 .attr('alt', name)
+                 .click(function(ev) {
+                   ev.stopPropagation();
+                 })
+               );
+        } else {
+          modal.find('.file-preview-container').html(data['preview-icon']);
+        }
+        modal.find('.file-name').text(name);
+        modal.find('.modal-body').click(function() {
+          modal.modal('hide');
+        });
+        modal.modal();
+        $('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
+      },
+      error: function(ev) {
+        // TODO
+      }
+    });
+  }
+})(window);
--- a/app/assets/javascripts/sitewide/image_preview.js
+++ b/app/assets/javascripts/sitewide/image_preview.js
@ -1,48 +0,0 @@
-(function(global) {
-  'use strict';
-
-  global.initPreviewModal = function initPreviewModal() {
-    var name, url, downloadUrl, description;
-    $('.image-preview-link').off();
-    $('.image-preview-link').click(function(e) {
-      e.preventDefault();
-      name = $(this).find('p').text();
-      url = $(this).find('img').data('preview-url');
-      downloadUrl = $(this).attr('href');
-      description = $(this).data('description');
-      openPreviewModal(name, url, downloadUrl, description);
-    });
-  }
-
-  function openPreviewModal(name, url, downloadUrl, description) {
-    var modal = $('#imagePreviewModal');
-    $.ajax({
-      url: url,
-      type: 'GET',
-      dataType: 'json',
-      success: function(data) {
-        modal.find('.modal-body img').remove();
-        modal.find('.image-name').text(name);
-        var link = modal.find('.image-download-link');
-        link.attr('href', downloadUrl);
-        link.attr('data-no-turbolink', true);
-        link.attr('data-status', 'asset-present');
-        modal.find('.modal-body').append($('<img>')
-                                 .attr('src', data['large-preview-url'])
-                                 .attr('alt', name)
-                                 .click(function(ev) {
-                                   ev.stopPropagation();
-                                 }));
-        modal.find('.modal-footer .image-description').text(description);
-        modal.find('.modal-body').click(function() {
-          modal.modal('hide');
-        });
-        modal.modal();
-        $('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
-      },
-      error: function(ev) {
-        // TODO
-      }
-    });
-  }
-})(window);
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@ -20,5 +20,4 @@
@import "handsontable.full.min";
@import "ajax-bootstrap-select.min";
@import "extend/bootstrap";
-@import "font-awesome";
@import "themes/scinote";
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@ -1270,7 +1270,7 @@ table.dataTable {
 }

 // Image preview modal
-.modal-image-preview {
+.modal-file-preview {
  background: transparent;
  font-size: $font-size-large;
  padding-right: 0 !important;
@ -1284,6 +1284,14 @@ table.dataTable {
    float: right;
  }

+  .file-wopi-controls {
+    display: inline-block;
+
+    .btn {
+      margin: 0 15px;
+    }
+  }
+
  .modal-dialog {
    height: 100%;
    margin: 0;
@ -1301,6 +1309,24 @@ table.dataTable {
    width: auto;
  }

+  .file-preview-container {
+    align-items: center;
+    background-color: $color-white;
+    color: $gray-dark;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    text-align: center;
+    width: 60%;
+
+    .file-name {
+      color: $color-black;
+      margin: 30px 0;
+    }
+  }
+
  img {
    height: auto;
    max-width: 100%;
@ -1315,6 +1341,11 @@ table.dataTable {
    background: $color-black;
    border: 0;
    height: 60px;
+    text-align: center;
+
+    .file-name {
+      float: left;
+    }
  }

  .modal-body {
@ -1325,6 +1356,7 @@ table.dataTable {
    height: calc(100% - 120px);
    justify-content: center;
    overflow: hidden;
+    padding: 0;
  }

  .modal-footer {
@ -1337,7 +1369,7 @@ table.dataTable {
    width: 100%;
  }

-  .image-download-link {
+  .file-download-link {
    color: $color-white;
    display: inline-block;
    float: right;
--- a/app/controllers/assets_controller.rb
+++ b/app/controllers/assets_controller.rb
@ -7,7 +7,6 @@ class AssetsController < ApplicationController
  include ActionView::Context
  include InputSanitizeHelper
  include FileIconsHelper
-  include WopiHelper

  before_action :load_vars
  before_action :check_read_permission, except: :file_present
@ -31,32 +30,55 @@ class AssetsController < ApplicationController
          render json: {
            'asset-id' => @asset.id,
            'image-tag-url' => @asset.url(:medium),
-            'preview-url' => large_image_url_asset_path(@asset),
+            'preview-url' => asset_file_preview_path(@asset),
            'filename' => truncate(@asset.file_file_name,
                                   length:
                                     Constants::FILENAME_TRUNCATION_LENGTH),
            'download-url' => download_asset_path(@asset),
-            'type' => asset_data_type(@asset),
-            'wopi-file-name' => wopi_asset_file_name(@asset, true),
-            'wopi-edit' => (wopi_asset_edit_button(@asset) if wopi_file?(@asset)),
-            'wopi-view' => (wopi_asset_view_button(@asset) if wopi_file?(@asset))
+            'type' => asset_data_type(@asset)
          }, status: 200
        end
      end
    end
  end

-  def large_image_url
+  def file_preview
+    response_json = {
+      'type' => (@asset.is_image? ? 'image' : 'file'),
+
+      'filename' => truncate(@asset.file_file_name,
+                             length:
+                               Constants::FILENAME_TRUNCATION_LENGTH),
+      'download-url' => download_asset_path(@asset)
+    }
+
+    if @asset.is_image?
+      response_json['large-preview-url'] = @asset.url(:large)
+    else
+      response_json['preview-icon'] = render_to_string(
+        partial: 'shared/file_preview_icon.html.erb',
+        locals: { asset: @asset }
+      )
+    end
+
+    if wopi_file?(@asset)
+      can_edit =
+        if @assoc.class == Step
+          can_manage_protocol_in_module?(@protocol) ||
+            can_manage_protocol_in_repository?(@protocol)
+        elsif @assoc.class == Result
+          can_manage_module?(@my_module)
+        elsif @assoc.class == RepositoryCell
+          # TBD
+        end
+      response_json['wopi-controls'] = render_to_string(
+        partial: 'shared/file_wopi_controlls.html.erb',
+        locals: { asset: @asset, can_edit: can_edit }
+      )
+    end
    respond_to do |format|
      format.json do
-        render json: {
-          'large-preview-url' => @asset.url(:large),
-          'filename' => truncate(@asset.file_file_name,
-                                 length:
-                                   Constants::FILENAME_TRUNCATION_LENGTH),
-          'download-url' => download_asset_path(@asset),
-          'type' => (@asset.is_image? ? 'image' : 'file')
-        }
+        render json: response_json
      end
    end
  end
--- a/app/datatables/protocol_linked_children_datatable.rb
+++ b/app/datatables/protocol_linked_children_datatable.rb
@ -61,7 +61,7 @@ class ProtocolLinkedChildrenDatatable < CustomDatatable
      locals: { project: record.my_module.experiment.project }
    )
    res += '</li>'
-    res += "<li><i class='fa fa-flask'></i>&nbsp;"
+    res += "<li><i class='fas fa-flask'></i>&nbsp;"
    res += @controller.render_to_string(
      partial: 'search/results/partials/experiment_text.html.erb',
      locals: { experiment: record.my_module.experiment }
--- a/app/helpers/file_icons_helper.rb
+++ b/app/helpers/file_icons_helper.rb
@ -4,6 +4,26 @@ module FileIconsHelper
    %w(csv ods xls xlsb xlsm xlsx odp pot potm potx pps ppsm ppsx ppt pptm pptx doc docm docx dot dotm dotx odt rtf).include?(file_ext)
  end

+  # For showing next to file
+  def file_fa_icon_class(asset)
+    file_ext = asset.file_file_name.split('.').last
+    if %w(doc docm docx dot dotm dotx odt rtf).include?(file_ext)
+      fa_class = 'fa-file-word'
+    elsif %w(csv ods xls xlsb xlsm xlsx).include?(file_ext)
+      fa_class = 'fa-file-excel'
+    elsif %w(odp pot potm potx pps ppsm ppsx ppt pptm pptx).include?(file_ext)
+      fa_class = 'fa-file-powerpoint'
+    end
+
+    # Now check for custom mappings or possible overrides
+    if Extends::FILE_ICON_MAPPINGS[file_ext]
+      fa_class = Extends::FILE_FA_ICON_MAPPINGS[file_ext]
+    end
+
+    fa_class = 'fa-file' if fa_class.blank?
+    fa_class
+  end
+
  # For showing next to file
  def file_extension_icon(asset)
    file_ext = asset.file_file_name.split('.').last
--- a/app/helpers/wopi_helper.rb
+++ b/app/helpers/wopi_helper.rb
@ -1,75 +0,0 @@
-module WopiHelper
-  def wopi_result_view_file_button(result)
-    if can_read_experiment?(result.my_module.experiment) &&
-       result.asset.can_perform_action('view')
-      link_to view_asset_url(id: result.asset),
-              class: 'btn btn-default btn-sm',
-              target: '_blank',
-              style: 'display: inline-block' do
-        "#{file_application_icon(
-          result.asset
-        )} #{wopi_button_text(result.asset, 'view')}".html_safe
-      end
-    end
-  end
-
-  def wopi_result_edit_file_button(result)
-    if can_manage_module?(result.my_module) &&
-       result.asset.can_perform_action('edit')
-      link_to edit_asset_url(id: result.asset),
-              class: 'btn btn-default btn-sm',
-              target: '_blank',
-              style: 'display: inline-block' do
-        "#{file_application_icon(
-          result.asset
-        )} #{wopi_button_text(result.asset, 'edit')}".html_safe
-      end
-    end
-  end
-
-  def wopi_asset_view_button(asset)
-    if asset.can_perform_action('view')
-      link_to view_asset_url(id: asset),
-              class: 'btn btn-default btn-sm',
-              target: '_blank',
-              style: 'display: inline-block' do
-        "#{file_application_icon(asset)} #{wopi_button_text(asset, 'view')}"
-          .html_safe
-      end
-    end
-  end
-
-  def wopi_asset_edit_button(asset)
-    if asset.can_perform_action('edit')
-      link_to edit_asset_url(id: asset),
-              class: 'btn btn-default btn-sm',
-              target: '_blank',
-              style: 'display: inline-block' do
-        "#{file_application_icon(
-          asset
-        )} #{wopi_button_text(asset, 'edit')}".html_safe
-      end
-    end
-  end
-
-  def wopi_asset_file_name(asset, link = false)
-    html = '<p style="display: inline-block">'
-    html += "#{file_extension_icon(asset)}&nbsp;"
-    if link
-      html += link_to download_asset_path(asset),
-                      data: { no_turbolink: true,
-                              id: true,
-                              status: 'asset-present' } do
-                                truncate(
-                                  asset.file_file_name,
-                                  length: Constants::FILENAME_TRUNCATION_LENGTH
-                                )
-                              end
-    else
-      html += truncate(asset.file_file_name,
-                       length: Constants::FILENAME_TRUNCATION_LENGTH)
-    end
-    html += '&nbsp;</p>'
-    sanitize_input(html, %w(img a))
-  end
-end
--- a/app/javascript/packs/fontawesome.scss
+++ b/app/javascript/packs/fontawesome.scss
@ -0,0 +1,4 @@
+ $fa-font-path: "~@fortawesome/fontawesome-free-webfonts/webfonts/";
+
+@import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
--- a/app/javascript/packs/styles.scss
+++ b/app/javascript/packs/styles.scss
@ -1,8 +1,6 @@
-$fa-font-path: "~font-awesome/fonts/";
 $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

@import "~bootstrap-sass/assets/stylesheets/bootstrap";
-@import "~font-awesome/scss/font-awesome";
@import "~react-bootstrap-table/dist/react-bootstrap-table.min";
@import "react-tagsinput/react-tagsinput.css";
@import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
--- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx
+++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx
@ -25,12 +25,12 @@ const NotificationImage = ({className, type, avatar}: Props) => {
      ),
      deliver: (
          <span className="deliver">
-              <i className="fa fa-truck" />
+              <i className="fas fa-truck" />
          </span>
      ),
      assignment: (
          <span className="assignment">
-              <i className="fa fa-newspaper-o" />
+              <i className="fas fa-newspaper-o" />
          </span>
      )
  }
--- a/app/javascript/src/components/Navigation/components/NotificationsDropdown.jsx
+++ b/app/javascript/src/components/Navigation/components/NotificationsDropdown.jsx
@ -141,7 +141,7 @@ class NotificationsDropdown extends Component {
              this.dropdown = el;
            }}
          >
-            <i className="fa fa-bell" />&nbsp;
+            <i className="fas fa-bell" />&nbsp;
            <span className="visible-xs-inline visible-sm-inline">
              <FormattedMessage id="navbar.notifications_label" />
            </span>
--- a/app/javascript/src/components/Navigation/components/TeamSwitch.jsx
+++ b/app/javascript/src/components/Navigation/components/TeamSwitch.jsx
@ -80,7 +80,7 @@ class TeamSwitch extends Component<Props, State> {
        onClick={this.setTeams}
        title={
          <span>
-            <i className="fa fa-users" />&nbsp;{this.props.current_team.name}
+            <i className="fas fa-users" />&nbsp;{this.props.current_team.name}
          </span>
        }
        id="team-switch"
--- a/app/javascript/src/components/Navigation/index.jsx
+++ b/app/javascript/src/components/Navigation/index.jsx
@ -107,7 +107,7 @@ class Navigation extends Component {
            </NavItem>
            <NavItem eventKey={3}>
              <i
-                className="fa fa-cubes"
+                className="fas fa-cubes"
                aria-hidden="true"
                title="Repositories"
              />&nbsp;
--- a/app/javascript/src/components/Spinner.jsx
+++ b/app/javascript/src/components/Spinner.jsx
@ -24,7 +24,7 @@ export default (props: { spinner_on: boolean }) => {
    spinner = (
      <Wrapper>
        <div className="center-box">
-          <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />
+          <i className="fas fa-spinner fa-spin fa-3x" aria-hidden="true" />
        </div>
      </Wrapper>
    );
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@ -75,7 +75,7 @@ class SettingsPreferences extends Component<Props, State> {
              type={ASSIGNMENT_NOTIFICATION}
              title="settings_page.assignement"
              subtitle="settings_page.assignement_msg"
-              iconClasses="fa fa-newspaper-o"
+              iconClasses="fas fa-newspaper-o"
              inAppNotification={this.state.assignments_notification}
              emailNotification={this.state.assignments_email_notification}
              iconBackground={MAIN_COLOR_BLUE}
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -11,6 +11,7 @@
    <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
    <%= favicon_link_tag "favicon-32.png", type: "image/png", size: "32x32" %>
    <%= favicon_link_tag "favicon-48.png", type: "image/png", size: "48x48" %>
+    <%= stylesheet_pack_tag 'fontawesome' %>

    <%= csrf_meta_tags %>
  </head>
--- a/app/views/my_modules/_result_user_generated.html.erb
+++ b/app/views/my_modules/_result_user_generated.html.erb
@ -3,5 +3,5 @@
 <% elsif result.is_table %>
  <%= render partial: "results/result_table.html.erb", locals: {result: result} %>
 <% elsif result.is_asset %>
-  <%= render partial: "results/result_asset.html.erb", locals: {result: result} %>
+  <%= render partial: "shared/asset_link", locals: { asset: result.asset }, formats: :html %>
 <% end %>
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@ -44,7 +44,7 @@
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>

 <!-- Image preview modal -->
-<%= render partial: "shared/image_preview_modal.html.erb" %>
+<%= render partial: "shared/file_preview_modal.html.erb" %>

 <!-- Complete task modal -->
 <%= render partial: 'my_modules/complete_task_modal.html.erb' %>
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@ -41,7 +41,7 @@

 <div style="height: 15px;"></div>

-<%= render partial: "shared/image_preview_modal.html.erb" %>
+<%= render partial: "shared/file_preview_modal.html.erb" %>

 <div id="results" data-module-id="<%= @my_module.id %>">
 <% ordered_result_of(@my_module).each do |result| %>
--- a/app/views/projects/show/_new_experiment.html.erb
+++ b/app/views/projects/show/_new_experiment.html.erb
@ -6,11 +6,11 @@

    </div>
    <div class="panel-body">
-      <%= link_to fa_icon('plus'),
-                    new_project_experiment_url(@project),
-                    remote: true,
-                    class: 'big-plus' %>
-
+      <%= link_to new_project_experiment_url(@project),
+                  remote: true,
+                  class: 'big-plus' do %>
+        <i class="fas fa-plus"></i>
+      <% end %>
    </div>
  </div>
 </div>
--- a/app/views/protocols/edit.html.erb
+++ b/app/views/protocols/edit.html.erb
@ -10,7 +10,7 @@

 <%= render partial: "protocols/steps.html.erb" %>

-<%= render partial: "shared/image_preview_modal.html.erb" %>
+<%= render partial: "shared/file_preview_modal.html.erb" %>

 <div class="hidden" data-role="updated-at-label-url" data-url="<%= updated_at_label_protocol_path(@protocol) %>"></div>

--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@ -146,7 +146,7 @@
 <%= render partial: "protocols/index/import_results_modal.html.erb" %>
 <%= render partial: "protocols/index/linked_children_modal.html.erb" %>
 <%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
-<%= render partial: "shared/image_preview_modal.html.erb" %>
+<%= render partial: "shared/file_preview_modal.html.erb" %>

 <%= render partial: "protocols/import_export/import_elements.html.erb" %>

--- a/app/views/protocols/index/_protocol_preview_modal_body.html.erb
+++ b/app/views/protocols/index/_protocol_preview_modal_body.html.erb
@ -122,11 +122,11 @@
                              <% else %>
                                <% if asset.is_image? %>
                                  <%= link_to download_asset_path(asset),
-                                    class: 'image-preview-link',
+                                    class: 'file-preview-link',
                                    id: "modal_link#{asset.id}",
                                    data: {no_turbolink: true, id: true, status: "asset-present",
                                      description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
-                                    <%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
+                                    <%= image_tag asset.url(:medium), data: {'preview-url': asset_file_preview_path(asset)} %>
                                    <p><%= truncate(asset.file_file_name,
                                                    length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
                                  <% end %>
--- a/app/views/reports/elements/_experiment_element.html.erb
+++ b/app/views/reports/elements/_experiment_element.html.erb
@ -6,7 +6,7 @@
  data-id='{ "experiment_id": <%= experiment.id %> }'
  data-scroll-id="<%= experiment.id %>"
  data-modal-title="<%=t "projects.reports.elements.modals.experiment_contents.head_title",
-    experiment: experiment.name %>" data-name="<%= name %>" data-icon-class="fa fa-flask">
+    experiment: experiment.name %>" data-name="<%= name %>" data-icon-class="fas fa-flask">
  <div class="report-element-header">
    <div class="row">
      <div class="pull-left user-time">
@ -21,7 +21,7 @@
    <div class="row">
      <div class="pull-left experiment-name">
        <h4>
-          <%= fa_icon 'flask' %>
+          <i class="fas fa-flask"></i>
          <%= name %></h4>
      </div>
    </div>
--- a/app/views/reports/elements/_my_module_repository_element.html.erb
+++ b/app/views/reports/elements/_my_module_repository_element.html.erb
@ -4,11 +4,11 @@
 <% if order.blank? and @order.present? then order = @order end %>
 <% timestamp = Time.current + 1.year - 1.days %>
 <% rows_json = my_module.repository_json_hot(repository.id, order) %>
-<div class="report-element report-module-repository-element" data-sort-hot="1" data-ts="<%= timestamp.to_i %>" data-type="my_module_repository" data-id='{ "my_module_id": <%= my_module.id %>, "repository_id": <%= repository.id %> }' data-scroll-id="<%= "#{my_module.id}_#{repository.id}" %>" data-order="<%= order == :asc ? "asc" : "desc" %>" data-name="<%= repository.name %>" data-icon-class="fa fa-cubes">
+<div class="report-element report-module-repository-element" data-sort-hot="1" data-ts="<%= timestamp.to_i %>" data-type="my_module_repository" data-id='{ "my_module_id": <%= my_module.id %>, "repository_id": <%= repository.id %> }' data-scroll-id="<%= "#{my_module.id}_#{repository.id}" %>" data-order="<%= order == :asc ? "asc" : "desc" %>" data-name="<%= repository.name %>" data-icon-class="fas fa-cubes">
  <div class="report-element-header">
    <div class="row">
      <div class="pull-left repository-icon">
-        <span class="fa fa-cubes"></span>
+        <i class="fas fa-cubes"></i>
      </div>
      <div class="pull-left repository-name">
        <%=t "projects.reports.elements.module_repository.name", repository: repository.name, my_module: my_module.name %>
--- a/app/views/repositories/_repository_row_info_modal.html.erb
+++ b/app/views/repositories/_repository_row_info_modal.html.erb
@ -50,7 +50,7 @@
                        <%= render partial: 'search/results/partials/project_text.html.erb',
                                  locals: { project: element.my_module.experiment.project } %>
                      </li>
-                      <li><i class='fa fa-flask'></i>&nbsp;
+                      <li><i class='fas fa-flask'></i>&nbsp;
                        <%= render partial: 'search/results/partials/experiment_text.html.erb',
                                  locals: { experiment: element.my_module.experiment } %>
                      </li>
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@ -85,29 +85,7 @@
                    remote: true %>
      <% end %>
    </div>
-
-    <div id="repository-columns-dropdown" class="dropdown">
-      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
-        <%= t('repositories.columns') %>
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right smart-dropdown" id="repository-columns-list">
-        <% if can_create_repository_columns?(@repository.team) %>
-          <li class="add-new-column-form">
-            <div id="new-column-form" class="form-group" data-action="<%= repository_repository_columns_path(@repository) %>">
-              <div class="input-group">
-                <input class="form-control" id="new-column-name" placeholder="<%= t("repositories.column_new_text") %>">
-                <span class="input-group-btn">
-                  <a id="add-new-column-button" class="btn btn-primary">
-                    <%= t("repositories.column_create") %>
-                  </a>
-                </span>
-              </div>
-            </div>
-          </li>
-        <% end %>
-      </ul>
-    </div>
+    <%= render partial: "columns_reorder_dropdown", formats: :html %>
  </div>
 </div>

--- a/app/views/results/_result_asset.html.erb
+++ b/app/views/results/_result_asset.html.erb
@ -1,34 +0,0 @@
-<% if can_read_experiment?(result.my_module.experiment) %>
-  <% if result.asset.file.processing? %>
-    <span data-status='asset-loading'
-      data-present-url='<%= file_present_asset_path(result.asset) %>'>
-      <%= image_tag 'medium/processing.gif' %>
-    </span>
-  <% else %>
-    <% if result.asset.is_image? %>
-      <%= link_to download_asset_path(result.asset),
-        class: 'image-preview-link',
-        id: "modal_link#{result.asset.id}",
-        data: {no_turbolink: true,
-          description: "#{truncate(result.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
-        <%= image_tag result.asset.url(:medium), data: {'preview-url': large_image_url_asset_path(result.asset)} %>
-        <p><%= truncate(result.asset.file_file_name,
-        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
-      <% end %>
-    <% else %>
-      <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %>
-        <% if wopi_file?(result.asset) %>
-          <%= wopi_asset_file_name(result.asset) %>
-        <% else %>
-          <p>
-            <%= file_extension_icon(result.asset) %>
-            <%= truncate(result.asset.file_file_name,
-                         length: Constants::FILENAME_TRUNCATION_LENGTH) %>
-          </p>
-        <% end %>
-      <% end %>
-      <%= wopi_result_view_file_button(result) %>
-      <%= wopi_result_edit_file_button(result) %>
-    <% end %>
-  <% end %>
-<% end %>
--- a/app/views/samples/_info_sample_modal.html.erb
+++ b/app/views/samples/_info_sample_modal.html.erb
@ -60,7 +60,7 @@
                        <%= render partial: 'search/results/partials/project_text.html.erb',
                                  locals: { project: mod.experiment.project } %>
                      </li>
-                      <li><i class='fa fa-flask'></i>&nbsp;
+                      <li><i class='fas fa-flask'></i>&nbsp;
                        <%= render partial: 'search/results/partials/experiment_text.html.erb',
                                  locals: { experiment: mod.experiment } %>
                      </li>
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@ -68,7 +68,7 @@
                         match_case: @search_case, utf8: '✓',
                         search_id: @search_id}.to_query %>">
            <span class="badge pull-right"><%= @experiment_search_count %></span>
-            <%= fa_icon 'flask' %>
+            <i class="fas fa-flask"></i>
            <%= t'Experiments' %>
          </a>
        </li>
@ -230,7 +230,7 @@

        <% @repository_search_count.each do |team, results| %>
          <li class="repositories-team <%= 'active' if results[:count] > 0 %>">
-            <span class="fa fa-cubes"></span>
+            <i class="fas fa-cubes"></i>
            <%= t('Repositories_team', team: team) %>
          </li>
          <% results[:repositories].each do |repository, values| %>
--- a/app/views/search/results/_experiments.html.erb
+++ b/app/views/search/results/_experiments.html.erb
@ -1,6 +1,6 @@
 <% results.each do |experiment| %>
  <h5>
-    <%= fa_icon 'flask' %>
+    <i class="fas fa-flask"></i>
    <%= render partial: "search/results/partials/experiment_text.html.erb",
               locals: { experiment: experiment, query: search_query } %>
  </h5>
--- a/app/views/search/results/_repositories.html.erb
+++ b/app/views/search/results/_repositories.html.erb
@ -1,6 +1,6 @@
 <% results.each do |repository_row| %>
  <h5>
-    <span class="fa fa-cubes"></span>
+    <i class="fas fa-cubes"></i>
    <%=t "search.index.repositories.repository_row" %>
    <%= highlight repository_row.name, search_query.strip.split(/\s+/) %>
  </h5>
--- a/app/views/shared/_asset_link.html.erb
+++ b/app/views/shared/_asset_link.html.erb
@ -0,0 +1,21 @@
+<% if asset.file_present %>
+  <% if asset.file.processing? %>
+    <span data-status='asset-loading'
+          data-present-url='<%= file_present_asset_path(asset.id) %>'>
+      <%= image_tag 'medium/processing.gif' %>
+    </span>
+  <% else %>
+    <%= link_to download_asset_path(asset),
+      class: 'file-preview-link',
+      id: "modal_link#{asset.id}",
+      data: { no_turbolink: true, id: true, status: 'asset-present', 'preview-url': asset_file_preview_path(asset) } do %>
+      <% if asset.is_image? %>
+        <%= image_tag asset.url(:medium) %>
+      <% end %>
+      <p><%= truncate(asset.file_file_name,
+                      length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= image_tag 'medium/processing.gif' %>
+<% end %>
--- a/app/views/shared/_file_preview_icon.html.erb
+++ b/app/views/shared/_file_preview_icon.html.erb
@ -0,0 +1,4 @@
+<div>
+  <i class="fas fa-10x <%= file_fa_icon_class(asset) %>"></i>
+  <h3 class="file-name"></h3>
+</div>
--- a/app/views/shared/_image_preview_modal.html.erb
+++ b/app/views/shared/_image_preview_modal.html.erb
@ -1,18 +1,19 @@
-<div id="imagePreviewModal" class="modal modal-image-preview" role="dialog" tabindex="-1" aria-labelledby="imagePreviewModal" aria-hidden="true">
+<div id="filePreviewModal" class="modal modal-file-preview" role="dialog" tabindex="-1" aria-labelledby="filePreviewModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="preview-close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>
-        <span class="image-name"></span>
-        <a class="image-download-link" href='#'>
+        <span class="file-name"></span>
+        <span class="file-wopi-controls"></span>
+        <a class="file-download-link" href='#'>
          <p><span class="glyphicon glyphicon-download-alt"></span> <%= t('Download')%></p>
        </a>
      </div>
      <div class="modal-body">
-        <img>
+        <div class="file-preview-container">
+        </div>
      </div>
      <div class="modal-footer">
-        <span class="image-description"></span>
      </div>
    </div>
  </div>
--- a/app/views/shared/_file_wopi_controlls.html.erb
+++ b/app/views/shared/_file_wopi_controlls.html.erb
@ -0,0 +1,16 @@
+<%= link_to view_asset_url(id: asset),
+        class: 'btn btn-default btn-sm',
+        target: '_blank',
+        style: 'display: inline-block' do %>
+  <%= file_application_icon(asset) %>
+  <%= wopi_button_text(asset, 'view') %>
+<% end %>
+<% if can_edit %>
+  <%= link_to edit_asset_url(id: asset),
+          class: 'btn btn-default btn-sm',
+          target: '_blank',
+          style: 'display: inline-block' do %>
+    <%= file_application_icon(asset) %>
+    <%= wopi_button_text(asset, 'edit') %>
+  <% end %>
+<% end %>
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/app/views/shared/_left_menu_bar.html.erb
@ -21,7 +21,7 @@
    </li>
    <li class="<%= "active" if repositories_are_selected? %>">
      <%= link_to repositories_path, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
-        <span class="fa fa-cubes" aria-hidden="true"></span>
+        <span class="fas fa-cubes" aria-hidden="true"></span>
        <span><%= t('left_menu_bar.repositories') %></span>
      <% end %>
    </li>
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@ -128,7 +128,7 @@
             aria-haspopup="true"
             aria-expanded="false"
             data-href="<%= recent_notifications_url(current_user) %>">
-            <%= fa_icon 'bell'%>
+            <i class="fas fa-bell"></i>
            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.notifications') %></span>
            <span id="count-notifications"
                  data-href="<%= unseen_notification_url(current_user) %>">
--- a/app/views/shared/_secondary_navigation.html.erb
+++ b/app/views/shared/_secondary_navigation.html.erb
@ -41,16 +41,16 @@
        <% end %>
        <% if experiment_page? %>
          <li class="active">
-            <%= fa_icon 'fa-flask' %>
+            <i class="fas fa-flask"></i>
          </li>
        <% elsif module_page? %>
          <li>
            <% if can_read_experiment?(@experiment) %>
              <%= link_to canvas_experiment_path(@experiment) do %>
-                <%= fa_icon 'fa-flask' %>
+                <i class="fas fa-flask"></i>
              <% end %>
            <% else %>
-              <%= fa_icon 'fa-flask' %>
+              <i class="fas fa-flask"></i>
            <% end %>
          </li>
          <li class="active">
@ -58,7 +58,7 @@
          </li>
        <% elsif experiment_page? %>
          <li class="active">
-            <%= fa_icon 'fa-flask' %>
+            <i class="fas fa-flask"></i>
          </li>
        <% end %>
      </ul>
--- a/app/views/steps/_form_assets.html.erb
+++ b/app/views/steps/_form_assets.html.erb
@ -11,45 +11,6 @@
    </div>
  </div>
  <div class="panel-body">
-    <% if ff.object.file.exists? %>
-      <% if can_read_protocol_in_module?(@protocol) || can_read_protocol_in_repository?(@protocol) %>
-        <% if ff.object.is_image? %>
-          <%= link_to download_asset_path(ff.object),
-            class: 'image-preview-link',
-            id: "modal_link#{ff.object.id}",
-            data: {no_turbolink: true, id: true, status: "asset-present",
-              description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
-              <% if ff.object.is_image? %>
-                <%= image_tag ff.object.url(:medium), data: {'preview-url': large_image_url_asset_path(ff.object)} %>
-                <p><%= truncate(ff.object.file_file_name,
-                                length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
-              <% else %>
-                <p>
-                  <%= file_extension_icon(ff.object) %>
-                  <%= ff.object.file_file_name %>
-                </p>
-              <% end %>
-          <% end %>
-        <% else %>
-          <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
-            <% if ff.object.is_image? %>
-              <%= image_tag ff.object.url(:medium) %>
-              <p><%= truncate(ff.object.file_file_name,
-                              length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
-            <% else %>
-              <p>
-                <%= file_extension_icon(ff.object) %>
-                <%= ff.object.file_file_name %>
-              </p>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% else %>
-        <%= image_tag image_tag ff.object.url(:medium) if ff.object.is_image? %>
-        <p><%= ff.object.file_file_name %></p>
-      <% end %>
-    <% else %>
-      <%= ff.file_field :file %>
-    <% end %>
+    <%= render partial: "shared/asset_link", locals: { asset: ff.object }, formats: :html %>
  </div>
 </div>
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@ -83,50 +83,7 @@
              <ul>
                <% assets.each do |asset| %>
                  <li>
-                    <% if can_read_protocol_in_module?(@protocol) ||
-                          can_read_protocol_in_repository?(@protocol) %>
-                      <% if asset.file_present %>
-                        <% if asset.file.processing? %>
-                          <span data-status='asset-loading'
-                                data-present-url='<%= file_present_asset_path(asset) %>'>
-                            <%= image_tag 'medium/processing.gif' %>
-                          </span>
-                        <% else %>
-                          <% if asset.is_image? %>
-                            <%= link_to download_asset_path(asset),
-                              class: 'image-preview-link',
-                              id: "modal_link#{asset.id}",
-                              data: {no_turbolink: true, id: true, status: "asset-present",
-                                description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
-                              <%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
-                              <p><%= truncate(asset.file_file_name,
-                                              length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
-                            <% end %>
-                          <% else %>
-                            <%= render partial: 'steps/wopi_controlls.html.erb', locals: { asset: asset } %>
-                          <% end %>
-                        <% end %>
-                      <% else %>
-                        <span data-status='asset-loading'
-                              data-present-url='<%= file_present_asset_path(asset) %>'>
-                          <%= image_tag 'medium/processing.gif' %>
-                        </span>
-                      <% end %>
-                    <% else %>
-                      <% if asset.file.processing? %>
-                        <span data-status='asset-loading'
-                              data-present-url='<%= file_present_asset_path(asset) %>'>
-                          <%= image_tag 'medium/processing.gif' %>
-                        </span>
-                      <% else %>
-                        <%= image_tag asset.url(:medium) if asset.is_image? %>
-                      <% end %>
-                      <p>
-                        <%= file_extension_icon(asset) %>
-                        <%= truncate(asset.file_file_name,
-                                     length: Constants::FILENAME_TRUNCATION_LENGTH) %>
-                      </p>
-                    <% end %>
+                    <%= render partial: "shared/asset_link", locals: { asset: asset }, formats: :html %>
                  </li>
                <% end %>
              </ul>
--- a/app/views/steps/_wopi_controlls.html.erb
+++ b/app/views/steps/_wopi_controlls.html.erb
@ -1,24 +0,0 @@
-<%= link_to download_asset_path(asset),
-            data: { no_turbolink: true,
-                    id: true,
-                    status: 'asset-present' } do %>
-  <%= image_tag preview_asset_path(asset) if asset.is_image? %>
-
-  <% if wopi_file?(asset) %>
-    <%= wopi_asset_file_name(asset) %>
-  <% else %>
-    <p>
-      <%= file_extension_icon(asset) %>
-      <%= truncate(asset.file_file_name,
-                   length: Constants::FILENAME_TRUNCATION_LENGTH) %>
-    </p>
-  <% end %>
-<% end %>
-<%= wopi_asset_view_button(asset) %>
-<% view_only ||= false %>
-<% if !view_only %>
-  <% if can_manage_protocol_in_module?(@protocol) ||
-        can_manage_protocol_in_repository?(@protocol) %>
-    <%= wopi_asset_edit_button(asset) %>
-  <% end %>
-<% end %>
--- a/app/views/user_notifications/icons/_assignment.html.erb
+++ b/app/views/user_notifications/icons/_assignment.html.erb
@ -1,3 +1,5 @@
 <div class="text-center">
-  <span class="assignment"><%= fa_icon 'newspaper-o' %></span>
+  <span class="assignment">
+    <i class="fas fa-newspaper"></i>
+  </span>
 </div>
--- a/app/views/user_notifications/icons/_deliver.html.erb
+++ b/app/views/user_notifications/icons/_deliver.html.erb
@ -1,3 +1,5 @@
 <div class="text-center">
-  <span class="deliver"><%= fa_icon 'truck' %></span>
+  <span class="deliver">
+    <i class="fas fa-truck"></i>
+  </span>
 </div>
--- a/app/views/users/settings/account/preferences/index.html.erb
+++ b/app/views/users/settings/account/preferences/index.html.erb
@ -69,7 +69,9 @@
                       remote: true) do |f| %>
          <div class="row">
            <div class="col-sm-2">
-              <span class="assignment hidden-sm"><%= fa_icon 'newspaper-o' %></span>
+              <span class="assignment hidden-sm">
+                <i class="fas fa-newspaper"></i>
+              </span>
            </div>
            <div class="col-sm-10">
              <strong><%=t 'notifications.form.assignments' %></strong>
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@ -97,6 +97,9 @@ Rails.application.configure do
  # Enable user registrations
  config.x.enable_user_registration = true

+  # disable sign in with LinkedIn account
+  config.x.linkedin_signin_enabled = false
+
  # prevents compile assets
  config.assets.compile = false
 end
--- a/config/initializers/extends.rb
+++ b/config/initializers/extends.rb
@ -73,4 +73,8 @@ class Extends
  # Hash used for mapping file extensions to custom icons,
  # 'extension' => 'path_to_the_icon'
  FILE_ICON_MAPPINGS = {}
+
+  # Hash used for mapping file extensions to custom font awesome icon classes,
+  # 'extension' => 'fa class'
+  FILE_FA_ICON_MAPPINGS = {}
 end
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -1775,7 +1775,7 @@ en:
    next: "Next"
    skip_tutorial: "Skip tutorial"
    finish_tutorial: "Start using sciNote"
-    tutorial_welcome_title_html: "Welcome to <em>sciNote</em>, your electronic lab notebook. <em>sciNote</em> organizes your work in Projects. Click <strong>Team icon</strong> <span class='fa fa-users'></span> to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the <strong>Sort by</strong> button. <strong>(Step 1/26)</strong>"
+    tutorial_welcome_title_html: "Welcome to <em>sciNote</em>, your electronic lab notebook. <em>sciNote</em> organizes your work in Projects. Click <strong>Team icon</strong> <span class='fas fa-users'></span> to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the <strong>Sort by</strong> button. <strong>(Step 1/26)</strong>"
    create_project_html: "Click here to create a Project and it will appear under the Team you've chosen. Choose public <span class='glyphicon glyphicon-eye-open'></span> if you want everyone from the Team to view the Project or choose private <span class='glyphicon glyphicon-eye-close'></span> so only the people who you invite to the Project can see it. <strong>(Step 2/26)</strong>"
    project_options_html: "In the bottom row of the Project card you can check the latest activity <span class='glyphicon glyphicon-equalizer'></span>, invite collaborators <span class='glyphicon glyphicon-user'></span>, see the notifications <span class='glyphicon glyphicon-bell'></span> and write comments <span class='glyphicon glyphicon-comment'></span>. You can also edit the Project's name and visibility or archive it. You can recall the Project from the Archive <span class='glyphicon glyphicon-briefcase'></span> in the top right side of the Dashboard at any time. <strong>(Step 3/26)</strong>"
    create_experiment_html: "Inside of a Project you can create Experiments. To create one click on this button and edit Experiment’s name and description. <strong>(Step 4/26)</strong>"
--- a/config/routes.rb
+++ b/config/routes.rb
@ -495,9 +495,9 @@ Rails.application.routes.draw do
    # We cannot use 'resources :assets' because assets is a reserved route
    # in Rails (assets pipeline) and causes funky behavior
    get 'files/:id/present', to: 'assets#file_present', as: 'file_present_asset'
-    get 'files/:id/large_url',
-        to: 'assets#large_image_url',
-        as: 'large_image_url_asset'
+    get 'files/:id/preview',
+        to: 'assets#file_preview',
+        as: 'asset_file_preview'
    get 'files/:id/download', to: 'assets#download', as: 'download_asset'
    get 'files/:id/preview', to: 'assets#preview', as: 'preview_asset'
    get 'files/:id/view', to: 'assets#view', as: 'view_asset'
--- a/package-lock.json
+++ b/package-lock.json
@ -4,6 +4,11 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@fortawesome/fontawesome-free-webfonts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.5.tgz",
+      "integrity": "sha512-9JL80WJkSiTdR0AtIz7J2qGIkJxgOB1LAcESYP26cpl2Dfs8iy06NbAGM+e6BINpCT8XO1+fDKjU/LwCsOy8XA=="
+    },
    "abbrev": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@ -1613,6 +1618,7 @@
      "requires": {
        "anymatch": "1.3.0",
        "async-each": "1.0.1",
+        "fsevents": "1.1.3",
        "glob-parent": "2.0.0",
        "inherits": "2.0.3",
        "is-binary-path": "1.0.1",
@ -3667,11 +3673,6 @@
        "debug": "2.6.8"
      }
    },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
    "for-in": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -3740,6 +3741,795 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
+    "fsevents": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
+      "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
+      "optional": true,
+      "requires": {
+        "nan": "2.6.2",
+        "node-pre-gyp": "0.6.39"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "bundled": true,
+          "optional": true
+        },
+        "ajv": {
+          "version": "4.11.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "co": "4.6.0",
+            "json-stable-stringify": "1.0.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.2.9"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "bundled": true,
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "bundled": true,
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true,
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "bundled": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        },
+        "boom": {
+          "version": "2.10.1",
+          "bundled": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.7",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "0.4.2",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true,
+          "optional": true
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "bundled": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "bundled": true,
+          "requires": {
+            "boom": "2.10.1"
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "bundled": true,
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "extend": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true,
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.5",
+            "mime-types": "2.1.15"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.6.1"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "fstream": "1.0.11",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.1.1",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true
+        },
+        "har-schema": {
+          "version": "1.0.5",
+          "bundled": true,
+          "optional": true
+        },
+        "har-validator": {
+          "version": "4.2.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ajv": "4.11.8",
+            "har-schema": "1.0.5"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "bundled": true,
+          "requires": {
+            "boom": "2.10.1",
+            "cryptiles": "2.0.5",
+            "hoek": "2.16.3",
+            "sntp": "1.0.9"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "bundled": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "0.2.0",
+            "jsprim": "1.4.0",
+            "sshpk": "1.13.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true
+        },
+        "ini": {
+          "version": "1.3.4",
+          "bundled": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true,
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true,
+          "optional": true
+        },
+        "json-stable-stringify": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsonify": "0.0.0"
+          }
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "jsonify": {
+          "version": "0.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.4.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.0.2",
+            "json-schema": "0.2.3",
+            "verror": "1.3.6"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "mime-db": {
+          "version": "1.27.0",
+          "bundled": true
+        },
+        "mime-types": {
+          "version": "2.1.15",
+          "bundled": true,
+          "requires": {
+            "mime-db": "1.27.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.39",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.2",
+            "hawk": "3.1.3",
+            "mkdirp": "0.5.1",
+            "nopt": "4.0.1",
+            "npmlog": "4.1.0",
+            "rc": "1.2.1",
+            "request": "2.81.0",
+            "rimraf": "2.6.1",
+            "semver": "5.3.0",
+            "tar": "2.2.1",
+            "tar-pack": "3.4.0"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.0",
+            "osenv": "0.1.4"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "bundled": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "performance-now": {
+          "version": "0.2.0",
+          "bundled": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "bundled": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true,
+          "optional": true
+        },
+        "qs": {
+          "version": "6.4.0",
+          "bundled": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.4.2",
+            "ini": "1.3.4",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.9",
+          "bundled": true,
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "request": {
+          "version": "2.81.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.5",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.1.4",
+            "har-validator": "4.2.1",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.15",
+            "oauth-sign": "0.8.2",
+            "performance-now": "0.2.0",
+            "qs": "6.4.0",
+            "safe-buffer": "5.0.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.2",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.1",
+          "bundled": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.0.1",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.3.0",
+          "bundled": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "bundled": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "sshpk": {
+          "version": "1.13.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "asn1": "0.2.3",
+            "assert-plus": "1.0.0",
+            "bcrypt-pbkdf": "1.0.1",
+            "dashdash": "1.14.1",
+            "ecc-jsbn": "0.1.1",
+            "getpass": "0.1.7",
+            "jodid25519": "1.0.2",
+            "jsbn": "0.1.1",
+            "tweetnacl": "0.14.5"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "bundled": true,
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "bundled": true,
+          "requires": {
+            "block-stream": "0.0.9",
+            "fstream": "1.0.11",
+            "inherits": "2.0.3"
+          }
+        },
+        "tar-pack": {
+          "version": "3.4.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.8",
+            "fstream": "1.0.11",
+            "fstream-ignore": "1.0.5",
+            "once": "1.4.0",
+            "readable-stream": "2.2.9",
+            "rimraf": "2.6.1",
+            "tar": "2.2.1",
+            "uid-number": "0.0.6"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "punycode": "1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true,
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
+        }
+      }
+    },
    "fstream": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@ -5299,6 +6089,14 @@
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.1.tgz",
      "integrity": "sha1-VtoaLRy/AdOLfhr8McELz6GSkWc="
    },
+    "moment-timezone": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.14.tgz",
+      "integrity": "sha1-TrOP+VOLgBCLpGekWPPtQmjM/LE=",
+      "requires": {
+        "moment": "2.19.1"
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
    "webpack-dev-server": "^2.5.1"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.5",
    "autoprefixer": "^7.1.2",
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
@ -57,7 +58,6 @@
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
-    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "immutability-helper": "^2.3.0",
    "intl": "^1.2.5",
--- a/yarn.lock
+++ b/yarn.lock