From 3a50ae1b4fac6b9925ca7db24e449c34d83a2648 Mon Sep 17 00:00:00 2001
From: Lisa Sy <lisa@dev.to>
Date: Fri, 30 Oct 2020 10:24:11 -0700
Subject: [PATCH] [Crayons] Update tag page header (#11130) [deploy]

* Update tag page header

* Update small fixes

* Make small edits

* Update header layout

* Use "opacity-50" instead of part of a component

* Bringing back `p` since we're stripping other tags anyway :)

* Update to test to match new header

* Update test

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
Co-authored-by: Zhao-Andy <17884966+Zhao-Andy@users.noreply.github.com>
---
 .../stylesheets/user-profile-header.scss      | 17 -------
 app/assets/stylesheets/views.scss             |  1 +
 app/assets/stylesheets/views/tag.scss         | 14 +++++
 app/views/articles/tag_index.html.erb         | 51 +++++++++++--------
 app/views/articles/tags/_sidebar.html.erb     | 10 ----
 app/views/podcast_episodes/index.html.erb     |  2 +-
 .../user_visits_articles_by_tag_spec.rb       |  4 +-
 7 files changed, 47 insertions(+), 52 deletions(-)
 create mode 100644 app/assets/stylesheets/views/tag.scss

diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
index 147313b35..426d2e2b6 100644
--- a/app/assets/stylesheets/user-profile-header.scss
+++ b/app/assets/stylesheets/user-profile-header.scss
@@ -17,23 +17,6 @@
   @media screen and (min-width: 1100px) {
     padding: 25px 0px 11px;
   }
-  &.tag-header {
-    @media screen and (min-width: 1100px) {
-      padding: 0px 0px 1.2vw;
-    }
-    h1 {
-      font-size: calc(3vw + 23px);
-      margin-top: 1.2vw;
-      margin-bottom: 8px;
-      margin-left: 3%;
-      text-align: center;
-      width: 94%;
-      img {
-        max-height: calc(3vw + 33px);
-        max-width: calc(3vw + 33px);
-      }
-    }
-  }
   &.podcast-header {
     background: rgb(5, 22, 32);
     text-align: center;
diff --git a/app/assets/stylesheets/views.scss b/app/assets/stylesheets/views.scss
index ade82102f..614b6cebf 100644
--- a/app/assets/stylesheets/views.scss
+++ b/app/assets/stylesheets/views.scss
@@ -11,3 +11,4 @@
 @import 'views/signin';
 @import 'views/signup-modal';
 @import 'views/sponsors';
+@import 'views/tag';
diff --git a/app/assets/stylesheets/views/tag.scss b/app/assets/stylesheets/views/tag.scss
new file mode 100644
index 000000000..17b690142
--- /dev/null
+++ b/app/assets/stylesheets/views/tag.scss
@@ -0,0 +1,14 @@
+@import '../config/import';
+
+.tag-header {
+  padding: var(--su-4);
+  border-radius: 0;
+
+  @media (min-width: $breakpoint-m) {
+    border-radius: var(--radius);
+  }
+
+  @media (min-width: $breakpoint-l) {
+    padding: var(--su-6);
+  }
+}
diff --git a/app/views/articles/tag_index.html.erb b/app/views/articles/tag_index.html.erb
index 2d3b5f099..233c6da06 100644
--- a/app/views/articles/tag_index.html.erb
+++ b/app/views/articles/tag_index.html.erb
@@ -4,31 +4,38 @@
 <% expiry_minutes = params[:timeframe].blank? || params[:timeframe] == "latest" ? 4 : 20 %>
 <% flag = true %>
 <% cache("tag-stories-index-#{params}-#{flag}-#{@tag_model.updated_at}-#{user_signed_in?}", expires_in: expiry_minutes.minutes) do %>
-  <style>
-    .tag-header {
-      border: 2px solid<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
-      box-shadow: 5px 6px 0px<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
-    }
-  </style>
-  <div class="user-profile-header tag-header">
-    <div class="tag-or-query-header-container">
-      <h1>
+  <div class="crayons-layout">
+    <header class="tag-header crayons-card branded-4" style="border-top-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
+      <div class="flex gap-4">
         <% if @tag_model.badge_id && @tag_model.badge %>
-            <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 180) %>" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg);" />
+            <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
         <% end %>
-        <% if @tag_model && @tag_model.pretty_name.present? %>
-          <%= @tag_model.pretty_name %>
-        <% else %>
-          <%= @tag %>
-        <% end %>
-        <% if @tag_model %>
-            <span class="user-profile-follow-button-wrapper">
-              <button id="user-follow-butt" class="crayons-btn follow-action-button user-profile-follow-button" style="color:<%= @tag_model.text_color_hex %>;background-color:<%= @tag_model.bg_color_hex %>" data-info='{"id":<%= @tag_model.id %>,"className":"Tag"}'>&nbsp;</button>
-            </span>
-        <% end %>
-      </h1>
-    </div>
+        <div class="flex flex-col w-100 justify-center">
+          <div class="flex justify-between items-center">
+            <h1 class="crayons-title">
+              <% if @tag_model && @tag_model.pretty_name.present? %>
+                <%= @tag_model.pretty_name %>
+              <% else %>
+                <span class="opacity-50">#</span>
+                <%= @tag %>
+              <% end %>
+            </h1>
+            <% if @tag_model %>
+              <button id="user-follow-butt" class="crayons-btn follow-action-button" data-info='{"id":<%= @tag_model.id %>,"className":"Tag"}'>Follow</button>
+            <% end %>
+          </div>
+          <% if @tag_model && @tag_model.short_summary.present? %>
+            <p class="max-w-100 m:max-w-75 pt-2 s:pt-4">
+              <%= strip_tags(@tag_model.short_summary) %>
+            </p>
+          <% end %>
+        </div>
+      </div>
+      <% if @tag_model && @tag_model.short_summary.present? %>
+      <% end %>
+    </header>
   </div>
+
   <div class="home sub-home" id="index-container"
       data-params="<%= params.merge(sort_by: "hotness_score", sort_direction: "desc").to_json(only: %i[tag username sort_by sort_direction]) %>" data-which=""
       data-tag="<%= @tag %>"
diff --git a/app/views/articles/tags/_sidebar.html.erb b/app/views/articles/tags/_sidebar.html.erb
index 9f6ace981..16f7ba193 100644
--- a/app/views/articles/tags/_sidebar.html.erb
+++ b/app/views/articles/tags/_sidebar.html.erb
@@ -2,16 +2,6 @@
   <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
     <div class="sidebar-bg" id="sidebar-bg-left"></div>
     <div class="side-bar">
-      <% if @tag_model && @tag_model.short_summary.present? %>
-        <div class="widget">
-          <header>
-            <h4>#<%= @tag %> 👋</h4>
-          </header>
-          <div class="widget-body">
-            <%= sanitize @tag_model.short_summary %>
-          </div>
-        </div>
-      <% end %>
       <% if @tag_model && @tag_model.rules_html.present? %>
         <div class="widget">
           <header>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 843d5e342..b74505636 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -3,7 +3,7 @@
 <% end %>
 <% if @podcast %>
   <% image = Images::Optimizer.call(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", fetch_format: "jpg", crop: nil) %>
-  <div class="user-profile-header tag-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
+  <div class="user-profile-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
     <div class="tag-or-query-header-container">
       <h1><img class="record main-image" src="<%= Images::Optimizer.call(@podcast.image_url, crop: "fill", width: 420, height: 420) %>"
                alt="<%= @podcast.title %>" /> <%= @podcast.title %>
diff --git a/spec/system/articles/user_visits_articles_by_tag_spec.rb b/spec/system/articles/user_visits_articles_by_tag_spec.rb
index 02d33d8f6..9baff83c2 100644
--- a/spec/system/articles/user_visits_articles_by_tag_spec.rb
+++ b/spec/system/articles/user_visits_articles_by_tag_spec.rb
@@ -23,7 +23,7 @@ RSpec.describe "User visits articles by tag", type: :system do
       end
 
       it "shows the follow button", js: true, stub_elasticsearch: true do
-        within("h1") { expect(page).to have_button("Follow") }
+        within("header.tag-header") { expect(page).to have_button("Follow") }
       end
 
       it "shows correct articles count" do
@@ -59,7 +59,7 @@ RSpec.describe "User visits articles by tag", type: :system do
     it "shows the following button", js: true, stub_elasticsearch: true do
       wait_for_javascript
 
-      within("h1") { expect(page).to have_button("Following") }
+      within("header.tag-header") { expect(page).to have_button("Following") }
     end
 
     it "shows time buttons" do