From 5951beebcb9011e935eca851b0f1333543ad6b4c Mon Sep 17 00:00:00 2001
From: Ridhwana <Ridhwana.Khan16@gmail.com>
Date: Thu, 7 Sep 2023 10:32:53 +0200
Subject: [PATCH] Polish tag UI (#20038)

* feat: update the buttons

* chore: update the buttons to use c-btn

* feat: update the following tag to be crayons-btn crayons-btn--outlined

* feat: update the gap between the buttons

* feat: style for moile

* Empty commit
---
 .../javascripts/initializers/initScrolling.js |  4 +--
 app/assets/stylesheets/components/tags.scss   | 20 +++++++++++++
 app/javascript/tags/Tag.jsx                   | 12 ++++----
 app/views/dashboards/_tags.html.erb           |  5 ++--
 app/views/tags/index.html.erb                 | 28 +++++++++++--------
 5 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/initializers/initScrolling.js b/app/assets/javascripts/initializers/initScrolling.js
index b3b99e799..a186514de 100644
--- a/app/assets/javascripts/initializers/initScrolling.js
+++ b/app/assets/javascripts/initializers/initScrolling.js
@@ -145,14 +145,14 @@ function buildTagsHTML(tag) {
 
   if (tag.explicit_points < 0) {
     unhideButtonContainer = `<div>
-        <button class="crayons-btn crayons-btn--danger unhide-button">Unhide</button>
+        <button class="c-btn c-btn--primary c-btn--destructive unhide-button">Unhide</button>
       </div>`;
   }
 
   if (tag.explicit_points >= 0) {
     followingButtonContainer = `<div class="flex justify-between">
       <div>
-        <button class="c-btn c-btn--secondary follow-button" aria-label="Following tag:${tag.name}">Following</button>
+        <button class="crayons-btn crayons-btn--outlined follow-button" aria-label="Following tag:${tag.name}">Following</button>
       </div>
       <div class="dropdown-trigger-container relative">
         <button type="button" aria-label="Unhide tag: ${tag.name}" class="c-btn c-btn--icon-alone dropdown-trigger" id="options-dropdown-trigger-${tag.tag_id}" aria-haspopup="true" aria-expanded="false" aria-controls="options-dropdown">
diff --git a/app/assets/stylesheets/components/tags.scss b/app/assets/stylesheets/components/tags.scss
index 8462a3c1a..ca2cd8062 100644
--- a/app/assets/stylesheets/components/tags.scss
+++ b/app/assets/stylesheets/components/tags.scss
@@ -54,3 +54,23 @@
     height: 48px;
   }
 }
+
+@media (max-width: $breakpoint-s) {
+  .tags-index {
+    .crayons-page-header {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .tags-interaction-container {
+      justify-content: space-between;
+      width: 100%;
+      grid-gap: 4px;
+    }
+
+    .tags-interaction-container__buttons > :first-child {
+      padding-left: 0;
+    }
+  }
+}
diff --git a/app/javascript/tags/Tag.jsx b/app/javascript/tags/Tag.jsx
index c19491bc0..0b13f0990 100644
--- a/app/javascript/tags/Tag.jsx
+++ b/app/javascript/tags/Tag.jsx
@@ -62,8 +62,10 @@ export const Tag = ({ id, name, isFollowing, isHidden }) => {
     followingButton = (
       <button
         onClick={toggleFollowButton}
-        className={`crayons-btn ${
-          following ? 'crayons-btn--outlined' : 'crayons-btn--primary'
+        className={`${
+          following
+            ? 'crayons-btn crayons-btn--outlined'
+            : 'c-btn c-btn--primary'
         }`}
         aria-pressed={following}
         aria-label={`${followButtonLabel} tag: ${name}`}
@@ -74,13 +76,11 @@ export const Tag = ({ id, name, isFollowing, isHidden }) => {
   }
 
   return (
-    <div>
+    <div className="flex gap-2">
       {followingButton}
       <button
         onClick={toggleHideButton}
-        className={`crayons-btn ${
-          hidden ? 'crayons-btn--danger' : 'crayons-btn--ghost'
-        }`}
+        className={`c-btn ${hidden ? 'c-btn--primary c-btn--destructive' : ''}`}
         aria-label={`${hideButtonLabel} tag: ${name}`}
       >
         {hideButtonLabel}
diff --git a/app/views/dashboards/_tags.html.erb b/app/views/dashboards/_tags.html.erb
index 4ee4e30ad..ba50d1b54 100644
--- a/app/views/dashboards/_tags.html.erb
+++ b/app/views/dashboards/_tags.html.erb
@@ -16,11 +16,10 @@
         <% end %>
 
         <div class="dashboard__tag__buttons-container">
-          <%# we could use positive explicit points %>
           <% if page === "following" %>
             <div class="flex justify-between">
               <div>
-                <button class="c-btn c-btn--secondary follow-button" aria-label="Following tag: <%= tag.name %>"><%= t("views.dashboard.tags.following_button") %></button>
+                <button class="crayons-btn crayons-btn--outlined follow-button" aria-label="Following tag: <%= tag.name %>"><%= t("views.dashboard.tags.following_button") %></button>
               </div>
               <div class="dropdown-trigger-container relative">
                 <button type="button" class="c-btn c-btn--icon-alone dropdown-trigger" id="options-dropdown-trigger-<%= tag.id %>" aria-haspopup="true" aria-expanded="false" aria-controls="options-dropdown">
@@ -41,7 +40,7 @@
 
           <% if page === "hidden" %>
             <div>
-              <button class="crayons-btn crayons-btn--danger unhide-button" aria-label="Unhide tag: <%= tag.name %>"><%= t("views.dashboard.tags.unhide_button") %></button>
+              <button class="c-btn c-btn--primary c-btn--destructive unhide-button" aria-label="Unhide tag: <%= tag.name %>"><%= t("views.dashboard.tags.unhide_button") %></button>
             </div>
           <% end %>
         </div>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 27183f485..086b851a3 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -28,18 +28,22 @@
         <%= t("views.tags.heading.default") %>
       <% end %>
     </h1>
-    <form accept-charset="UTF-8" method="get" action="<%= tags_path %>" role="search">
-      <div class="crayons-fields crayons-fields--horizontal">
+    <div class="tags-interaction-container flex flex-col m:flex-row">
+      <div class="tags-interaction-container__buttons">
         <%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
         <%= link_to t("views.tags.hidden_tags"), dashboard_hidden_tags_path, class: "crayons-btn crayons-btn--ghost" %>
-        <div class="crayons-field flex-1 relative">
-          <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" aria-label="<%= t("views.tags.search.aria_labels.search_input") %>" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
-          <button type="submit" aria-label="<%= t("views.tags.search.aria_labels.submit") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
-            <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
-          </button>
-        </div>
       </div>
-    </form>
+      <form accept-charset="UTF-8" method="get" action="<%= tags_path %>" role="search">
+        <div class="crayons-fields crayons-fields--horizontal">
+          <div class="crayons-field flex-1 relative">
+            <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" aria-label="<%= t("views.tags.search.aria_labels.search_input") %>" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
+            <button type="submit" aria-label="<%= t("views.tags.search.aria_labels.submit") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
+              <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
   </header>
   <% if @tags.empty? %>
     <div class="articles-list crayons-layout__content" id="articles-list" data-follow-button-container="true">
@@ -62,14 +66,14 @@
             <% end %>
           </div>
           <div id="tag-buttons-<%= tag.id %>" class="mt-auto flex items-end justify-between">
-            <div>
+            <div class="flex gap-2">
               <button
-                class="crayons-btn crayons-btn--primary follow-action-button"
+                class="c-btn c-btn--primary follow-action-button"
                 aria-label="<%= t("views.tags.aria_labels.follow", tag_name: tag.name) %>">
                 <%= t("views.tags.follow") %>
               </button>
               <button
-                class="crayons-btn crayons-btn--ghost hide-action-button"
+                class="c-btn hide-action-button"
                 aria-label="<%= t("views.tags.aria_labels.hide", tag_name: tag.name) %>">
                 <%= t("views.tags.hide") %>
               </button>