IssueID #3144 - Css Class .label has been removed and replaced by .ba…

…dge to disambiguate from the <label> element.

  - Renamed .label class to .badge
  - Replaced .label-default by bg-secondary.
  - Replaced .label-info by bg-info.
  - Replaced .label-warning by  bg-warning text-dark.
  - Replaced .label-danger by bg-danger.

CHANGELOG.md

@@ -74,14 +74,20 @@ https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-
   - `data-toggle` --> `data-bs-toggle`
 + Notifications now use classes `.d-block` and `.d-none` to show and hide respectively.
 + Bootstrap 5 Popover added to some dropdown-menu items by adding attribute `data-bs-toggle="popover"`.
-- `float-start` and `float-end` replaced with `pull-left` and `pull-right` respectively
-- `form-group` class replaced with `form-control` 
-- Input group addons are now specific to their placement relative to an input. So `.input-group-addon` and in our case we replaced with
++ `float-start` and `float-end` replaced with `pull-left` and `pull-right` respectively
++ `form-group` class replaced with `form-control` 
++ Input group addons are now specific to their placement relative to an input. So `.input-group-addon` and in our case we replaced with
 `.input-group-addon`.
-- Renamed `.btn-default` to `.btn-secondary` and variable `$btn-default-color` changed to `$btn-secondary-color`.
-- Renamed `.img-responsive` to `.img-fluid`.
-- Renamed `.checkbox` and `.radio` into `.form-check`.
-
++ Renamed `.btn-default` to `.btn-secondary` and variable `$btn-default-color` changed to `$btn-secondary-color`.
++ Renamed `.img-responsive` to `.img-fluid`.
++ Renamed `.checkbox` and `.radio` into `.form-check`.
++  Class `.label` has been removed and replaced by `.badge` to disambiguate from the `<label>` element.
+  - Renamed `.label` class to `.badge`
+  - Replaced `.label-default` by `bg-secondary`
+  - Replaced `.label-info` by `bg-info`
+  - Replaced `.label-warning` by  `bg-warning text-dark`
+  - Replaced `.label-danger` by `bg-danger`
+
 
 ## V4.1.1
 

app/views/answers/_new_edit.html.erb

@@ -72,7 +72,7 @@
     <% question.example_answers([base_template_org.id, template.org.id]).each do |annotation| %>
       <% if annotation.present? && annotation.org.present? && annotation.text.present? %>
         <div class="card card-default">
-          <span class="label label-default">
+          <span class="badge bg-secondary">
             <%="#{annotation.org.abbreviation} "%><%=_('example answer')%>
           </span>
           <div class="card-body">

app/views/answers/_status.html.erb

@@ -6,34 +6,34 @@
   helpdesk_email = Rails.configuration.x.organisation.helpdesk_email
   email_subject = _('Plan writing error related to %{tool_name}') %{ :tool_name => tool_name }
 %>
-<span class="label label-warning status" style="display:none;" data-status="saving">
+<span class="badge bg-warning text-dark status" style="display:none;" data-status="saving">
   <%= _("Saving...Please do not refresh or go to another page!") %>
   <br><br>
   <%= sanitize(_("If you stuck on this message, please save your plan to a separate file and contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
 </span>
-<span class="label label-danger status" style="display: none;" data-status="error-saving">
+<span class="badge bg-danger status" style="display: none;" data-status="error-saving">
 <%= sanitize(_("Sorry, we had trouble saving your data. Please contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
 <br><br>
 <%= _("Save your plan content to a separate file now. You will LOSE them after refreshing or closing this page.") %>
 </span>
 <% if answer.answered? %>
-    <span class="label label-info status" data-status="saved-at">
+    <span class="badge bg-info status" data-status="saved-at">
       <%= _('Answered')%> <time class="timeago" datetime="<%= answer.updated_at.iso8601 %>"></time>
       <%= _(' by %{user_name}') %{ :user_name => answer.user.name } if answer.user.present? %>
     </span><br>
     <% n_question_to_remove = answer_remove_list(answer).size %>
     <% if n_question_to_remove > 0 %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer removes ') + n_question_to_remove.to_s + _(' questions from your plan.') %>
       </span>
     <% end %>
     <% email_list = email_trigger_list(answer) %>
     <% unless email_list.blank? %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer triggers email(s) to ') + email_list %>
       </span>
     <% end %>

app/views/notes/_show.html.erb

@@ -8,7 +8,7 @@
           </div>
         </li>
         <li>
-            <span class="label label-info">
+            <span class="badge bg-info">
                 <%= "#{user.name} " %> <time class="timeago" datetime="<%= note.updated_at.iso8601 %>"></time>
             </span>
         </li>

app/views/questions/_preview_question.html.erb

@@ -110,7 +110,7 @@
       <!-- button without action-->
       <%= link_to _('Save'), "#", class: "btn btn-primary", onclick: "event.preventDefault();" %>
 
-      <span class="label label-warning answer-status"><%= _('Not answered yet') %></span>
+      <span class="badge bg-warning text-dark answer-status"><%= _('Not answered yet') %></span>
 
     </div>
   </form>