From f1c875f84ef365f574ae100ead5e0d96ed66ed51 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Thu, 23 Sep 2021 10:33:05 -0400
Subject: [PATCH] [15 minute fix] Podcast fixes/clean up (#14790)

* Podcast fixes/clean up

* Remove unused pattern image line

* Fix tests
---
 app/assets/stylesheets/ltags/PodcastTag.scss  |  1 +
 .../stylesheets/user-profile-header.scss      | 75 +------------------
 app/views/organizations/_header.html.erb      |  2 +-
 app/views/podcast_episodes/_liquid.html.erb   |  7 +-
 app/views/podcast_episodes/index.html.erb     | 20 ++---
 app/views/podcast_episodes/show.html.erb      |  3 +-
 app/views/users/show.html.erb                 |  2 +-
 .../loggedOutFlows/showLoginModal.spec.js     |  2 +-
 .../podcastFlows/followPodcast.spec.js        |  2 +-
 9 files changed, 22 insertions(+), 92 deletions(-)

diff --git a/app/assets/stylesheets/ltags/PodcastTag.scss b/app/assets/stylesheets/ltags/PodcastTag.scss
index c15441322..942a919db 100644
--- a/app/assets/stylesheets/ltags/PodcastTag.scss
+++ b/app/assets/stylesheets/ltags/PodcastTag.scss
@@ -29,6 +29,7 @@
 
     a {
       color: white;
+      text-decoration: none;
 
       .tinyimage {
         width: 22px;
diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
index 61098c71e..a0e4551bf 100644
--- a/app/assets/stylesheets/user-profile-header.scss
+++ b/app/assets/stylesheets/user-profile-header.scss
@@ -79,6 +79,9 @@
     a {
       color: rgb(97, 97, 97);
     }
+    .crayons-btn--outlined {
+      background: white;
+    }
     .profile-pic-wrapper {
       float: left;
       width: calc(14.5vw + 60px);
@@ -254,76 +257,4 @@
     display: inline-block;
     margin-left: 5px;
   }
-  .user-profile-follow-button {
-    background: $green;
-    border: 0;
-    font-size: 17px;
-    border-radius: 3px;
-    vertical-align: 3px;
-    padding: 2px 6px;
-    cursor: pointer;
-    min-width: 120px;
-    opacity: 0.7;
-    &.showing {
-      opacity: 1;
-    }
-    @media screen and (min-width: 430px) {
-      font-size: 18px;
-      padding: 3px 8px;
-      vertical-align: 7px;
-      border-radius: 5px;
-      min-width: 140px;
-    }
-    @media screen and (min-width: 950px) {
-      font-size: 22px;
-      padding: 4px 8px;
-      vertical-align: 12px;
-      border-radius: 5px;
-      min-width: 140px;
-    }
-  }
-
-  // same as above, just add class to above style
-  .user-profile-chat-button-wrapper {
-    position: relative;
-    z-index: 5;
-    display: inline-block;
-    margin-left: 5px;
-  }
-
-  .user-profile-chat-button {
-    background: $green;
-    color: white;
-    border: 0;
-    font-size: 17px;
-    border-radius: 3px;
-    vertical-align: 3px;
-    padding: 2px 6px;
-    cursor: pointer;
-    min-width: 60px;
-    font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed',
-      'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed',
-      'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold',
-      'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica',
-      'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif;
-    -webkit-appearance: none;
-    font-stretch: condensed;
-    &.showing {
-      opacity: 1;
-    }
-    @media screen and (min-width: 430px) {
-      font-size: 18px;
-      padding: 3px 8px;
-      vertical-align: 7px;
-      border-radius: 5px;
-      min-width: 80px;
-    }
-    @media screen and (min-width: 950px) {
-      font-size: 22px;
-      padding: 4px 8px;
-      vertical-align: 12px;
-      border-radius: 5px;
-      min-width: 80px;
-    }
-  }
 }
diff --git a/app/views/organizations/_header.html.erb b/app/views/organizations/_header.html.erb
index 58dfa3e2d..7f9e54d0d 100644
--- a/app/views/organizations/_header.html.erb
+++ b/app/views/organizations/_header.html.erb
@@ -19,7 +19,7 @@
         <div class="profile-header__actions">
           <button
             id="user-follow-butt"
-            class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button"
+            class="crayons-btn whitespace-nowrap follow-action-button"
             data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>
             Follow
           </button>
diff --git a/app/views/podcast_episodes/_liquid.html.erb b/app/views/podcast_episodes/_liquid.html.erb
index cd891c36c..6e81ed3aa 100644
--- a/app/views/podcast_episodes/_liquid.html.erb
+++ b/app/views/podcast_episodes/_liquid.html.erb
@@ -1,14 +1,11 @@
-<% image_url = Images::Optimizer.call(podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", crop: nil, fetch_format: "jpg") %>
-
-<div class="podcastliquidtag" style="background: #<%= podcast.main_color_hex %> url(<%= image_url %>)" data-meta="<%= episode.decorate.mobile_player_metadata.to_json %>">
+<div class="podcastliquidtag" style="background: #<%= podcast.main_color_hex %>" data-meta="<%= episode.decorate.mobile_player_metadata.to_json %>">
   <div class="podcastliquidtag__info">
     <a href="/<%= podcast.slug %>/<%= episode.slug %>">
       <h1 class="podcastliquidtag__info__episodetitle"><%= episode.title %></h1>
     </a>
     <a href="/<%= podcast.slug %>" style="display:block">
       <h2 class="podcastliquidtag__info__podcasttitle">
-        <%= podcast.title %> <button class="crayons-btn follow-action-button" data-info='{"id":<%= podcast.id %>,"className":"<%= podcast.class.name %>", "name": <%= podcast.name %>}'>&nbsp;</button>
-
+        <%= podcast.title %>
       </h2>
     </a>
   </div>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 8e094c3c5..703675f5b 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -2,18 +2,20 @@
   <%= render "podcast_episodes/meta" %>
 <% 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 podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
+  <div class="user-profile-header podcast-header" style="background:#<%= @podcast.main_color_hex %>;">
     <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 %>
-               <button
-                id="user-follow-butt"
-                class="crayons-btn follow-action-button user-profile-follow-button"
-                data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>", "name": "<%= @podcast.name %>"}'>
-                  &nbsp;
-              </button>
-</h1>
+      </h1>
+      <h2>
+        <button
+          id="user-follow-butt"
+          class="crayons-btn follow-action-button"
+          style="min-width: 100px;"
+          data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>", "name": "<%= @podcast.name %>"}'>
+            &nbsp;
+        </button>
+      </h2>
     </div>
   </div>
 <% end %>
diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb
index cdf051156..d07dee3af 100644
--- a/app/views/podcast_episodes/show.html.erb
+++ b/app/views/podcast_episodes/show.html.erb
@@ -30,8 +30,7 @@
 
 <main id="main-content" class="podcast-episode-container" data-meta="<%= @episode.decorate.mobile_player_metadata.to_json %>">
   <div class="hero">
-    <% image_url = Images::Optimizer.call(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", fetch_format: "jpg", crop: nil) %>
-    <div class="title" style="background:#<%= @podcast.main_color_hex %> url(<%= image_url %>)">
+    <div class="title" style="background:#<%= @podcast.main_color_hex %>">
       <h2>
         <a href="/<%= @podcast.slug %>">
           <img aria-hidden="true" alt="<%= @podcast.title %>" src="<%= optimized_image_url(@podcast.image_url, width: 60, quality: 80) %>" /><%= @podcast.title %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index e5f588a05..4012edbae 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -35,7 +35,7 @@
                 </a>
               <% end %>
             <% end %>
-            <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
+            <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
             <div class="profile-dropdown ml-2 s:relative hidden" data-username="<%= @user.username %>">
               <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
                 <%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "User actions") %>
diff --git a/cypress/integration/seededFlows/loggedOutFlows/showLoginModal.spec.js b/cypress/integration/seededFlows/loggedOutFlows/showLoginModal.spec.js
index 6eb1057ad..0530e2c31 100644
--- a/cypress/integration/seededFlows/loggedOutFlows/showLoginModal.spec.js
+++ b/cypress/integration/seededFlows/loggedOutFlows/showLoginModal.spec.js
@@ -98,7 +98,7 @@ describe('Show log in modal', () => {
     cy.get('[data-follow-clicks-initialized]');
 
     cy.findByRole('heading', {
-      name: 'Developer on Fire Developer on Fire Follow',
+      name: 'Developer on Fire Developer on Fire',
     });
 
     verifyLoginModalBehavior(() =>
diff --git a/cypress/integration/seededFlows/podcastFlows/followPodcast.spec.js b/cypress/integration/seededFlows/podcastFlows/followPodcast.spec.js
index bd43168b4..a3a1ab3ba 100644
--- a/cypress/integration/seededFlows/podcastFlows/followPodcast.spec.js
+++ b/cypress/integration/seededFlows/podcastFlows/followPodcast.spec.js
@@ -11,7 +11,7 @@ describe('Follow podcast', () => {
     cy.get('[data-follow-clicks-initialized]');
 
     cy.findByRole('heading', {
-      name: 'Developer on Fire Developer on Fire Follow',
+      name: 'Developer on Fire Developer on Fire',
     });
 
     cy.findByRole('button', { name: 'Follow podcast: Developer on Fire' }).as(