Change design of main feed CTA and remove from tag pages (#3050)

* Change design of main feed CTA and remove from tag pages (to prevent complexity) * Lock Chromedriver to 74.0.3729.6 * Fix tests and modify reserved words (tack on) * Removed less useful shared examples from rspec * Remove references to file that no longer exists in test * Remove unneeded tests
2019-06-05 14:33:22 -04:00 · 2019-06-05 14:33:22 -04:00 · df44cbd254
commit df44cbd254
parent 8e7bfe3cec
16 changed files with 67 additions and 80 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -23,7 +23,6 @@ before_install:
  - nvm install
 install:
  - bundle install --path vendor/bundle
-  - bundle exec rails runner bin/chromedriver-update
  - yarn install
  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64
    > ./cc-test-reporter
--- a/app/assets/images/rainbowdev.svg
+++ b/app/assets/images/rainbowdev.svg
@ -0,0 +1,29 @@
+<svg viewBox="0 0 235 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rainbow-logo"
+    preserveAspectRatio="xMinYMin meet">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="80K">
+      <polygon id="Shape" fill="#88AEDC" points="234.04 175.67 158.35 233.95 205.53 233.95 234.04 212"></polygon>
+      <polygon id="Shape" points="234.04 140.06 112.11 233.95 112.13 233.95 234.04 140.08"></polygon>
+      <polygon id="Shape" points="133.25 0.95 0.04 103.51 0.04 103.53 133.27 0.95"></polygon>
+      <polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="0.04 0.95 0.04 31.11 39.21 0.95"></polygon>
+      <polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="39.21 0.95 0.04 31.11 0.04 67.01 85.84 0.95"></polygon>
+      <polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="85.84 0.95 0.04 67.01 0.04 103.51 133.25 0.95"></polygon>
+      <polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="133.27 0.95 0.04 103.53 0.04 139.12 179.49 0.95"></polygon>
+      <polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 0.95 226.67 0.95 0.04 175.45 0.04 211.38 234.04 31.2"></polygon>
+      <polygon id="Shape" fill="#88AEDC" fill-rule="nonzero" points="179.49 0.95 0.04 139.12 0.04 175.45 226.67 0.95"></polygon>
+      <polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="234.04 31.2 0.04 211.38 0.04 233.95 18.07 233.95 234.04 67.65"></polygon>
+      <polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="234.04 67.65 18.07 233.95 64.7 233.95 234.04 103.56"></polygon>
+      <polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="234.04 103.56 64.7 233.95 112.11 233.95 234.04 140.06"></polygon>
+      <polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="234.04 140.08 112.13 233.95 158.35 233.95 234.04 175.67"></polygon>
+      <polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 212 205.53 233.95 234.04 233.95"></polygon>
+      <g id="Group" transform="translate(37.000000, 77.000000)" fill="#FFFFFF">
+        <path d="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z"
+              id="Combined-Shape"></path>
+        <path d="M93.7894737,7.25 L93.7894737,14.5 L68.2105263,14.5 L68.2105263,32.5 L83.7585139,32.5 L83.7585139,47 L68.2105263,47 L68.3108359,56.1 L68.4613003,65.25 L81.1504644,65.4 L93.7894737,65.5 L93.7894737,80 L78.993808,80 C62.5430341,80 59.9851393,79.7 57.3770898,77.4 C53.7157895,74.2 53.9164087,76.25 53.7659443,41.1 C53.6656347,19.2 53.8160991,8.85 54.1671827,7.45 C54.8693498,4.85 57.828483,1.65 60.4365325,0.75 C61.9913313,0.2 65.9034056,0.05 78.1411765,4.26325641e-14 L93.7894737,4.26325641e-14 L93.7894737,7.25 Z"
+              id="Path"></path>
+        <path d="M125.437152,28.1 C129.148607,42.35 132.258204,53.7 132.358514,53.35 C132.508978,53 135.668731,40.95 139.430341,26.5 L146.301548,0.25 L154.125697,0.1 C160.043963,7.10542736e-15 162,0.15 162,0.6 C162,1.05 144.64644,66.8 143.643344,70.1 C142.941176,72.4 139.179567,77.1 137.073065,78.35 C134.414861,79.85 130.502786,80.1 128.095356,78.85 C125.9387,77.75 123.079876,74.45 121.625387,71.35 C120.722601,69.45 105.97709,15.35 102.566563,1.35 L102.21548,0 L110.039628,0 C117.713313,0 117.913932,0 118.31517,1.1 C118.515789,1.75 121.725697,13.9 125.437152,28.1 Z"
+              id="Path"></path>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@ -1626,7 +1626,7 @@
 }

 .feed-cta {
-  background: lighten($purple, 3%) !important;
+  background: lighten($purple, 6%) !important;
  border: 1px solid darken($bold-blue, 5%) !important;
  box-shadow: 5px 6px 0px darken($bold-blue, 15%) !important;
  .cta-container {
@ -1637,28 +1637,45 @@
    text-align: center;
    margin-right: 9px;
    padding-right: 9px;
-    font-size: 1.3em;
+    font-size: 1.5em;
+  }
+  h3 {
+    text-align: center;
+    margin-right: 9px;
+    padding-right: 9px;
+    font-size: 17px !important;
  }
-
  .button-container {
    margin-top: 40px;
    text-align: center;
    margin-right: 9px;
    padding-right: 9px;
  }
+  img.rainbowdevimage {
+    width: 190px;
+    height: 190px;
+    margin: 18px auto 35px;
+    border-radius: 22px;
+    display: block;
+    transform: rotate(6deg);
+  }
  .cta-button {
    text-align: center;
    margin: 5px;
-    width: 95px;
-    padding: 3px 8px;
-    font-size: 1.15em;
+    padding: 12px 5px;
+    min-width: 230px;
+    font-size: 1.1em;
    display: inline-block;
    height: auto;
    text-align: center;
    font-weight: bold;
-    border-radius: 3px;
-    border: 2px solid $black;
-    background-color: rgb(102, 226, 213);
+    border-radius: 100px;
+    background-color: $bold-blue;
+    color: white !important;
+  }
+  .feed-cta-sub {
+    margin-top: 20px;
+    font-size: 15px;
  }
 }

--- a/app/models/organization.rb
+++ b/app/models/organization.rb
@ -31,7 +31,7 @@ class Organization < ApplicationRecord
            format: { with: /\A[a-zA-Z0-9\-_]+\Z/ },
            length: { in: 2..18 },
            exclusion: { in: ReservedWords.all,
-                         message: "%{value} is reserved." }
+                         message: "%{value} is a reserved word. Contact yo@dev.to for help registering your organization." }
  validates :url, url: { allow_blank: true, no_local: true, schemes: %w[https http] }
  validates :secret, uniqueness: { allow_blank: true }
  validates :location, :email, :company_size, length: { maximum: 64 }
--- a/app/views/articles/tags/_main_feed.html.erb
+++ b/app/views/articles/tags/_main_feed.html.erb
@ -1,7 +1,4 @@
 <% @stories.each_with_index do |story, i| %>
-  <% if !user_signed_in? && i == 4 %>
-    <%= render "stories/sign_in_invitation" %>
-  <% end %>
  <%= render "articles/single_story", story: story %>
 <% end %>
 <% if @stories.size > 1 %>
--- a/app/views/organizations/_main_feed.html.erb
+++ b/app/views/organizations/_main_feed.html.erb
@ -1,8 +1,5 @@
 <div id="organization-article-index"></div>
 <% @stories.each_with_index do |story, i| %>
-  <% if !user_signed_in? && i == 4 %>
-    <%= render "stories/sign_in_invitation" %>
-  <% end %>
  <%= render "articles/single_story", story: story %>
 <% end %>
 <% if @stories.size > 1 %>
--- a/app/views/stories/_sign_in_invitation.html.erb
+++ b/app/views/stories/_sign_in_invitation.html.erb
@ -1,19 +1,22 @@
 <div class="single-article single-article-small-pic feed-cta" id="in-feed-cta">
  <div class="cta-container" id="cta-content">
+    <img class="rainbowdevimage" src="<%= asset_path "rainbowdev.svg" %>" /> 
    <h2>
-      <% if @tag.blank? %>
-        Need more relevant posts?<br />Sign in to customize your feed:
-      <% else %>
-        <a href="/">dev.to</a> is a community of <br /><%= number_with_delimiter User.count %> amazing humans who code.
-      <% end %>
+      <a href="/">DEV</a> is a community of <br /><%= number_with_delimiter User.count %> amazing humans who code.
    </h2>
+    <h3>
+      Create your profile to customize your experience and get involved.
+    </h3>
    <div class="button-container">
      <a href="/users/auth/twitter?callback_url=<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>/users/auth/twitter/callback" class="cta cta-button" aria-label="Sign in with Twitter." data-no-instant>
-        TWITTER
+        Sign In with Twitter 
      </a>
      <a href="/users/auth/github?state=in-feed-cta" class="cta cta-button" aria-label="Sign in with GitHub." data-no-instant>
-        GITHUB
+        Sign In with GitHub
      </a>
+      <div class="feed-cta-sub">
+        <em>We require social login to prevent abuse.</em>
+      </div>
    </div>
  </div>
 </div>
--- a/app/views/users/_main_feed.html.erb
+++ b/app/views/users/_main_feed.html.erb
@ -1,7 +1,4 @@
 <% @stories.each_with_index do |story, i| %>
-  <% if !user_signed_in? && i == 4 %>
-    <%= render "stories/sign_in_invitation" %>
-  <% end %>
  <%= render "articles/single_story", story: story %>
  <% if i == 0 && @comments.any? %>
    <%= render "users/comments_section" %>
--- a/config/initializers/reserved_words.rb
+++ b/config/initializers/reserved_words.rb
@ -188,7 +188,6 @@ class ReservedWords
    yes
    social
    rails
-    angular
    script
    work
    1024
--- a/spec/support/initializers/capybara.rb
+++ b/spec/support/initializers/capybara.rb
@ -2,6 +2,7 @@ require "capybara/rails"
 require "capybara/rspec"
 require "webdrivers/chromedriver"

+Webdrivers::Chromedriver.required_version = "74.0.3729.6"
 Webdrivers.cache_time = 86_400

 Capybara.default_max_wait_time = 5
--- a/spec/system/articles/user_visits_articles_by_tag_spec.rb
+++ b/spec/system/articles/user_visits_articles_by_tag_spec.rb
@ -57,14 +57,6 @@ RSpec.describe "User visits articles by tag", type: :system do
        create_list(:article, 3, tags: "javascript", user: author, published_at: Time.current)
        visit "/t/javascript"
      end
-
-      it "shows the sign_in invitation", js: true do
-        within("#substories") do
-          expect(page).to have_content("amazing humans who code")
-          expect(page).to have_link("TWITTER")
-          expect(page).to have_link("GITHUB")
-        end
-      end
    end
  end

--- a/spec/system/homepage/user_visits_homepage_articles_spec.rb
+++ b/spec/system/homepage/user_visits_homepage_articles_spec.rb
@ -60,21 +60,6 @@ RSpec.describe "User visits a homepage", type: :system do
      articles.each { |a| a.update_column(:score, 31) }
    end

-    context "when unauthorized" do
-      before { visit "/" }
-
-      include_examples "shows the sign_in invitation"
-    end
-
-    context "when signed in" do
-      before do
-        sign_in user
-        visit "/"
-      end
-
-      include_examples "no sign_in invitation"
-    end
-
    describe "meta tags" do
      before { visit "/" }

--- a/spec/system/organization/user_views_an_organization_spec.rb
+++ b/spec/system/organization/user_views_an_organization_spec.rb
@ -40,8 +40,6 @@ RSpec.describe "Organization index", type: :system do
        create_list(:article, 3, organization: organization)
        visit "/#{organization.slug}"
      end
-
-      include_examples "shows the sign_in invitation"
    end
  end

--- a/spec/system/shared_examples/no_sign_in_invitation.rb
+++ b/spec/system/shared_examples/no_sign_in_invitation.rb
@ -1,9 +0,0 @@
-RSpec.shared_examples "no sign_in invitation" do
-  it "no sign_in invitation", js: true do
-    within("#substories") do
-      expect(page).not_to have_content("Sign in to customize your feed")
-      expect(page).not_to have_link("TWITTER")
-      expect(page).not_to have_link("GITHUB")
-    end
-  end
-end
--- a/spec/system/shared_examples/shows_sign_in_invitation.rb
+++ b/spec/system/shared_examples/shows_sign_in_invitation.rb
@ -1,9 +0,0 @@
-RSpec.shared_examples "shows the sign_in invitation" do
-  it "shows the sign_in invitation", js: true do
-    within("#substories") do
-      expect(page).to have_content("Sign in to customize your feed")
-      expect(page).to have_link("TWITTER")
-      expect(page).to have_link("GITHUB")
-    end
-  end
-end
--- a/spec/system/user/view_user_index_spec.rb
+++ b/spec/system/user/view_user_index_spec.rb
@ -57,15 +57,6 @@ RSpec.describe "User index", type: :system do
        end
      end
    end
-
-    context "when more articles" do
-      before do
-        create_list(:article, 4, user: user)
-        visit "/user3000"
-      end
-
-      include_examples "shows the sign_in invitation"
-    end
  end

  context "when visiting own profile" do