From d61d9fbc9dd70d98b8fc987549b2fcb336ed63f6 Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Wed, 4 Jan 2023 10:25:27 +0530
Subject: [PATCH] Remove bootstrap from admin/feedback and use Crayons (#18892)

* Fix collapse glitch in profile-fields

* Feedback partial progress

* Feedback partial progress

* Removed form-control

* Replaced card with crayons-card
---
 .../stylesheets/components/buttons.scss       | 22 +++++
 .../feedback_messages/_abuse_reports.html.erb | 34 +++----
 .../_feedback_message.html.erb                | 88 +++++++++----------
 .../admin/feedback_messages/_style.html.erb   |  7 ++
 .../admin/feedback_messages/index.html.erb    | 16 ++--
 .../_grouped_profile_fields.html.erb          | 34 +++----
 6 files changed, 116 insertions(+), 85 deletions(-)

diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss
index cf062eca1..84a42b9e5 100644
--- a/app/assets/stylesheets/components/buttons.scss
+++ b/app/assets/stylesheets/components/buttons.scss
@@ -175,6 +175,28 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
   --color-inverted-hover: var(--base-inverted);
 }
 
+.crayons-btn--success {
+  --bg: var(--accent-success);
+  --bg-hover: var(--accent-success-darker);
+  --color: var(--base-inverted);
+  --color-hover: var(--base-inverted);
+  --bg-inverted: var(--accent-success);
+  --bg-inverted-hover: var(--accent-success-darker);
+  --color-inverted: var(--base-inverted);
+  --color-inverted-hover: var(--base-inverted);
+}
+
+.crayons-btn--warning {
+  --bg: var(--accent-warning);
+  --bg-hover: var(--accent-warning-darker);
+  --color: var(--base-inverted);
+  --color-hover: var(--base-inverted);
+  --bg-inverted: var(--accent-warning);
+  --bg-inverted-hover: var(--accent-warning-darker);
+  --color-inverted: var(--base-inverted);
+  --color-inverted-hover: var(--base-inverted);
+}
+
 .crayons-btn--ghost {
   --bg: var(--button-ghost-bg);
   --bg-hover: var(--button-ghost-bg-hover);
diff --git a/app/views/admin/feedback_messages/_abuse_reports.html.erb b/app/views/admin/feedback_messages/_abuse_reports.html.erb
index c65ad88ca..338e03004 100644
--- a/app/views/admin/feedback_messages/_abuse_reports.html.erb
+++ b/app/views/admin/feedback_messages/_abuse_reports.html.erb
@@ -1,31 +1,31 @@
 <div>
   <h2 class="crayons-title mb-4">Abuse reports</h2>
-  <ul class="nav nav-pills mb-4">
-    <li class="nav-item">
-      <a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="nav-link <%= "active" if @status == "Open" %>">Open/Unresolved</a>
+  <ul class="crayons-navigation crayons-navigation--horizontal mb-4">
+    <li>
+      <a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Open" %>">Open/Unresolved</a>
     </li>
-    <li class="nav-item">
-      <a href="<%= admin_reports_path(state: @feedback_type, status: "Resolved") %>" class="nav-link <%= "active" if @status == "Resolved" %>">Resolved</a>
+    <li>
+      <a href="<%= admin_reports_path(state: @feedback_type, status: "Resolved") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Resolved" %>">Resolved</a>
     </li>
-    <li class="nav-item">
-      <a href="<%= admin_reports_path(state: @feedback_type, status: "Invalid") %>" class="nav-link <%= "active" if @status == "Invalid" %>">Invalid</a>
+    <li>
+      <a href="<%= admin_reports_path(state: @feedback_type, status: "Invalid") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Invalid" %>">Invalid</a>
   </ul>
 
   <div id="vomitReactions">
     <div class="crayons-card">
       <div class="card-header flex items-center" id="vomitReactionsHeader">
         <h4>Flag Reactions</h4>
-        <button class="btn btn-secondary ml-auto" type="button" data-toggle="collapse" data-target="#vomitReactionsBodyContainer" aria-expanded="false" aria-controls="vomitReactionsBodyContainer">
+        <button class="crayons-btn crayons-btn--secondary ml-auto" type="button" data-toggle="collapse" data-target="#vomitReactionsBodyContainer" aria-expanded="false" aria-controls="vomitReactionsBodyContainer">
           Toggle
         </button>
       </div>
       <div id="vomitReactionsBodyContainer" class="collapse hide" aria-labelledby="vomitReactionsHeader" data-parent="#vomitReactions">
-        <div class="card-body" style="overflow: scroll; max-height: 500px;">
+        <div class="crayons-card__body" style="overflow: scroll; max-height: 500px;">
           <% @vomits.each do |reaction| %>
             <% next if (reaction.reactable_type == "Article" && !reaction.reactable.published) || (reaction.reactable_type == "User" && reaction.reactable&.banished?) %>
 
             <div
-              class="d-flex justify-content-between"
+              class="flex justify-content-between"
               data-controller="reaction"
               data-reaction-id-value="<%= reaction.id %>"
               data-reaction-url-value="<%= admin_reaction_path(reaction.id) %>">
@@ -39,17 +39,17 @@
                 <strong><%= reaction.reactable_type %>:</strong>
                 <a href="<%= reaction.reactable.path %>" target="_blank" rel="noopener"><%= reaction.reactable_type == "User" ? reaction.reactable.username : reaction.reactable.title %></a>
                 <% if reaction.reactable_type == "User" && reaction.reactable.suspended? %>
-                  <span class="badge badge-danger">Suspended</span>
+                  <span class="c-indicator c-indicator--danger">Suspended</span>
                 <% end %>
                 <% if reaction.reactable_type == "User" && reaction.reactable.vomited_on? %>
-                  <span class="badge badge-warning">Flagged</span>
+                  <span class="c-indicator c-indicator--warning">Flagged</span>
                 <% end %>
               </span>
               <span>
                 <% if params[:status] == "Open" || params[:status].blank? %>
                   <% if reaction.reactable_type == "User" %>
                     <button
-                      class="btn btn-success btn-sm"
+                      class="crayons-btn crayons-btn--success crayons-btn--s"
                       type="button"
                       data-reactable="user"
                       data-status="confirmed"
@@ -59,7 +59,7 @@
                     </button>
                   <% else %>
                     <button
-                      class="btn btn-success btn-sm"
+                      class="crayons-btn crayons-btn--success crayons-btn--s"
                       type="button"
                       data-reactable="non-user"
                       data-status="confirmed"
@@ -69,7 +69,7 @@
                     </button>
                   <% end %>
                   <button
-                    class="btn btn-danger btn-sm"
+                    class="crayons-btn crayons-btn--danger crayons-btn--s"
                     type="button"
                     data-altstatus="invalid"
                     data-reaction-target="invalid"
@@ -79,7 +79,7 @@
                 <% end %>
                 <% if params[:status] == "Resolved" %>
                   <button
-                    class="btn btn-warning text-white btn-sm"
+                    class="crayons-btn crayons-btn--warning crayons-btn--s"
                     type="button"
                     data-altstatus="invalid"
                     data-reaction-target="invalid"
@@ -88,7 +88,7 @@
                   </button>
                   <% elsif params[:status] == "Invalid" %>
                   <button
-                    class="btn btn-success btn-sm"
+                    class="crayons-btn crayons-btn--success crayons-btn--s"
                     type="button"
                     data-status="confirmed"
                     data-reaction-target="confirmed"
diff --git a/app/views/admin/feedback_messages/_feedback_message.html.erb b/app/views/admin/feedback_messages/_feedback_message.html.erb
index a5444a877..79f9c4fa5 100644
--- a/app/views/admin/feedback_messages/_feedback_message.html.erb
+++ b/app/views/admin/feedback_messages/_feedback_message.html.erb
@@ -15,9 +15,9 @@
     </div>
   </div>
   <div id="collapse<%= feedback_message.id %>" class="collapse show" aria-labelledby="header<%= feedback_message.id %>" data-parent="#accordion-<%= feedback_message.id %>">
-    <div class="card-body">
-      <div class="row">
-        <div class="col-9">
+    <div class="crayons-card__body">
+      <div class="flex flex-wrap -mx-4">
+        <div class="w-75 max-w-75 px-4">
           <h5 class="fw-bold">
           <% if feedback_message.offender %>
             Reporter and Affected:
@@ -52,12 +52,12 @@
           <% end %>
         </div>
 
-        <div class="col-3">
+        <div class="w-25 max-w-25 px-4">
           <h3 class="report__tags">
-            <span class="badge badge-warning float-right"><%= feedback_message.category.titleize %></span>
+            <span class="c-indicator c-indicator--warning float-right"><%= feedback_message.category.titleize %></span>
           </h3>
         </div>
-        <div class="col-12">
+        <div class="w-100 max-w-100 px-4">
           <% if feedback_message.offender %>
             <h5 class="fw-bold">
               Message from Offender:
@@ -71,7 +71,7 @@
             </h5>
             <p>
             <% if feedback_message.message.blank? %>
-              <span class="font-italic">No message was left.</span>
+              <span class="fs-italic">No message was left.</span>
             <% else %>
               <%= feedback_message.message %>
             <% end %>
@@ -80,8 +80,8 @@
         </div>
       </div>
       <hr>
-      <div class="row">
-        <div class="col-12">
+      <div class="flex flex-wrap -mx-4">
+        <div class="w-100 max-w-100 px-4">
           <h5 class="fw-bold">Previous Emails:</h5>
           <div class="previous__emails__container">
             <% if feedback_message_emails.any? %>
@@ -100,8 +100,8 @@
         </div>
       </div>
       <hr>
-      <div class="row">
-        <div class="col-12">
+      <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">
@@ -119,48 +119,48 @@
               <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>
-              <%= email_field_tag :reporter_email_to, feedback_message.reporter&.email, class: "form-control my-1", id: "reporter__emailto__#{feedback_message.id}", required: true %>
+              <%= email_field_tag :reporter_email_to, feedback_message.reporter&.email, class: "crayons-textfield my-1", id: "reporter__emailto__#{feedback_message.id}", required: true %>
               <h5 class="fw-bold">Subject:</h5>
-              <%= text_field_tag :reporter_email_subject, reporter_email_details[:subject], class: "form-control my-1", id: "reporter__subject__#{feedback_message.id}" %>
+              <%= text_field_tag :reporter_email_subject, reporter_email_details[:subject], class: "crayons-textfield my-1", id: "reporter__subject__#{feedback_message.id}" %>
               <h5 class="fw-bold">Body:</h5>
-              <%= text_area_tag :reporter_email_body, reporter_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "reporter__body__#{feedback_message.id}" %>
+              <%= 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 %>">
               <h5 class="fw-bold">Send To:</h5>
-              <%= email_field_tag :offender_email_to, feedback_message.offender&.email, class: "form-control my-1", id: "offender__emailto__#{feedback_message.id}", required: true %>
+              <%= 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>
-              <%= text_field_tag :offender_email_subject, offender_email_details[:subject], class: "form-control my-1", id: "offender__subject__#{feedback_message.id}" %>
+              <%= text_field_tag :offender_email_subject, offender_email_details[:subject], class: "crayons-textfield my-1", id: "offender__subject__#{feedback_message.id}" %>
               <h5 class="fw-bold">Body:</h5>
-              <%= text_area_tag :offender_email_body, offender_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "offender__body__#{feedback_message.id}" %>
+              <%= 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 %>">
               <h5 class="fw-bold">Send To:</h5>
-              <%= email_field_tag :affected_email_to, feedback_message.affected&.email, class: "form-control my-1", id: "affected__emailto__#{feedback_message.id}", required: true %>
+              <%= 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>
-              <%= text_field_tag :affected_email_subject, affected_email_details[:subject], class: "form-control my-1", id: "affected__subject__#{feedback_message.id}" %>
+              <%= text_field_tag :affected_email_subject, affected_email_details[:subject], class: "crayons-textfield my-1", id: "affected__subject__#{feedback_message.id}" %>
               <h5 class="fw-bold">Body:</h5>
-              <%= text_area_tag :affected_email_body, affected_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "affected__body__#{feedback_message.id}" %>
+              <%= text_area_tag :affected_email_body, affected_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "affected__body__#{feedback_message.id}" %>
             </div>
           </div>
-          <button class="btn btn-primary" type="button" id="send__email__btn__<%= feedback_message.id %>">Send Email ✉️</button>
+          <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 alert w-100 mt-2 d-none" id="email__alert__<%= feedback_message.id %>">
+      <div class="email__alert crayons-notice w-100 mt-2 d-none" id="email__alert__<%= feedback_message.id %>">
       </div>
-      <div class="row my-3">
-        <div class="col-12">
+      <div class="flex flex-wrap -mx-4 my-3">
+        <div class="w-100 max-w-100 px-4">
           <h3>Status:</h3>
           <%= f.select :status, %w[Open Invalid Resolved], {}, id: "status__#{feedback_message.id}" %>
-          <button class="btn btn-primary d-block mt-3" type="button" id="save__status__<%= feedback_message.id %>">Save Status</button>
+          <button class="c-btn c-btn--primary block mt-3" type="button" id="save__status__<%= feedback_message.id %>">Save Status</button>
         </div>
       </div>
-      <div class="row my-3">
-        <div class="col-12">
+      <div class="flex flex-wrap -mx-4 my-3">
+        <div class="w-100 max-w-100 px-4">
           <h3>Notes:</h3>
-          <div class="notes__container" id="notes__<%= feedback_message.id %>">
+          <div id="notes__<%= feedback_message.id %>">
             <% feedback_message.notes&.order(:created_at)&.each do |note| %>
-              <div class="border border-info bg-light rounded my-2 p-2">
-                <span class="badge badge-info float-right">
+              <div class="notes__border my-2 p-2">
+                <span class="c-indicator c-indicator--info float-right">
                   <%= time_ago_in_words note.created_at %> ago
                 </span>
                 <h5 class="font-weight-bold">
@@ -184,13 +184,13 @@
               class="notefield"
               id="note__content__<%= feedback_message.id %>"
               required>
-            <button class="btn btn-primary" type="button" id="note__submit__<%= feedback_message.id %>">Submit Note 📝</button>
+            <button class="c-btn c-btn--primary" type="button" id="note__submit__<%= feedback_message.id %>">Submit Note 📝</button>
           </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-12 d-flex justify-content-end">
-          <button class="btn btn-primary" type="button" id="minimize__report__button__<%= feedback_message.id %>">
+      <div class="flex flex-wrap -mx-4">
+        <div class="w-100 max-w-100 px-4 flex justify-content-end">
+          <button class="c-btn c-btn--primary" type="button" id="minimize__report__button__<%= feedback_message.id %>">
             Minimize Report
           </button>
         </div>
@@ -235,14 +235,14 @@
  });
 
  function successfulEmail(alert) {
-   alert.classList.remove("d-none");
-   alert.classList.add('alert-success');
+   alert.classList.remove("hidden");
+   alert.classList.add('crayons-notice--success');
    alert.innerHTML = "Email sent successfully! Refresh to see";
  }
 
  function failedEmail(alert) {
-   alert.classList.remove("d-none");
-   alert.classList.add('alert-danger');
+   alert.classList.remove("hidden");
+   alert.classList.add('crayons-notice--danger');
    alert.innerHTML = "Email failed to send, see console or Honeybadger for errors";
  }
 
@@ -255,14 +255,14 @@
    var subjectLine = document.getElementById(userType + "__subject__" + id).value;
    var emailBody = document.getElementById(userType + "__body__" + id).value;
 
-   alert.classList.add("d-none");
-   alert.classList.remove("alert-warning");
-   alert.classList.remove("alert-success");
-   alert.classList.remove("alert-danger");
+   alert.classList.add("hidden");
+   alert.classList.remove("crayons-notice--warning");
+   alert.classList.remove("crayons-notice--success");
+   alert.classList.remove("crayons-notice--danger");
 
    if (emailToAddress === "") {
-     alert.classList.remove("d-none");
-     alert.classList.add("alert-warning");
+     alert.classList.remove("hidden");
+     alert.classList.add("crayons-notice--warning");
      alert.innerHTML = "Email can't be blank!"
      return
    }
diff --git a/app/views/admin/feedback_messages/_style.html.erb b/app/views/admin/feedback_messages/_style.html.erb
index 4a5dacf70..f2aa8136e 100644
--- a/app/views/admin/feedback_messages/_style.html.erb
+++ b/app/views/admin/feedback_messages/_style.html.erb
@@ -33,4 +33,11 @@
    display: grid;
    justify-items: end;
  }
+ .notes__border{
+  border-style: solid;
+  border-width: 1px;
+  border-color: #17a2b8;
+  background-color: var(--base-0);
+  border-radius: 0.25rem;
+ }
 </style>
diff --git a/app/views/admin/feedback_messages/index.html.erb b/app/views/admin/feedback_messages/index.html.erb
index af3b39324..21cae4682 100644
--- a/app/views/admin/feedback_messages/index.html.erb
+++ b/app/views/admin/feedback_messages/index.html.erb
@@ -1,22 +1,22 @@
 <%= render "style" %>
 
-<h2 class="crayons-title mb-6">Suspicious activity</h2>
+<h1 class="crayons-title mb-6">Suspicious activity</h1>
 
 <div class="grid gap-6">
   <%= render "abuse_reports" %>
 
   <div class="crayons-card p-4">
-    <%= search_form_for @q, url: admin_feedback_messages_path, class: "form-inline crayons-card crayons-card--secondary p-4" do |f| %>
+    <%= search_form_for @q, url: admin_feedback_messages_path, class: "flex flex-row flex-wrap items-center crayons-card crayons-card--secondary p-3" do |f| %>
 
-      <%= f.label :reported_url_cont, "Reported URL", class: "sr-only" %>
-      <%= f.search_field :reported_url_cont, placeholder: "Reported URL", class: "form-control mr-2" %>
+      <%= f.label :reported_url_cont, "Reported URL", class: "crayons-field__label m-1 screen-reader-only" %>
+      <%= f.search_field :reported_url_cont, placeholder: "Reported URL", class: "crayons-textfield w-auto m-1" %>
 
-      <%= f.label :reporter_username_cont, "Reporter", class: "sr-only" %>
-      <%= f.search_field :reporter_username_cont, placeholder: "Reporter", class: "form-control mr-2" %>
+      <%= f.label :reporter_username_cont, "Reporter", class: "crayons-field__label m-1 screen-reader-only" %>
+      <%= f.search_field :reporter_username_cont, placeholder: "Reporter", class: "crayons-textfield w-auto m-1" %>
 
-      <%= f.select(:status_eq, options_for_select(%w[Open Invalid Resolved], @q.status_eq), { include_blank: true }, class: "custom-select mr-2") %>
+      <%= f.select(:status_eq, options_for_select(%w[Open Invalid Resolved], @q.status_eq), { include_blank: true }, class: "crayons-select w-auto m-1") %>
 
-      <%= f.submit "Search", class: "btn btn-secondary" %>
+      <%= f.submit "Search", class: "crayons-btn crayons-btn--secondary m-1" %>
     <% end %>
 
     <div class="pt-4 px-2 pb-4">
diff --git a/app/views/admin/profile_fields/_grouped_profile_fields.html.erb b/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
index 9009f1cce..5cd97e814 100644
--- a/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
+++ b/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
@@ -1,6 +1,6 @@
 <% @grouped_profile_fields.each do |group| %>
   <article id="profile-field-group-<%= group.id %>" class="flex flex-wrap -mx-4 my-3">
-    <div class="card w-100">
+    <div class="crayons-card w-100">
       <div class="card-header">
         <div class="card-header__information">
           <div class="fw-bold fs-l"><%= group.name %></div>
@@ -21,24 +21,26 @@
         </div>
       </div>
 
-      <div id="<%= dom_safe_name(group.name) %>BodyContainer" class="collapse hide p-3" aria-labelledby="<%= dom_safe_name(group.name) %>Header">
+      <div id="<%= dom_safe_name(group.name) %>BodyContainer" class="collapse hide" aria-labelledby="<%= dom_safe_name(group.name) %>Header">
         <% if group.profile_fields.empty? %>
-          <div> There are no profile fields configured for this group. </div>
+          <div class="m-3"> There are no profile fields configured for this group. </div>
         <% else %>
-          <% group.profile_fields.each do |field| %>
-            <details class="crayons-card mb-4" id="profile-field-<%= field.id %>">
-              <summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
-              <div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
-                <div class="flex flex-col p-6 mb-6 gap-1">
-                  <%= form_for [:admin, field] do |form| %>
-                    <%= render "profile_field_form", form: form, group: group %>
-                    <%= form.submit class: "c-btn c-btn--primary mt-4" %>
-                  <% end %>
-                  <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mt-4 mx-auto" %>
+          <div class="m-3">
+            <% group.profile_fields.each do |field| %>
+              <details class="crayons-card mb-4" id="profile-field-<%= field.id %>">
+                <summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
+                <div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
+                  <div class="flex flex-col p-6 mb-6 gap-1">
+                    <%= form_for [:admin, field] do |form| %>
+                      <%= render "profile_field_form", form: form, group: group %>
+                      <%= form.submit class: "c-btn c-btn--primary mt-4" %>
+                    <% end %>
+                    <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mt-4 mx-auto" %>
+                  </div>
                 </div>
-              </div>
-            </details>
-          <% end %>
+              </details>
+            <% end %>
+          </div>
         <% end %>
       </div>
     </div>