From a041e5996e3d84c910236807c5c60033154d0683 Mon Sep 17 00:00:00 2001
From: "Thomasbnt.dev" <thomasbnt@protonmail.com>
Date: Thu, 12 Aug 2021 16:57:36 +0200
Subject: [PATCH] Edit buttons styles for Templates responses (Mod) (#14468)

* Edit buttons styles for Templates responses (Mod)

* Update comments.scss

* Edit classic CSS buttons to SCSS

* added m-1 to submit buttons

* Deleted CSS class for .response-templates-container and added mb-3 to header

* Add crayons-btn to personal and moderator buttons

* Update app/assets/stylesheets/views/comments.scss

Co-authored-by: rhymes <github@rhymes.dev>
---
 app/assets/stylesheets/views/comments.scss            | 6 ++++++
 app/javascript/responseTemplates/responseTemplates.js | 4 ++--
 app/views/comments/_form.html.erb                     | 6 +++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/views/comments.scss b/app/assets/stylesheets/views/comments.scss
index 3c116d771..2996cbea4 100644
--- a/app/assets/stylesheets/views/comments.scss
+++ b/app/assets/stylesheets/views/comments.scss
@@ -1,4 +1,5 @@
 @import '../config/import';
+@import '../components/buttons';
 
 .comment-form {
   --preview-display: none;
@@ -269,3 +270,8 @@
     color: var(--base-90);
   }
 }
+
+.personal-template-button:not(.active),
+.moderator-template-button:not(.active) {
+   @extend .crayons-btn--outlined;
+}
diff --git a/app/javascript/responseTemplates/responseTemplates.js b/app/javascript/responseTemplates/responseTemplates.js
index cc9bdcba3..f99745e5c 100644
--- a/app/javascript/responseTemplates/responseTemplates.js
+++ b/app/javascript/responseTemplates/responseTemplates.js
@@ -54,8 +54,8 @@ function buildHTML(response, typeOf) {
                 <p>${obj.content}</p>
               </div>
               <div class="flex flex-nowrap pl-2">
-                <button class="crayons-btn crayons-btn--s crayons-btn--secondary moderator-submit-button" type="submit" data-response-template-id="${obj.id}">Send as Mod</button>
-                <button class="crayons-btn crayons-btn--s crayons-btn--outlined insert-template-button" type="button" data-content="${obj.content}">Insert</button>
+                <button class="crayons-btn crayons-btn--s crayons-btn--secondary moderator-submit-button m-1" type="submit" data-response-template-id="${obj.id}">Send as Mod</button>
+                <button class="crayons-btn crayons-btn--s crayons-btn--outlined insert-template-button m-1" type="button" data-content="${obj.content}">Insert</button>
               </div>
             </div>
           `;
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index a65caf73f..ba1c823a1 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -67,9 +67,9 @@
     </div>
 
     <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
-      <header>
-        <button type="button" class="personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
-        <button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
+      <header class="mb-3">
+        <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
+        <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
       </header>
 
       <img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading" loading="lazy" />