
<button
  data-controller="complete-button"
  data-complete-button-is-completed-value="<%= lesson_completed? %>"
  data-complete-button-is-loading-value="false"
  data-action="click->complete-button#toggle"
  data-complete-button-id-param="<%= lesson.id %>"
  data-complete-button-loading-class="complete-icon-button--loading"
  data-complete-button-completed-class="complete-icon-button--completed !text-teal-700 dark:!text-teal-600"
  data-test-id="complete-button"
  class="complete-icon-button h-8 sm:h-9 text-gray-400">
  <span class="complete-icon-button__loading-icon" data-complete-button-target="loading">
    <%= inline_svg_tag 'icons/spinner.svg', class: 'animate-spin h-7 sm:h-8', aria: true, title: 'loading', desc: 'loading spinner' %>
  </span>
  <span class="complete-icon-button__completed-icon">
    <%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: 'h-8 sm:h-9', aria: true, title: 'check', desc: 'checkmark icon' %>
  </span>

</button>


<button
  data-controller="complete-button"
  data-complete-button-is-completed-value="<%= lesson_completed? %>"
  data-complete-button-is-loading-value="false"
  data-action="click->complete-button#toggle"
  data-complete-button-id-param="<%= lesson.id %>"
  data-complete-button-loading-class="complete-icon-button--loading"
  data-complete-button-completed-class="complete-icon-button--completed !text-teal-700 dark:!text-teal-600"
  data-test-id="complete-button"
  class="complete-icon-button h-8 sm:h-9 text-gray-400 dark:text-gray-500">
  <span class="complete-icon-button__loading-icon" data-complete-button-target="loading">
    <%= inline_svg_tag 'icons/spinner.svg', class: 'animate-spin h-7 sm:h-8', aria: true, title: 'loading', desc: 'loading spinner' %>
  </span>
  <span class="complete-icon-button__completed-icon">
    <%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: 'h-8 sm:h-9', aria: true, title: 'check', desc: 'checkmark icon' %>
  </span>

</button>

Improve contrast between complete and incomplete icons
Feature: Improve contrast between complete and incomplete icons

Because:
* We've seen some reports about it being a little hard to tell whats complete and incomplete on the course page

This commit:
* Use a darker shade of gray for the the incomplete icon
