remove onboarding background image, use gradient based on brand color (#19815)

* remove background image, rename prop to refer to color, pass primary brand color * create helper method, send calculated gradient values into frontend props * test new helper method and refine how color is darkened
2023-07-27 07:27:21 -04:00 · 2023-07-27 07:27:21 -04:00 · cf7847fadb
commit cf7847fadb
parent 0b63876044
17 changed files with 51 additions and 44 deletions
--- a/app/helpers/color_helper.rb
+++ b/app/helpers/color_helper.rb
@ -0,0 +1,10 @@
+module ColorHelper
+  def gradient_from_hex(hex = "#4F46E5")
+    return { light: "#4f46e5", dark: "#312c8f" } unless hex.is_a? String
+
+    @gradient_from_hex ||= {
+      light: Color::CompareHex.new([hex]).brightness(1),
+      dark: Color::CompareHex.new([hex]).brightness(0.625)
+    }
+  end
+end
--- a/app/javascript/onboarding/Onboarding.jsx
+++ b/app/javascript/onboarding/Onboarding.jsx
@ -74,11 +74,13 @@ export class Onboarding extends Component {
      <main
        className="onboarding-body"
        style={
-          communityConfig.communityBackground
+          communityConfig.communityBackgroundColor &&
+          communityConfig.communityBackgroundColor2
            ? {
-                backgroundImage: `url(${communityConfig.communityBackground})`,
+                background: `linear-gradient(${communityConfig.communityBackgroundColor}, 
+                                             ${communityConfig.communityBackgroundColor2})`,
              }
-            : null
+            : { top: 777 }
        }
      >
        <FocusTrap
@ -95,7 +97,7 @@ export class Onboarding extends Component {
 Onboarding.propTypes = {
  communityConfig: PropTypes.shape({
    communityName: PropTypes.string.isRequired,
-    communityBackground: PropTypes.string.isRequired,
+    communityBackgroundColor: PropTypes.string.isRequired,
    communityLogo: PropTypes.string.isRequired,
    communityDescription: PropTypes.string.isRequired,
  }).isRequired,
--- a/app/javascript/onboarding/tests/Onboarding.test.jsx
+++ b/app/javascript/onboarding/tests/Onboarding.test.jsx
@ -16,7 +16,8 @@ describe('<Onboarding />', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#e6d800',
+          communityBackgroundColor2: '#999000',
          communityDescription: 'Some community description',
        }}
      />,
--- a/app/javascript/onboarding/components/tests/EmailPreferencesForm.test.jsx
+++ b/app/javascript/onboarding/components/tests/EmailPreferencesForm.test.jsx
@ -18,7 +18,7 @@ describe('EmailPreferencesForm', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#FFF000',
          communityDescription: 'Some community description',
        }}
        previousLocation={null}
--- a/app/javascript/onboarding/components/tests/FollowTags.test.jsx
+++ b/app/javascript/onboarding/components/tests/FollowTags.test.jsx
@ -18,7 +18,7 @@ describe('FollowTags', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#FFF000',
          communityDescription: 'Some community description',
        }}
        previousLocation={null}
--- a/app/javascript/onboarding/components/tests/FollowUsers.test.jsx
+++ b/app/javascript/onboarding/components/tests/FollowUsers.test.jsx
@ -20,7 +20,7 @@ describe('FollowUsers', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#FFF000',
          communityDescription: 'Some community description',
        }}
        previousLocation={null}
--- a/app/javascript/onboarding/components/tests/IntroSlide.test.jsx
+++ b/app/javascript/onboarding/components/tests/IntroSlide.test.jsx
@ -19,7 +19,7 @@ describe('IntroSlide', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#FFF000',
          communityDescription: 'Some community description',
        }}
        previousLocation={null}
--- a/app/javascript/onboarding/components/tests/ProfileForm.test.jsx
+++ b/app/javascript/onboarding/components/tests/ProfileForm.test.jsx
@ -19,7 +19,7 @@ describe('ProfileForm', () => {
        communityConfig={{
          communityName: 'Community Name',
          communityLogo: '/x.png',
-          communityBackground: '/y.jpg',
+          communityBackgroundColor: '#FFF000',
          communityDescription: 'Some community description',
        }}
        previousLocation={null}
--- a/app/javascript/packs/Onboarding.jsx
+++ b/app/javascript/packs/Onboarding.jsx
@ -14,7 +14,8 @@ function renderPage() {
  const communityConfig = {
    communityName: dataElement.dataset.communityName,
    communityLogo: dataElement.dataset.communityLogo,
-    communityBackground: dataElement.dataset.communityBackground,
+    communityBackgroundColor: dataElement.dataset.communityBackgroundColor,
+    communityBackgroundColor2: dataElement.dataset.communityBackgroundColor2,
    communityDescription: dataElement.dataset.communityDescription,
  };
  import('../onboarding/Onboarding')
--- a/app/lib/constants/settings/general.rb
+++ b/app/lib/constants/settings/general.rb
@ -86,10 +86,6 @@ module Constants
            description: "",
            placeholder: I18n.t("lib.constants.settings.general.meta_keywords.description")
          },
-          onboarding_background_image: {
-            description: I18n.t("lib.constants.settings.general.onboarding.description"),
-            placeholder: IMAGE_PLACEHOLDER
-          },
          payment_pointer: {
            description: I18n.t("lib.constants.settings.general.payment.description"),
            placeholder: "$pay.somethinglikethis.co/value"
--- a/app/models/settings/general.rb
+++ b/app/models/settings/general.rb
@ -84,7 +84,6 @@ module Settings
    setting :mailchimp_incoming_webhook_secret, type: :string, default: ""

    # Onboarding
-    setting :onboarding_background_image, type: :string, validates: { url: true, unless: -> { value.blank? } }
    setting :suggested_tags, type: :array, default: %w[]

    # Social Media
--- a/app/views/admin/settings/forms/_onboarding.html.erb
+++ b/app/views/admin/settings/forms/_onboarding.html.erb
@ -5,19 +5,6 @@
    <summary class="crayons-subtitle-2 p-6">Onboarding</summary>
    <div class="p-6 pt-0">
      <fieldset class="grid gap-4">
-        <div class="crayons-field">
-          <%= admin_config_label :onboarding_background_image %>
-          <%= admin_config_description Constants::Settings::General.details[:onboarding_background_image][:description] %>
-          <%= f.text_field :onboarding_background_image,
-                           class: "crayons-textfield",
-                           value: Settings::General.onboarding_background_image,
-                           placeholder: Constants::Settings::General.details[:onboarding_background_image][:placeholder] %>
-          <div class="flex flex-wrap flex-row -mx-4 mt-2">
-            <div class="w-100 max-w-100 px-4">
-              <img alt="onboarding background image" class="max-w-100 h-auto" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
-            </div>
-          </div>
-        </div>

        <div class="crayons-field">
          <%= admin_config_label :suggested_tags %>
--- a/app/views/onboardings/show.html.erb
+++ b/app/views/onboardings/show.html.erb
@ -15,7 +15,8 @@
  data-community-name="<%= j(community_name) %>"
  data-community-description="<%= j(Settings::Community.community_description) %>"
  data-community-logo="<%= optimized_image_url(Settings::General.logo_png) %>"
-  data-community-background="<%= optimized_image_url(Settings::General.onboarding_background_image, width: 1680, quality: 75, random_fallback: false) %>">
+  data-community-background-color="<%= gradient_from_hex(Settings::UserExperience.primary_brand_color_hex)[:light] %>"
+  data-community-background-color2="<%= gradient_from_hex(Settings::UserExperience.primary_brand_color_hex)[:dark] %>">
  <%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
 </div>

--- a/spec/helpers/color_helper_spec.rb
+++ b/spec/helpers/color_helper_spec.rb
@ -0,0 +1,22 @@
+require "rails_helper"
+
+describe ColorHelper do
+  describe "gradient_from_hex" do
+    it "accepts a hex string and returns an object with two colors for a gradient" do
+      yellow = "#fff000"
+      darker_yellow = "#9f9600"
+
+      expect(helper.gradient_from_hex(yellow)).to eq({ light: yellow, dark: darker_yellow })
+    end
+
+    it "fails gracefully when given a bad hex string" do
+      # default gradient is based on Dev.to brand defaults
+      expect(helper.gradient_from_hex("#oops")).to eq({ light: "#oops", dark: "#oops" })
+    end
+
+    it "defaults to dev.to brand colors when given a non-string value" do
+      # default gradient is based on Dev.to brand defaults
+      expect(helper.gradient_from_hex(0o00000)).to eq({ light: "#4f46e5", dark: "#312c8f" })
+    end
+  end
+end
--- a/spec/models/settings/general_spec.rb
+++ b/spec/models/settings/general_spec.rb
@ -5,7 +5,7 @@ RSpec.describe Settings::General do
    describe "validating URLs" do
      let(:url_fields) do
        %w[
-          main_social_image logo_png mascot_image_url onboarding_background_image
+          main_social_image logo_png mascot_image_url
        ]
      end

--- a/spec/requests/admin/configs_spec.rb
+++ b/spec/requests/admin/configs_spec.rb
@ -405,15 +405,6 @@ RSpec.describe "/admin/customization/config" do
      end

      describe "Onboarding" do
-        it "updates onboarding_background_image" do
-          expected_image_url = "https://dummyimage.com/300x300.png"
-          post admin_settings_general_settings_path, params: {
-            settings_general:
-            { onboarding_background_image: expected_image_url }
-          }
-          expect(Settings::General.onboarding_background_image).to eq(expected_image_url)
-        end
-
        it "removes space suggested_tags" do
          post admin_settings_general_settings_path, params: {
            settings_general: { suggested_tags: "hey, haha,hoho, bobo fofo" }
--- a/spec/requests/onboardings_spec.rb
+++ b/spec/requests/onboardings_spec.rb
@ -25,18 +25,15 @@ RSpec.describe "Onboardings" do
      get onboarding_url
      expect(response.body).to include("data-community-description")
      expect(response.body).to include("data-community-logo")
-      expect(response.body).to include("data-community-background")
+      expect(response.body).to include("data-community-background-color")
      expect(response.body).to include("data-community-name")
    end

    it "contains proper data attribute values if the onboarding config is present" do
-      allow(Settings::General).to receive(:onboarding_background_image).and_return("onboarding_background_image.png")
-
      sign_in user
      get onboarding_url

      expect(response.body).to include(Settings::Community.community_description)
-      expect(response.body).to include(Settings::General.onboarding_background_image)
    end
  end