From 41acd673d01db71d44d642e3e4d4e48105b2e0ee Mon Sep 17 00:00:00 2001
From: Arit Amana <32520970+msarit@users.noreply.github.com>
Date: Tue, 10 May 2022 16:37:39 -0400
Subject: [PATCH] Make Follow Buttons in User, Org and Tag Embeds "secondary"
 (#17602)

* complete implementation

* Make PR review changes
---
 app/assets/stylesheets/ltags/TagTag.scss  | 17 +++--------------
 app/assets/stylesheets/ltags/UserTag.scss | 16 ++--------------
 app/helpers/application_helper.rb         |  2 +-
 app/views/organizations/_liquid.html.erb  |  9 +--------
 app/views/tags/_liquid.html.erb           |  9 +--------
 app/views/users/_liquid.html.erb          |  9 +--------
 6 files changed, 9 insertions(+), 53 deletions(-)

diff --git a/app/assets/stylesheets/ltags/TagTag.scss b/app/assets/stylesheets/ltags/TagTag.scss
index 8a8da6996..2ef347839 100644
--- a/app/assets/stylesheets/ltags/TagTag.scss
+++ b/app/assets/stylesheets/ltags/TagTag.scss
@@ -28,22 +28,11 @@
       margin: 0;
       padding: 0;
       font-weight: 500;
+      display: flex;
+      align-items: center;
       .follow-action-button {
         visibility: hidden;
-        min-height: 25px;
-        display: inline-block;
-        color: white;
-        background: $green;
-        border-radius: 5px;
-        font-size: 0.6em;
-        vertical-align: 0.1em;
-        padding: 2px 20px;
-        border: 1px solid $green;
-        cursor: pointer;
-        &.following-butt {
-          background: $green;
-          color: white;
-        }
+        margin: 0.2em 0.5em;
         &.showing {
           visibility: visible;
         }
diff --git a/app/assets/stylesheets/ltags/UserTag.scss b/app/assets/stylesheets/ltags/UserTag.scss
index 62c6dcd45..7af7933ca 100644
--- a/app/assets/stylesheets/ltags/UserTag.scss
+++ b/app/assets/stylesheets/ltags/UserTag.scss
@@ -49,23 +49,11 @@
       margin: 0;
       padding: 0;
       font-weight: 500;
+      display: flex;
+      align-items: center;
       .follow-action-button {
         visibility: hidden;
-        min-height: 25px;
-        display: inline-block;
-        color: white;
-        background: $green;
-        border-radius: 5px;
-        font-size: 0.6em;
-        vertical-align: 0.3em;
-        padding: 2px 20px;
-        border: 1px solid $green;
         margin: 0.2em 0.5em;
-        cursor: pointer;
-        &.following-butt {
-          background: $green;
-          color: white;
-        }
         &.showing {
           visibility: visible;
         }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3b22823c4..16890bc86 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -198,7 +198,7 @@ module ApplicationHelper
       data: {
         info: DataInfo.to_json(object: followable, className: followable_type, style: style)
       },
-      class: "crayons-btn follow-action-button whitespace-nowrap #{classes} #{user_follow}",
+      class: "c-btn follow-action-button whitespace-nowrap #{classes} #{user_follow}",
       aria: {
         label: I18n.t("helpers.application_helper.follow.aria_label.#{followable_type}",
                       name: followable_name,
diff --git a/app/views/organizations/_liquid.html.erb b/app/views/organizations/_liquid.html.erb
index 66f7373c8..d841daff9 100644
--- a/app/views/organizations/_liquid.html.erb
+++ b/app/views/organizations/_liquid.html.erb
@@ -1,11 +1,4 @@
 <div class="<%= "ltag__user ltag__user__id__#{organization.id}" %>" style="<%= "border-color:#{organization.darker_color};box-shadow: 3px 3px 0px #{organization.darker_color};" %>">
-  <style>
-    .ltag__user__id__<%= organization.id %> .follow-action-button {
-      background-color: <%= organization_colors[:bg] %> !important;
-      color: <%= organization_colors[:text] %> !important;
-      border-color: <%= organization_colors[:bg].casecmp("#ffffff").zero? ? organization_colors[:text] : organization_colors[:bg] %> !important;
-    }
-  </style>
   <a href="<%= organization.path %>" class="ltag__user__link profile-image-link">
     <div class="ltag__user__pic">
       <img src="<%= organization.profile_image_url_for(length: 150) %>" alt="<%= "#{organization.slug} image" %>" />
@@ -14,7 +7,7 @@
   <div class="ltag__user__content">
     <h2>
       <a href="/<%= organization.slug %>" class="ltag__user__link"><%= organization.name %></a>
-      <%= follow_button(organization) %>
+      <%= follow_button(organization, "full", "c-btn--secondary fs-base") %>
     </h2>
     <div class="ltag__user__summary">
       <a href="/<%= organization.slug %>" class="ltag__user__link">
diff --git a/app/views/tags/_liquid.html.erb b/app/views/tags/_liquid.html.erb
index 7a3736208..951fdf35a 100644
--- a/app/views/tags/_liquid.html.erb
+++ b/app/views/tags/_liquid.html.erb
@@ -1,13 +1,6 @@
 <div class="ltag__tag ltag__tag__id__<%= tag.id %>" style="border-color:<%= dark_color %>;box-shadow: 3px 3px 0px <%= dark_color %>;">
-  <style>
-    .ltag__tag__id__<%= tag.id %> .follow-action-button{
-      background-color: <%= tag.bg_color_hex %> !important;
-      color: <%= tag.text_color_hex %> !important;
-      border-color: <%= tag.bg_color_hex.to_s.casecmp("#ffffff").zero? ? tag.text_color_hex : tag.bg_color_hex %> !important;
-    }
-  </style>
     <div class="ltag__tag__content">
-      <h2>#<a href="<%= URL.tag tag %>" class="ltag__tag__link"><%= tag.name %></a> <%= follow_btn %></h2>
+      <h2>#<a href="<%= URL.tag tag %>" class="ltag__tag__link"><%= tag.name %></a> <%= follow_button(tag, "full", "c-btn--secondary fs-base") %></h2>
       <div class="ltag__tag__summary">
         <%= tag.short_summary %>
       </div>
diff --git a/app/views/users/_liquid.html.erb b/app/views/users/_liquid.html.erb
index 0de83f68d..f65f18362 100644
--- a/app/views/users/_liquid.html.erb
+++ b/app/views/users/_liquid.html.erb
@@ -1,11 +1,4 @@
 <div class="<%= "ltag__user ltag__user__id__#{user.id}" %>" style="<%= "border-color:#{user.darker_color};box-shadow: 3px 3px 0px #{user.darker_color};" %>">
-  <style>
-    .ltag__user__id__<%= user.id %> .follow-action-button {
-      background-color: <%= user_colors[:bg] %> !important;
-      color: <%= user_colors[:text] %> !important;
-      border-color: <%= user_colors[:bg].casecmp("#ffffff").zero? ? user_colors[:text] : user_colors[:bg] %> !important;
-    }
-  </style>
   <% if user_path.present? %>
     <a href="<%= user_path %>" class="ltag__user__link profile-image-link">
       <div class="ltag__user__pic">
@@ -18,7 +11,7 @@
     </div>
   <% end %>
   <div class="ltag__user__content">
-    <h2><%= link_to_if user_path.present?, user.name, user_path, class: "ltag__user__link" %><%= follow_button(user) %></h2>
+    <h2><%= link_to_if user_path.present?, user.name, user_path, class: "ltag__user__link" %><%= follow_button(user, "full", "c-btn--secondary fs-base") %></h2>
     <div class="ltag__user__summary">
       <%= link_to_if user_path.present?, user.tag_line, user_path, class: "ltag__user__link" %>
     </div>