diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 12c7961c8..858838d05 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -593,6 +593,9 @@ width: 100%; z-index: $z-index-modal; background-color: var(--overlay-color); + &.onboarding-a-b-test { + background-color: var(--overlay-color-onboarding-a-b-test); + } } .modal-container-base { diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index da1f0d784..c7048003d 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -11,6 +11,7 @@ // Dark background --db-primary: #18181a; --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; + --db-primary-90: #{color.change(#18181a, $alpha: 0.9)}; --db-secondary: #000000; --db-secondary-30: #{color.change(#000000, $alpha: 0.3)}; --db-secondary-80: #{color.change(#000000, $alpha: 0.8)}; @@ -35,6 +36,7 @@ // Light background --lb-primary: #ffffff; --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; + --lb-primary-90: #{color.change(#ffffff, $alpha: 0.9)}; --lb-secondary: #e8eaee; --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)}; --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)}; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 432906c9e..2b5feb06a 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -37,6 +37,7 @@ --color-info-foreground: var(--status-color-info-500); --overlay-color: var(--db-primary-60); + --overlay-color-onboarding-a-b-test: var(--db-primary-90); --shadow-color: var(--db-secondary-30); --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset; diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index cd9b6e61c..01e98c6cb 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -37,6 +37,8 @@ --color-info-foreground: var(--status-color-info-500); --overlay-color: var(--lb-primary-60); + --overlay-color-onboarding-a-b-test: var(--lb-primary-90); + --shadow-color: var(--lf-secondary-40); --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 3788ac3f5..f79b2e81a 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -142,7 +142,9 @@ (modal/show! {:type :onboarding-newsletter}) (contains? cf/flags :onboarding-team) - (modal/show! {:type :onboarding-team}))))] + (modal/show! {:type :onboarding-team})))) + + onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] (mf/with-effect [@slide] (when (not= :start @slide) @@ -151,8 +153,8 @@ (fn [] (reset! klass nil) (tm/dispose! sem)))) - - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} [:div.animated {:class (dm/str @klass " " (stl/css :animated))} (case @slide :start [:& onboarding-welcome {:next #(navigate :opensource)}] diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index e0336641e..4de6caf2f 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.onboarding.newsletter (:require-macros [app.main.style :as stl]) (:require + [app.config :as cf] [app.main.data.messages :as msg] [app.main.data.modal :as modal] [app.main.data.users :as du] @@ -35,9 +36,11 @@ (st/emit! (when (or @newsletter-updates @newsletter-news) (msg/success message)) (modal/show {:type :onboarding-team}) - (du/update-profile-props {:newsletter-updates @newsletter-updates :newsletter-news @newsletter-news}))))] + (du/update-profile-props {:newsletter-updates @newsletter-updates :newsletter-news @newsletter-news})))) + onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} [:div.animated.fadeInDown {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-left)} [:img {:src "images/deco-newsletter.png" diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index ae9f5d427..2c05f7ef5 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -287,9 +287,11 @@ (modal/show! {:type :onboarding-team}) :else - (modal/hide!)))))] + (modal/hide!))))) + onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} [:div {:class (stl/css :modal-container) :ref container} (case @step diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 86b710bcf..a9b4bbc4b 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -9,6 +9,7 @@ (:require [app.common.data.macros :as dmc] [app.common.spec :as us] + [app.config :as cf] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] [app.main.data.messages :as msg] @@ -84,14 +85,16 @@ ::ev/origin "onboarding" :step 1})))) - teams (mf/deref refs/teams)] + teams (mf/deref refs/teams) + onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] (mf/with-effect [teams] (when (> (count teams) 1) (st/emit! (modal/hide)))) (when (< (count teams) 2) - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} [:div.animated.fadeIn {:class (stl/css :modal-container)} [:& team-modal-left] [:div {:class (stl/css :separator)}] @@ -212,9 +215,11 @@ (if (> (count emails) 0) (on-invite-now form) (on-invite-later form)) - (modal/hide!))))] + (modal/hide!)))) + onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} [:div.animated.fadeIn {:class (stl/css :modal-container)} [:& team-modal-left] diff --git a/frontend/src/app/main/ui/releases/v2_0.cljs b/frontend/src/app/main/ui/releases/v2_0.cljs index 0c3af3060..511307544 100644 --- a/frontend/src/app/main/ui/releases/v2_0.cljs +++ b/frontend/src/app/main/ui/releases/v2_0.cljs @@ -8,196 +8,203 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] + [app.config :as cf] [app.main.ui.releases.common :as c] [rumext.v2 :as mf])) ;; TODO: Review all copies and alt text (defmethod c/render-release-notes "2.0" [{:keys [slide klass next finish navigate version]}] - (mf/html - (case slide - :start - [:div {:class (stl/css :modal-overlay)} - [:div.animated {:class klass} - [:div {:class (stl/css :modal-container)} - [:img {:src "images/features/2.0-intro-image.png" - :class (stl/css :start-image) - :border "0" - :alt "A graphic illustration with Penpot style"}] + (let [onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] + (mf/html + (case slide + :start + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-intro-image.png" + :class (stl/css :start-image) + :border "0" + :alt "A graphic illustration with Penpot style"}] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h1 {:class (stl/css :modal-title)} - "Welcome to Penpot 2.0! "] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "Welcome to Penpot 2.0! "] - [:div {:class (stl/css :version-tag)} - (dm/str "Version " version)]] + [:div {:class (stl/css :version-tag)} + (dm/str "Version " version)]] - [:div {:class (stl/css :features-block)} - [:p {:class (stl/css :feature-content)} - [:spam {:class (stl/css :feature-title)} - "CSS Grid Layout: "] - "Bring your designs to life, knowing that what you create is what developers code."] + [:div {:class (stl/css :features-block)} + [:p {:class (stl/css :feature-content)} + [:spam {:class (stl/css :feature-title)} + "CSS Grid Layout: "] + "Bring your designs to life, knowing that what you create is what developers code."] - [:p {:class (stl/css :feature-content)} - [:spam {:class (stl/css :feature-title)} - "Sleeker UI: "] - "We’ve polished Penpot to make your experience smoother and more enjoyable."] + [:p {:class (stl/css :feature-content)} + [:spam {:class (stl/css :feature-title)} + "Sleeker UI: "] + "We’ve polished Penpot to make your experience smoother and more enjoyable."] - [:p {:class (stl/css :feature-content)} - [:spam {:class (stl/css :feature-title)} - "New Components System: "] - "Managing and using your design components got a whole lot better."] + [:p {:class (stl/css :feature-content)} + [:spam {:class (stl/css :feature-title)} + "New Components System: "] + "Managing and using your design components got a whole lot better."] - [:p {:class (stl/css :feature-content)} - "And that’s not all - we’ve fined tuned performance and " - "accessibility to give you a better and more fluid design experience."] + [:p {:class (stl/css :feature-content)} + "And that’s not all - we’ve fined tuned performance and " + "accessibility to give you a better and more fluid design experience."] - [:p {:class (stl/css :feature-content)} - " Ready to dive in? Let 's get started!"]] + [:p {:class (stl/css :feature-content)} + " Ready to dive in? Let 's get started!"]] - [:div {:class (stl/css :navigation)} - [:button {:class (stl/css :next-btn) - :on-click next} "Continue"]]]]]] + [:div {:class (stl/css :navigation)} + [:button {:class (stl/css :next-btn) + :on-click next} "Continue"]]]]]] - 0 - [:div {:class (stl/css :modal-overlay)} - [:div.animated {:class klass} - [:div {:class (stl/css :modal-container)} - [:img {:src "images/features/2.0-css-grid.gif" - :class (stl/css :start-image) - :border "0" - :alt "Penpot's CSS Grid Layout"}] + 0 + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-css-grid.gif" + :class (stl/css :start-image) + :border "0" + :alt "Penpot's CSS Grid Layout"}] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h1 {:class (stl/css :modal-title)} - "CSS Grid Layout - Design Meets Development"]] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "CSS Grid Layout - Design Meets Development"]] - [:div {:class (stl/css :feature)} - [:p {:class (stl/css :feature-content)} - "The much-awaited Grid Layout introduces 2-dimensional" - " layout capabilities to Penpot, allowing for the creation" - " of adaptive layouts by leveraging the power of CSS properties."] + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "The much-awaited Grid Layout introduces 2-dimensional" + " layout capabilities to Penpot, allowing for the creation" + " of adaptive layouts by leveraging the power of CSS properties."] - [:p {:class (stl/css :feature-content)} - "It’s a host of new features, including columns and" - " rows management, flexible units such as FR (fractions)," - " the ability to create and name areas, and tons of new " - "and unique possibilities within a design tool."] + [:p {:class (stl/css :feature-content)} + "It’s a host of new features, including columns and" + " rows management, flexible units such as FR (fractions)," + " the ability to create and name areas, and tons of new " + "and unique possibilities within a design tool."] - [:p {:class (stl/css :feature-content)} - "Designers will learn CSS basics while working, " - "and as always with Penpot, developers can pick" - " up the design as code to take it from there."]] + [:p {:class (stl/css :feature-content)} + "Designers will learn CSS basics while working, " + "and as always with Penpot, developers can pick" + " up the design as code to take it from there."]] - [:div {:class (stl/css :navigation)} - [:& c/navigation-bullets - {:slide slide - :navigate navigate - :total 4}] + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 4}] - [:button {:on-click next - :class (stl/css :next-btn)} "Continue"]]]]]] + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] - 1 - [:div {:class (stl/css :modal-overlay)} - [:div.animated {:class klass} - [:div {:class (stl/css :modal-container)} - [:img {:src "images/features/2.0-new-ui.gif" - :class (stl/css :start-image) - :border "0" - :alt "Penpot's UI Makeover"}] + 1 + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-new-ui.gif" + :class (stl/css :start-image) + :border "0" + :alt "Penpot's UI Makeover"}] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h1 {:class (stl/css :modal-title)} - "UI Makeover - Smoother, Sharper, and Simply More Fun"]] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "UI Makeover - Smoother, Sharper, and Simply More Fun"]] - [:div {:class (stl/css :feature)} - [:p {:class (stl/css :feature-content)} - "We've completely overhauled Penpot's user interface. " - "The improvements in consistency, the introduction of " - "new microinteractions, and attention to countless details" - " will significantly enhance the productivity and enjoyment of using Penpot."] - [:p {:class (stl/css :feature-content)} - "Furthermore, we’ve made several accessibility improvements, " - "with better color contrast, keyboard navigation," - " and adherence to other best practices."]] + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "We've completely overhauled Penpot's user interface. " + "The improvements in consistency, the introduction of " + "new microinteractions, and attention to countless details" + " will significantly enhance the productivity and enjoyment of using Penpot."] + [:p {:class (stl/css :feature-content)} + "Furthermore, we’ve made several accessibility improvements, " + "with better color contrast, keyboard navigation," + " and adherence to other best practices."]] - [:div {:class (stl/css :navigation)} - [:& c/navigation-bullets - {:slide slide - :navigate navigate - :total 4}] + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 4}] - [:button {:on-click next - :class (stl/css :next-btn)} "Continue"]]]]]] + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] - 2 - [:div {:class (stl/css :modal-overlay)} - [:div.animated {:class klass} - [:div {:class (stl/css :modal-container)} - [:img {:src "images/features/2.0-components.gif" - :class (stl/css :start-image) - :border "0" - :alt "Penpot's new components system"}] + 2 + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-components.gif" + :class (stl/css :start-image) + :border "0" + :alt "Penpot's new components system"}] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h1 {:class (stl/css :modal-title)} - "New Components System"]] - [:div {:class (stl/css :feature)} - [:p {:class (stl/css :feature-content)} - "The new Penpot components system improves" - " control over instances, including their " - "inheritances and properties overrides. " - "Main components are now accessible as design" - " elements, allowing a better updating " - "workflow through instant changes synchronization."] - [:p {:class (stl/css :feature-content)} - "And that’s not all, there are new capabilities " - "such as component swapping and annotations " - "that will help you to better manage your design systems."]] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "New Components System"]] + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "The new Penpot components system improves" + " control over instances, including their " + "inheritances and properties overrides. " + "Main components are now accessible as design" + " elements, allowing a better updating " + "workflow through instant changes synchronization."] + [:p {:class (stl/css :feature-content)} + "And that’s not all, there are new capabilities " + "such as component swapping and annotations " + "that will help you to better manage your design systems."]] - [:div {:class (stl/css :navigation)} - [:& c/navigation-bullets - {:slide slide - :navigate navigate - :total 4}] + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 4}] - [:button {:on-click next - :class (stl/css :next-btn)} "Continue"]]]]]] + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] - 3 - [:div {:class (stl/css :modal-overlay)} - [:div.animated {:class klass} - [:div {:class (stl/css :modal-container)} - [:img {:src "images/features/2.0-html.gif" - :class (stl/css :start-image) - :border "0" - :alt " Penpot's HTML code generator"}] + 3 + [:div {:class (stl/css-case :modal-overlay true + :onboarding-a-b-test onboarding-a-b-test?)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-html.gif" + :class (stl/css :start-image) + :border "0" + :alt " Penpot's HTML code generator"}] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h1 {:class (stl/css :modal-title)} - "And much more"]] - [:div {:class (stl/css :feature)} - [:p {:class (stl/css :feature-content)} - "In addition to all of this, we’ve included several other requested improvements:"] - [:ul {:class (stl/css :feature-list)} - [:li "Access HTML markup code directly in inspect mode"] - [:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"] - [:li "Enjoy new color themes with options for both dark and light modes"] - [:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "And much more"]] + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "In addition to all of this, we’ve included several other requested improvements:"] + [:ul {:class (stl/css :feature-list)} + [:li "Access HTML markup code directly in inspect mode"] + [:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"] + [:li "Enjoy new color themes with options for both dark and light modes"] + [:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]] - [:div {:class (stl/css :navigation)} + [:div {:class (stl/css :navigation)} - [:& c/navigation-bullets - {:slide slide - :navigate navigate - :total 4}] + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 4}] - [:button {:on-click finish - :class (stl/css :next-btn)} "Let's go"]]]]]]))) + [:button {:on-click finish + :class (stl/css :next-btn)} "Let's go"]]]]]]))))