Fix fa icons [SCI-2217]

Gemfile

@@ -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'

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='far 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 }

app/javascript/packs/fontawesome.scss

@@ -1,4 +1,4 @@
  $fa-font-path: "~@fortawesome/fontawesome-free-webfonts/webfonts/";
 
 @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-regular";
+@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid";

app/javascript/src/components/Navigation/components/NotificationImage.jsx

@@ -25,12 +25,12 @@ const NotificationImage = ({className, type, avatar}: Props) => {
       ),
       deliver: (
           <span className="deliver">
-              <i className="far fa-truck" />
+              <i className="fas fa-truck" />
           </span>
       ),
       assignment: (
           <span className="assignment">
-              <i className="far fa-newspaper-o" />
+              <i className="fas fa-newspaper-o" />
           </span>
       )
   }

app/javascript/src/components/Navigation/components/NotificationsDropdown.jsx

@@ -141,7 +141,7 @@ class NotificationsDropdown extends Component {
               this.dropdown = el;
             }}
           >
-            <i className="far fa-bell" />&nbsp;
+            <i className="fas fa-bell" />&nbsp;
             <span className="visible-xs-inline visible-sm-inline">
               <FormattedMessage id="navbar.notifications_label" />
             </span>

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="far fa-users" />&nbsp;{this.props.current_team.name}
+            <i className="fas fa-users" />&nbsp;{this.props.current_team.name}
           </span>
         }
         id="team-switch"

app/javascript/src/components/Navigation/index.jsx

@@ -107,7 +107,7 @@ class Navigation extends Component {
             </NavItem>
             <NavItem eventKey={3}>
               <i
-                className="far fa-cubes"
+                className="fas fa-cubes"
                 aria-hidden="true"
                 title="Repositories"
               />&nbsp;

app/javascript/src/components/Spinner.jsx

@@ -24,7 +24,7 @@ export default (props: { spinner_on: boolean }) => {
     spinner = (
       <Wrapper>
         <div className="center-box">
-          <i className="far fa-spinner fa-spin fa-3x" aria-hidden="true" />
+          <i className="fas fa-spinner fa-spin fa-3x" aria-hidden="true" />
         </div>
       </Wrapper>
     );

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="far fa-newspaper-o"
+              iconClasses="fas fa-newspaper-o"
               inAppNotification={this.state.assignments_notification}
               emailNotification={this.state.assignments_email_notification}
               iconBackground={MAIN_COLOR_BLUE}

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>

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="far 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>

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="far 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="far 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 %>

app/views/repositories/_repository_row_info_modal.html.erb

@@ -41,7 +41,7 @@
                         <%= render partial: 'search/results/partials/project_text.html.erb',
                                   locals: { project: element.my_module.experiment.project } %>
                       </li>
-                      <li><i class='far 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>

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='far 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>

app/views/search/index.html.erb

@@ -66,7 +66,7 @@
                          whole_word: @search_whole_word, whole_phrase: @search_whole_phrase,
                          match_case: @search_case, utf8: '✓'}.to_query %>">
             <span class="badge pull-right"><%= @experiment_search_count %></span>
-            <%= fa_icon 'flask' %>
+            <i class="fas fa-flask"></i>
             <%= t'Experiments' %>
           </a>
         </li>
@@ -217,7 +217,7 @@
 
         <% @repository_search_count.each do |team, results| %>
           <li class="repositories-team <%= 'active' if results[:count] > 0 %>">
-            <span class="far fa-cubes"></span>
+            <i class="fas fa-cubes"></i>
             <%= t('Repositories_team', team: team) %>
           </li>
           <% results[:repositories].each do |repository, values| %>

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>

app/views/search/results/_repositories.html.erb

@@ -1,6 +1,6 @@
 <% results.each do |repository_row| %>
   <h5>
-    <span class="far 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>

app/views/shared/_file_preview_icon.html.erb

@@ -1,4 +1,4 @@
 <div>
-  <i class="far fa-10x <%= file_fa_icon_class(asset) %>"></i>
+  <i class="fas fa-10x <%= file_fa_icon_class(asset) %>"></i>
   <h3 class="file-name"></h3>
 </div>

app/views/shared/_left_menu_bar.html.erb

@@ -8,7 +8,7 @@
     </li>
     <li class="<%= "active" if repositories_are_selected? %>">
       <%= link_to team_repositories_path(current_team), id: "repositories-link", title: t('left_menu_bar.repositories') do %>
-        <span class="far fa-cubes" aria-hidden="true"></span>
+        <i class="fas fa-cubes" aria-hidden="true"></i>
         <span><%= t('left_menu_bar.repositories') %></span>
       <% end %>
     </li>

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) %>">

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>

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>

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>

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>

config/locales/en.yml

@@ -1730,7 +1730,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='far 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>"