From 6f8c07aa696a6d2852ea71b26c3d3c78bfe33eac Mon Sep 17 00:00:00 2001
From: "Jeferson S. Brito" <30840709+jeferson-sb@users.noreply.github.com>
Date: Thu, 26 May 2022 07:59:32 -0300
Subject: [PATCH] Fix Stackoverflow liquid embedded styles (#17541)

* Fix Stackoverflow liquid embedded styles

* Fix extend cryaons styles

* Remove unnecessary alt descriptions

* Extend header selector to apply styles to old tags

* Add pointer-events to nested anchor on legacy html

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
---
 .../stylesheets/ltags/StackexchangeTag.scss   | 49 +++++++++----------
 app/views/liquids/_stackexchange.html.erb     | 14 +++---
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/app/assets/stylesheets/ltags/StackexchangeTag.scss b/app/assets/stylesheets/ltags/StackexchangeTag.scss
index f508c2afd..e6981067e 100644
--- a/app/assets/stylesheets/ltags/StackexchangeTag.scss
+++ b/app/assets/stylesheets/ltags/StackexchangeTag.scss
@@ -2,13 +2,13 @@
 
 .ltag__stackexchange--container {
   max-width: 620px;
-  border: 1px solid $light-medium-gray;
+  border: 1px solid var(--base-60);
   border-radius: 3px;
   box-shadow: $shadow;
   margin: 1.1em auto 1.3em;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
+  font-family: var(--ff-sans-serif);
   overflow: hidden;
+  padding-top: 1rem;
 
   .ltag__stackexchange--title-container {
     border-bottom: 1px solid #eaecef;
@@ -19,23 +19,26 @@
       display: flex;
       justify-content: space-between;
       .ltag__stackexchange--title {
-        h1 {
-          margin-left: 5px;
-          margin-bottom: 0;
-          margin-top: 8px;
-          font-size: 1.4em;
-          padding-bottom: 0;
+        h1,
+        .ltag__stackexchange--header {
+          font-size: var(--fs-l);
+          font-weight: var(--fw-normal);
+          line-height: var(--lh-base);
+          margin: 0em 0 0.5em;
+          padding: 0 var(--su-3);
+
           .title-flare {
             background: $sky-blue;
             color: white;
             padding: 0px 7px;
             border-radius: 3px;
           }
+
           img {
-            height: 44px;
-            width: 44px;
+            width: var(--su-7);
             display: inline-block;
-            vertical-align: -9px;
+            margin: 0 var(--su-2) 0 0;
+            vertical-align: middle;
           }
         }
       }
@@ -60,6 +63,7 @@
           position: initial;
           width: 16px;
           height: 16px;
+          margin: var(--su-2) auto;
         }
         .ltag__stackexchange--score-number {
           width: 100%;
@@ -141,22 +145,17 @@
     z-index: var(--z-elevate);
     text-align: center;
     position: relative;
-    box-shadow: 0px 0px 60px 42px #fff;
-    box-shadow: 0px 0px 60px 42px var(--card-bg);
+    box-shadow: 0 0 60px 42px var(--card-bg);
   }
 
   .ltag__stackexchange--btn {
-    color: #0366d6;
-    background-color: #f1f8ff;
-    border-radius: 3px;
-    line-height: 20px;
-    padding: 0.25em 1.2em;
-    opacity: 0.9;
-    font-weight: bold;
-    border: 1px solid #0366d6;
-    font-size: 0.75em;
-    &:hover {
-      opacity: 1;
+    @extend .crayons-btn !optional;
+    @extend .crayons-btn--secondary !optional;
+    
+    // A deprecated version of this liquid tag's HTML included a link _inside_ a button :-/
+    // This `revert` is needed to make sure the button click still opens the content
+    a {
+      pointer-events: revert;
     }
   }
 }
diff --git a/app/views/liquids/_stackexchange.html.erb b/app/views/liquids/_stackexchange.html.erb
index 35d323bbd..6500994da 100644
--- a/app/views/liquids/_stackexchange.html.erb
+++ b/app/views/liquids/_stackexchange.html.erb
@@ -3,12 +3,12 @@
     <header>
       <div class="ltag__stackexchange--title">
       <% logo_to_use = site == "stackoverflow" ? "stackoverflow-logo.svg" : "stackexchange-logo.svg" %>
-        <h1>
+        <div class="ltag__stackexchange--header">
           <img src="<%= ActionController::Base.helpers.asset_path(logo_to_use) %>" alt="">
-            <a href="<%= post_url %>" target="_blank" rel="noopener noreferrer">
-              <%= post_type == "question" ? CGI.unescapeHTML(title) : t("views.liquids.stackexchange.answer.text_html", answer: tag.span(t("views.liquids.stackexchange.answer.answer"), class: "title-flare"), title: CGI.unescapeHTML(title)) %>
-            </a>
-        </h1>
+          <a href="<%= post_url %>" target="_blank" rel="noopener noreferrer">
+            <%= post_type == "question" ? CGI.unescapeHTML(title) : t("views.liquids.stackexchange.answer.text_html", answer: tag.span(t("views.liquids.stackexchange.answer.answer"), class: "title-flare"), title: CGI.unescapeHTML(title)) %>
+          </a>
+        </div>
         <div class="ltag__stackexchange--post-metadata">
           <span><%= Time.zone.at(created_at).strftime(t("time.formats.stackexchange")) %></span>
           <% if post_type == "question" %>
@@ -32,8 +32,6 @@
     </p>
   </div>
   <div class="ltag__stackexchange--btn--container">
-    <button class="ltag__stackexchange--btn" type="button">
-      <a href="<%= post_url %>" target="_blank" rel="noopener noreferrer"><%= t("views.liquids.stackexchange.open.#{post_type}") %></a>
-    </button>
+    <a href="<%= post_url %>" class="ltag__stackexchange--btn" target="_blank" rel="noopener noreferrer"><%= t("views.liquids.stackexchange.open.#{post_type}") %></a>
   </div>
 </div>