From cf7847fadb64ced92ffdabe342e6b9439eb4ac6a Mon Sep 17 00:00:00 2001 From: Duke Greene Date: Thu, 27 Jul 2023 07:27:21 -0400 Subject: [PATCH] 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 --- app/helpers/color_helper.rb | 10 +++++++++ app/javascript/onboarding/Onboarding.jsx | 10 +++++---- .../onboarding/__tests__/Onboarding.test.jsx | 3 ++- .../__tests__/EmailPreferencesForm.test.jsx | 2 +- .../components/__tests__/FollowTags.test.jsx | 2 +- .../components/__tests__/FollowUsers.test.jsx | 2 +- .../components/__tests__/IntroSlide.test.jsx | 2 +- .../components/__tests__/ProfileForm.test.jsx | 2 +- app/javascript/packs/Onboarding.jsx | 3 ++- app/lib/constants/settings/general.rb | 4 ---- app/models/settings/general.rb | 1 - .../admin/settings/forms/_onboarding.html.erb | 13 ----------- app/views/onboardings/show.html.erb | 3 ++- spec/helpers/color_helper_spec.rb | 22 +++++++++++++++++++ spec/models/settings/general_spec.rb | 2 +- spec/requests/admin/configs_spec.rb | 9 -------- spec/requests/onboardings_spec.rb | 5 +---- 17 files changed, 51 insertions(+), 44 deletions(-) create mode 100644 app/helpers/color_helper.rb create mode 100644 spec/helpers/color_helper_spec.rb diff --git a/app/helpers/color_helper.rb b/app/helpers/color_helper.rb new file mode 100644 index 000000000..329c673f2 --- /dev/null +++ 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 diff --git a/app/javascript/onboarding/Onboarding.jsx b/app/javascript/onboarding/Onboarding.jsx index 11aaee493..56bfc40cd 100644 --- a/app/javascript/onboarding/Onboarding.jsx +++ b/app/javascript/onboarding/Onboarding.jsx @@ -74,11 +74,13 @@ export class Onboarding extends Component {
', () => { communityConfig={{ communityName: 'Community Name', communityLogo: '/x.png', - communityBackground: '/y.jpg', + communityBackgroundColor: '#e6d800', + communityBackgroundColor2: '#999000', communityDescription: 'Some community description', }} />, diff --git a/app/javascript/onboarding/components/__tests__/EmailPreferencesForm.test.jsx b/app/javascript/onboarding/components/__tests__/EmailPreferencesForm.test.jsx index 91ffbb62f..3d8918557 100644 --- 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} diff --git a/app/javascript/onboarding/components/__tests__/FollowTags.test.jsx b/app/javascript/onboarding/components/__tests__/FollowTags.test.jsx index 69adafa8e..6e9fde898 100644 --- 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} diff --git a/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx b/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx index ca35314c3..fd7ceef3b 100644 --- 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} diff --git a/app/javascript/onboarding/components/__tests__/IntroSlide.test.jsx b/app/javascript/onboarding/components/__tests__/IntroSlide.test.jsx index 029b7a837..a0854c102 100644 --- 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} diff --git a/app/javascript/onboarding/components/__tests__/ProfileForm.test.jsx b/app/javascript/onboarding/components/__tests__/ProfileForm.test.jsx index 6b31a2733..61b4423cb 100644 --- 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} diff --git a/app/javascript/packs/Onboarding.jsx b/app/javascript/packs/Onboarding.jsx index f47ff1c78..330a97767 100644 --- 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') diff --git a/app/lib/constants/settings/general.rb b/app/lib/constants/settings/general.rb index 08dec4c86..0fa8723be 100644 --- 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" diff --git a/app/models/settings/general.rb b/app/models/settings/general.rb index e78e5c87f..487bebb7d 100644 --- 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 diff --git a/app/views/admin/settings/forms/_onboarding.html.erb b/app/views/admin/settings/forms/_onboarding.html.erb index b89b643f6..b05973c53 100644 --- a/app/views/admin/settings/forms/_onboarding.html.erb +++ b/app/views/admin/settings/forms/_onboarding.html.erb @@ -5,19 +5,6 @@ Onboarding
-
- <%= 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] %> -
-
- onboarding background image -
-
-
<%= admin_config_label :suggested_tags %> diff --git a/app/views/onboardings/show.html.erb b/app/views/onboardings/show.html.erb index 9cce983de..a3473669e 100644 --- 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 %>
diff --git a/spec/helpers/color_helper_spec.rb b/spec/helpers/color_helper_spec.rb new file mode 100644 index 000000000..3716bdace --- /dev/null +++ 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 diff --git a/spec/models/settings/general_spec.rb b/spec/models/settings/general_spec.rb index c9fef1ad6..e892d13d1 100644 --- 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 diff --git a/spec/requests/admin/configs_spec.rb b/spec/requests/admin/configs_spec.rb index 1589d268c..8b709699f 100644 --- 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" } diff --git a/spec/requests/onboardings_spec.rb b/spec/requests/onboardings_spec.rb index b7da40ab2..7bed728e4 100644 --- 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