Add minimal light theme (#3179)

app/assets/stylesheets/ltags/PollTag.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .ltag-poll {
   width: 600px;
@@ -74,7 +75,11 @@
         font-weight: bold;
       }
       &.ltag-optionnotvotedfor {
-        background: $light-medium-gray;
+        @include themeable(
+          background,
+          theme-container-accent-background,
+          $light-medium-gray
+        );
       }
     }
     .ltag-votepercenttext {

app/controllers/html_variants_controller.rb

@@ -4,11 +4,13 @@ class HtmlVariantsController < ApplicationController
   def index
     authorize HtmlVariant
     @html_variants = if params[:state] == "mine"
-                       current_user.html_variants.order("created_at DESC").includes(:user).page(params[:page]).per(15)
+                       current_user.html_variants.order("created_at DESC").includes(:user).page(params[:page]).per(30)
                      elsif params[:state] == "admin"
-                       HtmlVariant.where(published: true, approved: false).order("created_at DESC").includes(:user).page(params[:page]).per(15)
+                       HtmlVariant.where(published: true, approved: false).order("created_at DESC").includes(:user).page(params[:page]).per(30)
+                     elsif params[:state].present?
+                        HtmlVariant.where(published: true, approved: true, group: params[:state]).order("success_rate DESC").includes(:user).page(params[:page]).per(30)
                      else
-                       HtmlVariant.where(published: true, approved: true).order("success_rate DESC").includes(:user).page(params[:page]).per(15)
+                        HtmlVariant.where(published: true, approved: true).order("success_rate DESC").includes(:user).page(params[:page]).per(30)
                      end
   end
 

app/models/user.rb

@@ -117,8 +117,8 @@ class User < ApplicationRecord
                          message: "%{value} must be either v1 or v2" }
 
   validates :config_theme,
-            inclusion: { in: %w[default night_theme pink_theme],
-                         message: "%{value} must be either default, pink theme, or night theme" }
+            inclusion: { in: %w[default night_theme pink_theme minimal_light_theme],
+                         message: "%{value} is not a valid theme" }
   validates :config_font,
             inclusion: { in: %w[default sans_serif comic_sans],
                          message: "%{value} must be either default or sans serif" }

app/views/html_variants/index.html.erb

@@ -7,6 +7,9 @@
   <nav>
     <a href="/html_variants" class="<%= "selected" if params[:state].blank? %>">Leaderboard</a>
     <a href="/html_variants?state=mine" class="<%= "selected" if params[:state] == "mine" %>">Mine</a>
+    <a href="/html_variants?state=article_show_sidebar_cta" class="<%= "selected" if params[:state] == "article_show_sidebar_cta" %>">Show Page Sidebar</a>
+    <a href="/html_variants?state=article_show_below_article_cta" class="<%= "selected" if params[:state] == "article_show_below_article_cta" %>">Show Page Below Article</a>
+    <a href="/html_variants?state=badge_landing_page" class="<%= "selected" if params[:state] == "badge_landing_page" %>">Badge Landing Page</a>
   </nav>
   <% if params[:state] == "mine" %>
     <h2>My Entries</h2>

app/views/html_variants/show.html.erb

@@ -16,7 +16,7 @@
     </div>
   </div>
 <% else %>
-  <div class="primary-sticky-nav">
+  <div style="width: 310px">
     <div class="html-variant-wrapper">
       <%= @html_variant.html.html_safe %>
     </div>

app/views/layouts/_user_config.html.erb

@@ -3,8 +3,8 @@
     var bodyClass = localStorage.getItem('config_body_class');
     document.body.className = bodyClass;
     if (bodyClass.includes('night-theme')) {
-            document.getElementById('body-styles').innerHTML = '<style>\
-              :root {\
+      document.getElementById('body-styles').innerHTML = '<style>\
+        :root {\
         --theme-background: #0d1219;\
         --theme-color: #fff;\
         --theme-opposite-color: #0d1219;\
@@ -63,6 +63,36 @@
       --theme-subtle-border: 1px solid #ffa8c3;\
       --theme-social-icon-invert: invert(0);\
       --theme-prime-option-border-color: rgba(255, 255, 255, 0.55)</style>'
+    } else if(bodyClass.includes('minimal-light-theme')) {
+      document.getElementById('body-styles').innerHTML = '<style>\
+        :root {\
+        --theme-background: #fcfcfc;\
+        --theme-color: #0a0a0a;\
+        --theme-opposite-color: #ffffff;\
+        --theme-logo-background: #e3e5ed;\
+        --theme-logo-color: #232426;\
+        --theme-code-background: #f9f9f9;\
+        --theme-code-color: #37383d;\
+        --theme-reaction-background: #eff0f2;\
+        --theme-anchor-color: #757ec6;\
+        --theme-secondary-color: #505159;\
+        --theme-secondary-color-border: 1px solid #14364c;\
+        --theme-top-bar-background: #ffffff;\
+        --theme-top-bar-background-hover: #f9f9f9;\
+        --theme-top-bar-color: #0a0a0a;\
+        --theme-top-bar-search-background: #f4f5f7;\
+        --theme-top-bar-search-color: #0a0a0a;\
+        --theme-top-bar-write-background: #ffffff;\
+        --theme-top-bar-write-color: #0a0a0a;\
+        --theme-container-background: #ffffff;\
+        --theme-container-accent-background: #f4f5f7;\
+        --theme-container-background-hover: #efefef;\
+        --theme-gradient-background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);\
+        --theme-container-color: #0a0a0a;\
+        --theme-container-box-shadow: none;\
+        --theme-container-border: 1px solid #e3e3e5;\
+        --theme-subtle-border: 1px solid #fcfcfc;\
+        --theme-social-icon-invert: invert(0)</style>'
     }
     if (navigator.userAgent === 'DEV-Native-ios') {
       document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body");

app/views/users/_misc.html.erb

@@ -40,7 +40,7 @@
 <%= form_for(@user, html: { id: nil }) do |f| %>
   <div class="sub-field">
     <%= f.label :config_theme, "Site Theme" %>
-    <%= f.select(:config_theme, options_for_select(["default", "night theme", "pink theme"], @user.config_theme.tr("_", " "))) %>
+    <%= f.select(:config_theme, options_for_select(["default", "night theme", "minimal light theme", "pink theme"], @user.config_theme.tr("_", " "))) %>
     <sub><em>Default is light style. Night theme is in public alpha.</em></sub>
   </div>
   <div class="sub-field">

spec/models/user_spec.rb

@@ -556,6 +556,11 @@ RSpec.describe User, type: :model do
     expect(user.decorate.config_body_class).to eq("pink-theme default-article-body")
   end
 
+  it "creates proper body class with pink theme" do
+    user.config_theme = "minimal_light_theme"
+    expect(user.decorate.config_body_class).to eq("minimal-light-theme default-article-body")
+  end
+
   it "inserts into mailchimp" do
     expect(user.subscribe_to_mailchimp_newsletter_without_delay).to eq true
   end