Strip out SASS (#1113)

* Strip out FontAwesome

FontAwesome requires Sass, and it's a pain to use these days.   Getting rid of Font Awesome opens the door to getting rid of Sass...    Let's Kondo this dependency!

* Rationalize boostrap related file names

Mission control 0.6.0 requires dartsass, and we still have regular sassc..  so stay on 0.5.0 for now.

Gemfile

@@ -23,7 +23,6 @@ gem 'devise_invitable', '~> 2.0'
 
 # Using this as it wires in via Sprockets and I can't get npm version to work with the main app.
 # Had no luck with js/svg approach ;-(
-gem 'font-awesome-sass'
 gem 'foreman'
 gem 'gabba'
 gem 'importmap-rails', '~> 2.0'
@@ -33,7 +32,7 @@ gem 'jquery-rails'
 gem 'jquery-ui-rails' # Can we narrow the widgets to load faster?
 gem 'listen', '~> 3.3'
 gem 'local_time'
-gem 'mission_control-jobs', git: 'https://github.com/rails/mission_control-jobs.git', branch: 'main'
+gem 'mission_control-jobs', '~> 0.5.0' # git: 'https://github.com/rails/mission_control-jobs.git', branch: 'main'
 
 gem 'mysql2'
 gem 'omniauth'

Gemfile.lock

@@ -18,22 +18,6 @@ GIT
       sprockets-rails
       tilt
 
-GIT
-  remote: https://github.com/rails/mission_control-jobs.git
-  revision: 3d31bf7ff5653b084e473dc41c60b0df5d969fdb
-  branch: main
-  specs:
-    mission_control-jobs (0.6.0)
-      actioncable (>= 7.1)
-      actionpack (>= 7.1)
-      activejob (>= 7.1)
-      activerecord (>= 7.1)
-      importmap-rails (>= 1.2.1)
-      irb (~> 1.13)
-      railties (>= 7.1)
-      stimulus-rails
-      turbo-rails
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -212,8 +196,6 @@ GEM
     ffi (1.17.0-aarch64-linux-gnu)
     ffi (1.17.0-x86_64-darwin)
     ffi (1.17.0-x86_64-linux-gnu)
-    font-awesome-sass (6.5.2)
-      sassc (~> 2.0)
     foreman (0.88.1)
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
@@ -291,6 +273,16 @@ GEM
       builder
       minitest (>= 5.0)
       ruby-progressbar
+    mission_control-jobs (0.5.0)
+      actioncable (>= 7.1)
+      actionpack (>= 7.1)
+      activejob (>= 7.1)
+      activerecord (>= 7.1)
+      importmap-rails (>= 1.2.1)
+      irb (~> 1.13)
+      railties (>= 7.1)
+      stimulus-rails
+      turbo-rails
     mocha (2.6.0)
       ruby2_keywords (>= 0.0.5)
     msgpack (1.7.3)
@@ -567,7 +559,6 @@ DEPENDENCIES
   devise (>= 4.6.2)
   devise_invitable (~> 2.0)
   error_highlight (>= 0.4.0)
-  font-awesome-sass
   foreman
   gabba
   importmap-rails (~> 2.0)
@@ -580,7 +571,7 @@ DEPENDENCIES
   local_time
   memory_profiler
   minitest-reporters (>= 0.5.0)
-  mission_control-jobs!
+  mission_control-jobs (~> 0.5.0)
   mocha (~> 2.6)
   mysql2
   omniauth

app/assets/javascripts/components/add_member/add_member.html

@@ -1,5 +1,5 @@
 <div class='form-group'>
-    <form class="form input-append">
+    <form class="form input-append vertically-centered">
         <input id="user-lookup" class="form-control email" size="30" type="text" ng-model="ctrl.selected"
             placeholder="Look for users via email or display name"
             uib-typeahead="user as user.display_name for user in ctrl.getUsers($viewValue)"
@@ -15,7 +15,7 @@
             ng-click="ctrl.inviteUserToJoin()">
             Send invitation
         </a>
-        <i ng-show="loadingUsers" class="fa fa-spinner fa-spin"></i>
+        <i ng-show="loadingUsers" class="spinner"></i>
     </form>
 
     <p class='help-block'>

app/assets/javascripts/components/add_query/add_query.html

@@ -1,4 +1,4 @@
-<form class="form input-append">
+<form class="form input-append vertically-centered">
   <input
     id="add-query"
     class="form-control"
@@ -17,5 +17,5 @@
     value="{{ ctrl.text.indexOf(';') === -1 ? 'Add query' : 'Add queries' }}"
    />
 
-  <i class="fa fa-spinner fa-spin" ng-class="{'hidden': !ctrl.loading}"></i>
+  <i class="spinner" ng-class="{'hidden': !ctrl.loading}">/>
 </form>

app/assets/javascripts/components/annotation/annotation.html

@@ -1,19 +1,19 @@
 <li class='annotation'>
   <div class="dropdown pull-right" uib-dropdown>
     <a uib-dropdown-toggle>
-      <i class="fa fa-bars"></i>
+      <i class="glyphicon glyphicon-menu-hamburger"></i>
     </a>
 
     <ul class="dropdown-menu" uib-dropdown-menu>
       <li>
         <a ng-click='ctrl.update()'>
-          <i class='fa fa-edit'></i>
+          <i class='glyphicon glyphicon-pencil'></i>
           Edit
         </a>
       </li>
       <li>
         <a ng-click='ctrl.delete()' class='text-danger'>
-          <i class='fa fa-trash'></i>
+          <i class='glyphicon glyphicon-trash'></i>
           Delete
         </a>
       </li>
@@ -35,7 +35,7 @@
       Try No: {{ ctrl.theAnnotation.score.try_id }}
     </span>
 
-    <i class='fa fa-circle'></i>
+    <i class='bi bi-circle-fill'></i>
 
     <span class='annotation-score'>
       Score: {{ ctrl.theAnnotation.score.score }}

app/assets/javascripts/components/archive_case/archive_case.html

@@ -1,6 +1,6 @@
 <a class="action-icon" ng-click="ctrl.openArchiveModal()">
   <i
-    class="fa fa-archive"
+    class="bi bi-archive-fill"
     aria-hidden="true"
     title="Archive"
     alt="Archive"

app/assets/javascripts/components/archive_search_endpoint/archive_search_endpoint.html

@@ -1,6 +1,6 @@
 <a class="action-icon" ng-click="ctrl.openArchiveModal()">
   <i
-    class="fa fa-archive"
+    class="bi bi-archive-fill"
     aria-hidden="true"
     title="Archive"
     alt="Archive"

app/assets/javascripts/components/book_listing/book_listing.html

@@ -21,7 +21,7 @@
 
       <a ng-href="books/{{ctrl.book.id}}/edit" target="_self" class="action-icon">
         <i
-          class="fa fa-edit"
+          class="glyphicon glyphicon-pencil"
           aria-hidden="true"
           title="Edit"
           alt="Edit"

app/assets/javascripts/components/case_listing/case_listing.html

@@ -14,7 +14,7 @@
         </span>
         <br/>
         <span class="item-actions">
-          <action-icon title="'Rename'" icon-class="'fa fa-edit'" fn-call="ctrl.rename()"></action-icon>
+          <action-icon title="'Rename'" icon-class="'glyphicon glyphicon-pencil'" fn-call="ctrl.rename()"></action-icon>
 
           <delete-case this-case="ctrl.thisCase"></delete-case>
           <archive-case this-case="ctrl.thisCase"></archive-case>
@@ -50,7 +50,7 @@
     {{ ctrl.thisCase.lastScore.score }}
 
     <span ng-show="ctrl.thisCase.lastScore.all_rated === false" class='text-warning' title="Hop to it!  There are unrated results!">
-      <i class="fa fa-frog"></i>
+      <i class="bi bi-balloon-fill"></i>
     </span>
   </div>
 

app/assets/javascripts/components/clone_case/clone_case.html

@@ -1,4 +1,4 @@
-<i class="fa fa-clone" aria-hidden="true"></i>
+<i class="bi bi-copy" aria-hidden="true"></i>
 <a ng-click="ctrl.prompt()">
   Clone
 </a>

app/assets/javascripts/components/clone_scorer/clone_scorer.html

@@ -1 +1 @@
-<action-icon title="'Clone'" icon-class="'fa fa-clone'" fn-call="ctrl.cloneScorer()"></action-icon>
+<action-icon title="'Clone'" icon-class="'bi bi-copy'" fn-call="ctrl.cloneScorer()"></action-icon>

app/assets/javascripts/components/delete_case/delete_case.html

@@ -1,6 +1,6 @@
 <a class="action-icon" ng-click="ctrl.openDeleteModal()">
   <i
-    class="fa fa-trash"
+    class="glyphicon glyphicon-trash"
     aria-hidden="true"
     title="Delete"
     alt="Delete"

app/assets/javascripts/components/delete_case_options/delete_case_options.html

@@ -1,4 +1,4 @@
-<i class="fa fa-remove" aria-hidden="true"></i>
+<i class="bi bi-x-lg" aria-hidden="true"></i>
 <a ng-click="ctrl.prompt()">
   Delete
 </a>

app/assets/javascripts/components/delete_scorer/delete_scorer.html

@@ -1,6 +1,6 @@
 <a class="action-icon" ng-click="ctrl.openDeleteModal()">
   <i
-    class="fa fa-trash"
+    class="glyphicon glyphicon-trash"
     aria-hidden="true"
     title="Delete"
     alt="Delete"

app/assets/javascripts/components/diff/_modal.html

@@ -22,7 +22,7 @@ <h3 class="modal-title">Compare Your Search Results</h3>
         ng-click="ctrl.toggleDel(ctrl.selection)"
         title="delete"
       >
-        <i class='fa fa-times'></i>
+        <i class='bi bi-x-lg'></i>
       </a>
 
       <div class="alert alert-warning" ng-show="ctrl.delStarted()">

app/assets/javascripts/components/diff/diff.html

@@ -1,4 +1,4 @@
-<i class="fa fa-chart-bar" aria-hidden="true"></i>
+<i class="bi bi-bar-chart-fill" aria-hidden="true"></i>
 <a ng-click="ctrl.prompt()">
   Compare snapshots
 </a>

app/assets/javascripts/components/edit_scorer/edit_scorer.html

@@ -1 +1 @@
-<action-icon title="'Edit'" icon-class="'fa fa-edit'" fn-call="ctrl.editScorer()"></action-icon>
+<action-icon title="'Edit'" icon-class="'glyphicon glyphicon-pencil'" fn-call="ctrl.editScorer()"></action-icon>

app/assets/javascripts/components/expand_content/expand_content.html

@@ -3,5 +3,5 @@
   ng-click="ctrl.expand()"
 >
   Expand
-  <i class="fa fa-expand"></i>
+  <i class="bi bi-arrows-angle-expand"></i>
 </a>

app/assets/javascripts/components/export_case/_modal.html

@@ -25,7 +25,7 @@ <h3 class="modal-title">Export Case: <span class="modal-case">{{ ctrl.theCase.ca
     <input type="radio" id="detailed" name="exportSelection" value="detailed" ng-model="ctrl.options.which">
     <label for="detailed" class="disabled">Detailed</label>
     <p ng-if="ctrl.options.which==='detailed' && !ctrl.supportsDetailedExport" class='bg-warning text-warning padded-text'>
-      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+      <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
       Detailed export is only supported from the individual Case view.
     </p>
     <span class="help-block">

app/assets/javascripts/components/export_case/export_case.html

@@ -1,15 +1,15 @@
 <span ng-show="ctrl.iconOnly">
   <a ng-click="ctrl.prompt()" class="action-icon">
     <i
-      class="fa fa-upload"
+      class="bi bi-file-earmark-arrow-up"
       aria-hidden="true"
       title="Export"
       alt="Export"
     ></i>
   </a>
 </span>
 <span ng-show="!ctrl.iconOnly">
-  <i class="fa fa-upload" aria-hidden="true" title="Export" alt="Export"></i>
+  <i class="bi bi-file-earmark-arrow-up" aria-hidden="true" title="Export" alt="Export"></i>
   <a ng-click="ctrl.prompt()">
     Export
   </a>

app/assets/javascripts/components/frog_report/_modal.html

@@ -4,8 +4,8 @@ <h3 class="modal-title">The Frog Pond Report: <span class="modal-case">{{ ctrl.t
 </div>
 <div class="modal-body frog-pond">
   <div class="frog-pond-content">
-  <p>The accuracy of the scores calculated by Quepid is directly impacted by the number of <i class="fa fa-frog" aria-hidden="true"></i>'s you have.  Chase the frogs
-    back into the pond (i.e rate your documents) so that you can have confidence in the changes you are making!</p>
+  <p>The accuracy of the scores calculated by Quepid is directly impacted by the number of <i class="bi bi-balloon" aria-hidden="true"></i>'s you have.  Pop the balloons
+    (i.e rate your documents) so that you can have confidence in the changes you are making!</p>
 
   <h4>Summary</h4>
 
@@ -18,7 +18,7 @@ <h4>Summary</h4>
   </ng-pluralize>
   <strong>zero</strong> results.
 
-  You need to maintain a total of {{ totalNumberOfRatingsNeeded }} ratings to eliminate all the frogs.<br/>
+  You need to maintain a total of {{ totalNumberOfRatingsNeeded }} ratings to eliminate all the balloons.<br/>
   <span ng-if="ctrl.theCase.lastScore.all_rated">
   All the queries have been fully rated!  Congratulations!
   </span>
@@ -44,7 +44,7 @@ <h4 style="margin-top: 60px;">Distribution of Queries Needing Ratings</h4>
 </div>
 <div class="modal-footer">
   <a class="btn btn-default" ng-if="ctrl.theCase.bookName" ng-click="ctrl.refreshRatingsFromBook()" ng-disabled="processingPrompt.inProgress">
-    <i class="glyphicon glyphicon-refresh" ng-class="{'fa-spin': processingPrompt.inProgress}"></i>
+    <i class="glyphicon glyphicon-refresh" ng-class="{'spintime': processingPrompt.inProgress}"></i>
     Refresh ratings from book <i>{{ctrl.theCase.bookName}}</i>
   </a>
   <button class="btn btn-primary" ng-click="ctrl.cancel()" ng-disabled="processingPrompt.inProgress">Close</button>

app/assets/javascripts/components/frog_report/frog_report.html

@@ -1,4 +1,4 @@
-<i class="fa fa-frog" aria-hidden="true"></i>
+<i class="bi bi-balloon-fill" aria-hidden="true"></i>
 <a ng-click="ctrl.prompt()">
   Report
 </a>

app/assets/javascripts/components/import_ratings/_modal.html

@@ -168,7 +168,7 @@ <h2>CSV</h2>
 <div class="modal-footer">
 
   <p class='bg-warning text-warning padded-text' ng-if="ctrl.showWarning()">
-    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+    <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
     <span ng-show="ctrl.ratingsTypePicked()">
     This operation WILL override your existing ratings. Proceed with caution!
     </span>
@@ -180,7 +180,7 @@ <h2>CSV</h2>
     </span>    
   </p>
 
-  <i class="fa fa-spinner fa-spin" aria-hidden="true" ng-show="ctrl.loading"></i>
+  <i class="glyphicon glyphicon-refresh spintime" aria-hidden="true" ng-show="ctrl.loading"></i>
 
   <button class="btn btn-default float-left" ng-click="ctrl.cancel()">Cancel</button>
   <button class="btn btn-primary" ng-click="ctrl.ok()" ng-disabled="!ctrl.showWarning()">Import</button>

app/assets/javascripts/components/import_ratings/import_ratings.html

@@ -1,4 +1,4 @@
-<i class="fa fa-download" aria-hidden="true"></i>
+<i class="bi bi-file-earmark-arrow-down" aria-hidden="true"></i>
 <a ng-click="ctrl.create()">
   Import
 </a>

app/assets/javascripts/components/import_to_cases/_modal_case.html

@@ -26,7 +26,7 @@ <h3 class="modal-title">Import Quepid Case</h3>
     ng-click="ctrl.ok()"
     ng-disabled='ctrl.import.loading'
   >
-    <i ng-show='ctrl.import.loading' class='fa fa-spin fa-spinner'></i>
+    <i ng-show='ctrl.import.loading' class='glyphicon glyphicon-refresh spintime'></i>
     Import
   </button>
   <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>

app/assets/javascripts/components/import_to_cases/_modal_snapshot.html

@@ -52,7 +52,7 @@ <h2>CSV</h2>
     ng-click="ctrl.ok()"
     ng-disabled='ctrl.import.loading'
   >
-    <i ng-show='ctrl.import.loading' class='fa fa-spin fa-spinner'></i>
+    <i ng-show='ctrl.import.loading' class='glyphicon glyphicon-refresh spintime'></i>
     Import
   </button>
   <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>

app/assets/javascripts/components/import_to_cases/import_to_cases.html

@@ -1,6 +1,6 @@
 <div class="btn-group" uib-dropdown>
   <button type="button" id="import-button" class="btn btn-default" uib-dropdown-toggle>
-    <i class="fa fa-download"></i>
+    <i class="bi bi-cloud-arrow-up"></i>
     Import
     <i class="caret"></i>
   </button>

app/assets/javascripts/components/judgements/_modal.html

@@ -10,7 +10,7 @@ <h3 class="modal-title">Judgements</h3>
   <div ng-show='ctrl.share.loading'>
     <p>
       Loading your teams, this will be quick I promise!
-      <i class='fa fa-spinner fa-spin'></i>
+      <i class='glyphicon glyphicon-refresh spintime'></i>
     </p>
   </div>
   <div class="alert alert-warning" role="alert" ng-if="ctrl.populateBook && ctrl.share.acase.queriesCount === 0">
@@ -36,7 +36,7 @@ <h3 class="modal-title">Judgements</h3>
 
 
     <a class="btn btn-primary btn-lg" ng-click="ctrl.goToTeamsPage()">
-      <i class="fa fa-plus"></i>
+      <i class="bi bi-plus-lg"></i>
       Create a team
     </a>
 
@@ -48,7 +48,7 @@ <h3 class="modal-title">Judgements</h3>
     </p>
 
     <a class="btn btn-primary btn-lg" ng-href="{{ctrl.createBookLink()}}" target="_self">
-      <i class="fa fa-plus"></i>
+      <i class="bi bi-plus-lg"></i>
       Create a book
     </a>
   </div>
@@ -120,7 +120,7 @@ <h3 class="modal-title">Judgements</h3>
     Make Judgements!
   </a>
   <a class="btn btn-default pull-left" ng-click="ctrl.refreshRatingsFromBook()" ng-disabled="processingPrompt.inProgress || ctrl.populateBook || !ctrl.activeBookId || ctrl.share.acase.bookId !== ctrl.activeBookId" >
-    <i class="glyphicon glyphicon-refresh" ng-class="{'fa-spin': processingPrompt.inProgress}"></i>
+    <i class="glyphicon glyphicon-refresh" ng-class="{'spintime': processingPrompt.inProgress}"></i>
     Refresh ratings from book <i>{{ctrl.activeBookName}}</i>
     <span ng-if="ctrl.createMissingQueries">and creating missing queries</span>
   </a>

app/assets/javascripts/components/move_query/_modal.html

@@ -6,7 +6,7 @@ <h3 class="modal-title">Move Query to Another Case</h3>
   <div ng-show="ctrl.loading">
     <p>
       Loading cases, this wont take long!
-      <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+      <i class="glyphicon glyphicon-refresh spintime" aria-hidden="true"></i>
     </p>
   </div>