Removed nav related classes from feedback tabs (#18924)

* Removed bootstrap from listing_categories, listings, navigation_links

* Removed not-used bootstrap classes from admin/tags

* Removed bootstrap from admin/settings

* Fix collapse glitch in profile-fields

* Feedback partial progress

* Feedback partial progress

* Removed form-control

* Replaced card with crayons-card

* Fixed profile field UI

* Removed collapse hide and show classes

* Removed collapse hide and show classes

* Removed collapse hide and show classes

* Nit height fix

* Nit width fix

* Updated tests

* Removed nav related classes from feedback tabs

* Remove btn-classes from commets too.

* Removed row and col-12 classes

* Removed bootstrap classes from Authentication

* Removed bootstrap classes from Mascot

* Removed bootstrap classes from Onboarding

* Removed bootstrap classes from lock/unlock discussions

* Notes design changes

* Removed bootstrap classes from Organization

* Removed bootstrap classes from Organization

* Remove alert bootstrap class from admin.html.erb

* Fixed tab_pane related code

* Enable click listener on notice

* Enable click listener on notice

* Applied suggested changes

* close bootstrap class removed

* Removed element completely

app/assets/stylesheets/components/notices.scss

@@ -21,4 +21,17 @@
   &--info {
     background: rgba(var(--brand), 0.1);
   }
+
+  &--close {
+    float: right;
+    font-size: var(--fs-2xl);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+    color: var(--base);
+    text-shadow: 0 1px 0 var(--base-inverted);
+    opacity: var(--opacity-50);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+  }
 }

app/javascript/admin/controllers/notice_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class NoticeController extends Controller {
+  static targets = ['noticeZone'];
+
+  closeNotice() {
+    document.getElementById('notice-container').addEventListener('click', (event) => {
+      event.preventDefault();
+      document.getElementById('notice-container').remove();
+    })
+  }
+}

app/views/admin/feedback_messages/_feedback_message.html.erb

@@ -105,19 +105,19 @@
       <div class="flex flex-wrap -mx-4">
         <div class="w-100 max-w-100 px-4">
           <h4 class="fw-bold">Email Form:</h4>
-          <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="nav-item">
-              <a class="nav-link active" href="#reporter-<%= feedback_message.id %>" aria-controls="reporter-<%= feedback_message.id %>" role="tab" data-toggle="tab">Reporter</a>
+          <ul class="crayons-navigation crayons-navigation--horizontal" role="tablist">
+            <li role="presentation" >
+              <a id="tab-reporter-<%= feedback_message.id %>" class="crayons-navigation__item crayons-navigation__item--current" href="#reporter-<%= feedback_message.id %>" aria-controls="reporter-<%= feedback_message.id %>" role="tab">Reporter</a>
             </li>
-            <li role="presentation" class="nav-item">
-              <a class="nav-link" href="#offender-<%= feedback_message.id %>" aria-controls="offender-<%= feedback_message.id %>" role="tab" data-toggle="tab">Offender</a>
+            <li role="presentation">
+              <a id="tab-offender-<%= feedback_message.id %>" class="crayons-navigation__item" href="#offender-<%= feedback_message.id %>" aria-controls="offender-<%= feedback_message.id %>" role="tab">Offender</a>
             </li>
-            <li role="presentation" class="nav-item">
-              <a class="nav-link" href="#affected-<%= feedback_message.id %>" aria-controls="affected-<%= feedback_message.id %>" role="tab" data-toggle="tab">Affected</a>
+            <li role="presentation">
+              <a id="tab-affected-<%= feedback_message.id %>" class="crayons-navigation__item" href="#affected-<%= feedback_message.id %>" aria-controls="affected-<%= feedback_message.id %>" role="tab">Affected</a>
             </li>
           </ul>
-          <div class="tab-content my-3">
-            <div role="tabcard" class="tab-pane fade active show" data-id="<%= feedback_message.id %>" data-userType="reporter" id="reporter-<%= feedback_message.id %>">
+          <div class="my-3">
+            <div role="tabcard" class="" data-id="<%= feedback_message.id %>" data-userType="reporter" id="reporter-<%= feedback_message.id %>">
               <div class="crayons-notice crayons-notice--info" aria-live="polite">Please note that all users who report abuse receive an automatic confirmation email. You can send an additional, follow-up email to this user by using the form below.</div>
               <br>
               <h5 class="fw-bold">Send To:</h5>
@@ -127,7 +127,7 @@
               <h5 class="fw-bold">Body:</h5>
               <%= text_area_tag :reporter_email_body, reporter_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "reporter__body__#{feedback_message.id}" %>
             </div>
-            <div role="tabcard" class="tab-pane fade" data-id="<%= feedback_message.id %>" data-userType="offender" id="offender-<%= feedback_message.id %>">
+            <div role="tabcard" class="hidden" data-id="<%= feedback_message.id %>" data-userType="offender" id="offender-<%= feedback_message.id %>">
               <h5 class="fw-bold">Send To:</h5>
               <%= email_field_tag :offender_email_to, feedback_message.offender&.email, class: "crayons-textfield my-1", id: "offender__emailto__#{feedback_message.id}", required: true %>
               <h5 class="fw-bold">Subject:</h5>
@@ -135,7 +135,7 @@
               <h5 class="fw-bold">Body:</h5>
               <%= text_area_tag :offender_email_body, offender_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "offender__body__#{feedback_message.id}" %>
             </div>
-            <div role="tabcard" class="tab-pane fade" data-id="<%= feedback_message.id %>" data-userType="affected" id="affected-<%= feedback_message.id %>">
+            <div role="tabcard" class="hidden" data-id="<%= feedback_message.id %>" data-userType="affected" id="affected-<%= feedback_message.id %>">
               <h5 class="fw-bold">Send To:</h5>
               <%= email_field_tag :affected_email_to, feedback_message.affected&.email, class: "crayons-textfield my-1", id: "affected__emailto__#{feedback_message.id}", required: true %>
               <h5 class="fw-bold">Subject:</h5>
@@ -147,7 +147,7 @@
           <button class="c-btn c-btn--primary" type="button" id="send__email__btn__<%= feedback_message.id %>">Send Email ✉️</button>
         </div>
       </div>
-      <div class="email__alert crayons-notice w-100 mt-2 d-none" id="email__alert__<%= feedback_message.id %>">
+      <div class="email__alert crayons-notice w-100 mt-2 hidden" id="email__alert__<%= feedback_message.id %>">
       </div>
       <div class="flex flex-wrap -mx-4 my-3">
         <div class="w-100 max-w-100 px-4">
@@ -202,6 +202,47 @@
 </details>
 
 <script>
+
+ document.getElementById('tab-reporter-' + <%= feedback_message.id %>).addEventListener('click', function (event) {
+   event.preventDefault();
+   var reportId = <%= feedback_message.id %>;
+   showTabContent("reporter", reportId);
+ });
+
+ document.getElementById('tab-offender-' + <%= feedback_message.id %>).addEventListener('click', function (event) {
+   event.preventDefault();
+   var reportId = <%= feedback_message.id %>;
+   showTabContent("offender", reportId);
+ });
+
+ document.getElementById('tab-affected-' + <%= feedback_message.id %>).addEventListener('click', function (event) {
+   event.preventDefault();
+   var reportId = <%= feedback_message.id %>;
+   showTabContent("affected", reportId);
+ });
+
+ function showTabContent(tabName, reportId) {
+   // Make all tabs inactive
+   document.getElementById(`tab-reporter-${reportId}`).classList.remove("crayons-navigation__item--current");
+   document.getElementById(`tab-offender-${reportId}`).classList.remove("crayons-navigation__item--current");
+   document.getElementById(`tab-affected-${reportId}`).classList.remove("crayons-navigation__item--current");
+
+   // Hide all tab related contents
+   document.getElementById(`reporter-${reportId}`).classList.add("hidden");
+   document.getElementById(`offender-${reportId}`).classList.add("hidden");
+   document.getElementById(`affected-${reportId}`).classList.add("hidden");
+   
+   // Remove tab-pane class from all tab contents
+   document.getElementById(`reporter-${reportId}`).classList.remove("tab-pane");
+   document.getElementById(`offender-${reportId}`).classList.remove("tab-pane");
+   document.getElementById(`affected-${reportId}`).classList.remove("tab-pane");
+   
+   // Finally, make the tab active and its related content visible
+   document.getElementById(`${tabName}-${reportId}`).classList.remove("hidden");
+   document.getElementById(`${tabName}-${reportId}`).classList.add("tab-pane");
+   document.getElementById(`tab-${tabName}-${reportId}`).classList.add("crayons-navigation__item--current");
+ }
+
  function saveStatus(id) {
    var formData = new FormData();
    var statusSelectTag = document.getElementById('status__' + id);
@@ -249,7 +290,8 @@
  }
 
  function sendEmail(id) {
-   var activeTab = document.querySelector(".tab-pane.active[data-id='" + id + "']");
+   // tab-pane class helps to identify the active tab.
+   var activeTab = document.querySelector(".tab-pane[data-id='" + id + "']");
    var alert = document.getElementById('email__alert__' + id);
    var sendEmailBtn = document.getElementById('send__email__btn__' + id);
    var userType = activeTab.dataset.usertype;
@@ -309,10 +351,10 @@
    var notesDiv = document.getElementById('notes__' + id);
 
    var singleNoteDiv = document.createElement('div');
-   singleNoteDiv.setAttribute('class', 'border border-info bg-light rounded my-2 p-2');
+   singleNoteDiv.setAttribute('class', 'border-solid border-2 border-base-0');
 
    var timeBadge = document.createElement('span');
-   timeBadge.setAttribute('class', 'badge badge-info float-right');
+   timeBadge.setAttribute('class', 'c-indicator c-indicator--info float-right');
    timeBadge.innerText = "just now";
    singleNoteDiv.append(timeBadge);
 

app/views/admin/feedback_messages/_style.html.erb

@@ -40,4 +40,10 @@
   background-color: var(--base-0);
   border-radius: 0.25rem;
  }
+.notes__timestamp {
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.25rem;
+  border-color: #17a2b8;
+}
 </style>

app/views/admin/podcasts/edit.html.erb

@@ -33,7 +33,7 @@
             <li class="list-group-item w-100">
               <%= link_to "@#{owner.username}", user_url(owner), target: "_blank", rel: :noopener %>
               <%# f.hidden_field :user_id, value: owner.id %>
-              <%# f.submit "Remove", class: "btn btn-danger btn-sm float-right" %>
+              <%# f.submit "Remove", class: "crayons-btn crayons-btn--danger crayons-btn--s float-right" %>
             </li>
           <% end %>
         <% end %>

app/views/admin/settings/forms/_authentication.html.erb

@@ -155,10 +155,10 @@
         <hr class="my-0" />
 
         <section class="mb-6">
-          <div class="form-group mb-0">
+          <div class="crayons-field mb-0">
             <%= f.text_field :auth_providers_to_enable,
                              id: "auth_providers_to_enable",
-                             class: "form-control hidden",
+                             class: "crayons-textfield bg-base-10 hidden",
                              value: Settings::Authentication.providers.join(","),
                              readonly: true %>
           </div>

app/views/admin/settings/forms/_campaign.html.erb

@@ -39,8 +39,8 @@
           <%= admin_config_label :sidebar_image %>
           <%= admin_config_description Constants::Settings::Campaign.details[:sidebar_image][:description] %>
           <% if Settings::Campaign.sidebar_image.present? %>
-            <div class="row mt-2">
-              <div class="col-12">
+            <div class="flex flex-wrap flex-row -mx-4 mt-2">
+              <div class="w-100 max-w-100 px-4">
                 <img alt="Campaign sidebar image" class="max-w-100 h-auto" src="<%= Settings::Campaign.sidebar_image %>" />
               </div>
             </div>

app/views/admin/settings/forms/_mascot.html.erb

@@ -26,7 +26,7 @@
                            value: Settings::General.mascot_image_url,
                            placeholder: Constants::Settings::General.details[:mascot_image_url][:placeholder] %>
 
-          <div class="col-12">
+          <div class="w-100 max-w-100 px-4">
             <img alt="Mascot image" class="max-w-100 h-auto" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
           </div>
 

app/views/admin/settings/forms/_onboarding.html.erb

@@ -12,8 +12,8 @@
                            class: "crayons-textfield",
                            value: Settings::General.onboarding_background_image,
                            placeholder: Constants::Settings::General.details[:onboarding_background_image][:placeholder] %>
-          <div class="row mt-2">
-            <div class="col-12">
+          <div class="flex flex-wrap flex-row -mx-4 mt-2">
+            <div class="w-100 max-w-100 px-4">
               <img alt="onboarding background image" class="max-w-100 h-auto" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
             </div>
           </div>

app/views/admin/users/index/_organizations.html.erb

@@ -1,8 +1,8 @@
 <% if organizations.any? %>
-    <figure class="crayons-hover-tooltip crayons-hover-tooltip--right border p-1 rounded bg-base-inverted w-fit" data-tooltip="<%= organization_tooltip(organizations.pluck(:name), org_count, imposed_limit: @organization_limit) %>">
+    <figure class="crayons-hover-tooltip crayons-hover-tooltip--right p-1 border-solid border-1 border-base-20 radius-default bg-base-inverted w-fit" data-tooltip="<%= organization_tooltip(organizations.pluck(:name), org_count, imposed_limit: @organization_limit) %>">
       <figcaption class="screen-reader-only"><%= organization_tooltip(organizations.pluck(:name), org_count, imposed_limit: @organization_limit) %></figcaption>
       <% organizations.each_with_index do |organization, index| %>
-          <img src="<%= organization.profile_image_url_for(length: 64) %>" width="32" height="32" alt="<%= organization.name %>" class="crayons-logo crayons-logo--l border border-2 border-base-0 <%= index.positive? ? "-ml-4" : "" %>">
+          <img src="<%= organization.profile_image_url_for(length: 64) %>" width="32" height="32" alt="<%= organization.name %>" class="crayons-logo crayons-logo--l border-solid border-2 border-base-0 <%= index.positive? ? "-ml-4" : "" %>">
       <% end %>
       <% if org_count > @organization_limit %>
         <span class="fs-s pr-1"><%= t("views.admin.users.more_orgs", count: overflow_count(org_count, imposed_limit: @organization_limit)) %></span>

app/views/articles/discussion_lock_confirm.html.erb

@@ -10,7 +10,7 @@
     </p>
 
     <%= form_for @discussion_lock, method: :post do |f| %>
-      <div class="form-group">
+      <div class="crayons-field">
         <%= f.hidden_field :article_id, value: @article.id %>
         <div class="crayons-field mb-5">
           <%= f.label :reason, t("views.articles.lock.reason.label"), class: "crayons-field__label" %>
@@ -26,8 +26,10 @@
                            class: "crayons-textfield" %>
         </div>
       </div>
-      <%= f.submit t("views.articles.lock.submit"), class: "crayons-btn crayons-btn--danger" %>
-      <a data-no-instant href="<%= dashboard_path %>" class="crayons-btn crayons-btn--ghost"><%= t("views.articles.lock.cancel") %></a>
+      <div>
+        <%= f.submit t("views.articles.lock.submit"), class: "crayons-btn crayons-btn--danger" %>
+        <a data-no-instant href="<%= dashboard_path %>" class="crayons-btn crayons-btn--ghost"><%= t("views.articles.lock.cancel") %></a>
+      </div>
     <% end %>
   </div>
 </main>

app/views/articles/discussion_unlock_confirm.html.erb

@@ -28,7 +28,7 @@
     </div>
 
     <%= form_for @discussion_lock, method: :delete do |f| %>
-      <div class="form-group">
+      <div class="crayons-field">
         <%= f.hidden_field :article_id, value: @article.id %>
       </div>
       <%= f.submit t("views.articles.unlock.submit"), class: "crayons-btn crayons-btn--danger" %>

app/views/layouts/admin.html.erb

@@ -67,9 +67,14 @@
     <main id="main-content" class="crayons-layout__content min-w-0 p-2">
       <%= javascript_packs_with_chunks_tag "admin/flashMessages", defer: true %>
       <% flash.each_with_index do |(type, message), i| %>
-        <div data-testid="flash-<%= type %>" class="alert alert-<%= type == "notice" || type == "success" ? "success" : "danger" %>">
+        <div
+          id="notice-container"
+          data-controller="notice" 
+          data-notice-target="noticeZone" 
+          data-testid="flash-<%= type %>" 
+          class="mb-4 crayons-notice crayons-notice--<%= type == "info" || type == "success" ? "success" : "danger" %>">
           <span id="flash-<%= i %>"><%= message %></span>
-          <button class="close js-flash-close-btn" data-dismiss="alert" aria-label="Dismiss message" aria-describedby="flash-<%= i %>">
+          <button class="crayons-notice--close js-flash-close-btn" data-action="click->notice#closeNotice" aria-label="Dismiss message" aria-describedby="flash-<%= i %>">
             <%= crayons_icon_tag(:x, aria_hidden: true) %>
           </button>
         </div>