Indicator spin; remove old indicator css

app/app/assets/stylesheets/application.postcss.css

@@ -2,5 +2,4 @@
 @forward "uswds-settings.scss";
 @forward "uswds";
 @forward "uswds-overrides.scss";
-@forward "lds-ripple.scss";
 @forward "cbv.scss";

app/app/assets/stylesheets/cbv.scss

@@ -107,3 +107,12 @@ html {
 .cbv-row-highlight td {
   @include u-bg('yellow-5v');
 }
+
+.rotate {
+  animation: 1s linear infinite rotate-con;
+}
+
+@keyframes rotate-con {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(360deg);}
+}

app/app/views/cbv/synchronizations/_indicator.html.erb

@@ -1,10 +1,11 @@
-<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+<svg class="in-progress <%= completed ? "display-none" : "" %> usa-icon border-05 rotate border-base-light radius-pill padding-1 usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
   <use
-    class="in-progress <%= in_progress ? "display-none" : "" %>"
     xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#autorenew") %>"
   ></use>
+</svg>
+
+<svg class="completed <%= !completed ? "display-none" : "" %> usa-icon border-05 bg-primary text-white border-primary radius-pill padding-1 usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
   <use
-    class="completed <%= !in_progress ? "display-none" : "" %>"
     xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#check") %>"
   ></use>
 </svg>

app/app/views/cbv/synchronizations/show.html.erb

@@ -19,29 +19,29 @@
         class="grid-col-fill"
         data-cbv-synchronizations-target="employmentJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("employment") } %>
-        <%= t(".jobs.employment") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("employment") } %>
+        <p><%= t(".jobs.employment") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="identityJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("identity") } %>
-        <%= t(".jobs.identity") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("identity") } %>
+        <p><%= t(".jobs.identity") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="paystubsJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("paystubs") } %>
-        <%= t(".jobs.paystubs") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("paystubs") } %>
+        <p><%= t(".jobs.paystubs") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="incomeJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("income") } %>
-        <%= t(".jobs.income") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("income") } %>
+        <p><%= t(".jobs.income") %></p>
       </div>
     </div>
   </div>