3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 10:51:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Remove a/b testing code for onboarding questions

Browse source
This commit is contained in:
Alejandro Alonso 2024-06-14 07:10:16 +02:00
parent 68741bb56f
commit 043769c255
8 changed files with 163 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -590,9 +590,6 @@
width: 100%; width: 100%;
z-index: $z-index-modal; z-index: $z-index-modal;
background-color: var(--overlay-color); background-color: var(--overlay-color);
&.onboarding-a-b-test {
background-color: var(--overlay-color-onboarding-a-b-test);
}
} }
.modal-container-base { .modal-container-base {

2
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -11,7 +11,6 @@
// Dark background // Dark background
--db-primary: #18181a; --db-primary: #18181a;
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; --db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
--db-primary-90: #{color.change(#18181a, $alpha: 0.9)};
--db-secondary: #000000; --db-secondary: #000000;
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)}; --db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)}; --db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
@ -36,7 +35,6 @@
// Light background // Light background
--lb-primary: #ffffff; --lb-primary: #ffffff;
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)};
--lb-primary-90: #{color.change(#ffffff, $alpha: 0.9)};
--lb-secondary: #e8eaee; --lb-secondary: #e8eaee;
--lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)}; --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
--lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)}; --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};

1
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -37,7 +37,6 @@
--color-info-foreground: var(--status-color-info-500); --color-info-foreground: var(--status-color-info-500);
--overlay-color: var(--db-primary-60); --overlay-color: var(--db-primary-60);
--overlay-color-onboarding-a-b-test: var(--db-primary-90);
--shadow-color: var(--db-secondary-30); --shadow-color: var(--db-secondary-30);
--radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset; --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;

1
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -37,7 +37,6 @@
--color-info-foreground: var(--status-color-info-500); --color-info-foreground: var(--status-color-info-500);
--overlay-color: var(--lb-primary-60); --overlay-color: var(--lb-primary-60);
--overlay-color-onboarding-a-b-test: var(--lb-primary-90);
--shadow-color: var(--lf-secondary-40); --shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;

9
frontend/src/app/main/ui/onboarding/newsletter.cljs
View file

@ -7,7 +7,6 @@
(ns app.main.ui.onboarding.newsletter (ns app.main.ui.onboarding.newsletter
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.config :as cf]
[app.main.data.events :as-alias ev] [app.main.data.events :as-alias ev]
[app.main.data.messages :as msg] [app.main.data.messages :as msg]
[app.main.data.users :as du] [app.main.data.users :as du]
@ -45,14 +44,10 @@
(assoc :label "newsletter:subscriptions") (assoc :label "newsletter:subscriptions")
(assoc :step 6))] (assoc :step 6))]
(st/emit! (ptk/data-event ::ev/event params) (st/emit! (ptk/data-event ::ev/event params)
(du/update-profile-props state))))) (du/update-profile-props state)))))]
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
[:div {:class (stl/css-case [:div {:class (stl/css-case
:modal-overlay true :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated.fadeInDown {:class (stl/css :modal-container)} [:div.animated.fadeInDown {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)} [:div {:class (stl/css :modal-left)}

9
frontend/src/app/main/ui/onboarding/questions.cljs
View file

@ -10,7 +10,6 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.events :as-alias ev] [app.main.data.events :as-alias ev]
[app.main.data.users :as du] [app.main.data.users :as du]
[app.main.store :as st] [app.main.store :as st]
@ -497,14 +496,10 @@
(fn [form] (fn [form]
(let [data (merge @clean-data (:clean-data @form))] (let [data (merge @clean-data (:clean-data @form))]
(reset! clean-data data) (reset! clean-data data)
(st/emit! (du/mark-questions-as-answered data))))) (st/emit! (du/mark-questions-as-answered data)))))]
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
[:div {:class (stl/css-case [:div {:class (stl/css-case
:modal-overlay true :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)}
[:div {:class (stl/css :modal-container) [:div {:class (stl/css :modal-container)
:ref container} :ref container}

9
frontend/src/app/main/ui/onboarding/team_choice.cljs
View file

@ -9,7 +9,6 @@
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.spec :as us] [app.common.spec :as us]
[app.config :as cf]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.messages :as msg] [app.main.data.messages :as msg]
@ -260,14 +259,10 @@
on-back on-back
(mf/use-fn (mf/use-fn
(fn [] (fn []
(swap! name* (constantly nil)))) (swap! name* (constantly nil))))]
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
[:div {:class (stl/css-case [:div {:class (stl/css-case
:modal-overlay true :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated.fadeIn {:class (stl/css :modal-container)} [:div.animated.fadeIn {:class (stl/css :modal-container)}
[:& left-sidebar] [:& left-sidebar]

321
frontend/src/app/main/ui/releases/v2_0.cljs
View file

@ -8,203 +8,196 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.config :as cf]
[app.main.ui.releases.common :as c] [app.main.ui.releases.common :as c]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
;; TODO: Review all copies and alt text ;; TODO: Review all copies and alt text
(defmethod c/render-release-notes "2.0" (defmethod c/render-release-notes "2.0"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(let [onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] (mf/html
(mf/html (case slide
(case slide :start
:start [:div {:class (stl/css-case :modal-overlay true)}
[:div {:class (stl/css-case :modal-overlay true [:div.animated {:class klass}
:onboarding-a-b-test onboarding-a-b-test?)} [:div {:class (stl/css :modal-container)}
[:div.animated {:class klass} [:img {:src "images/features/2.0-intro-image.png"
[:div {:class (stl/css :modal-container)} :class (stl/css :start-image)
[:img {:src "images/features/2.0-intro-image.png" :border "0"
:class (stl/css :start-image) :alt "A graphic illustration with Penpot style"}]
:border "0"
:alt "A graphic illustration with Penpot style"}]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
"Welcome to Penpot 2.0! "] "Welcome to Penpot 2.0! "]
[:div {:class (stl/css :version-tag)} [:div {:class (stl/css :version-tag)}
(dm/str "Version " version)]] (dm/str "Version " version)]]
[:div {:class (stl/css :features-block)} [:div {:class (stl/css :features-block)}
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)} [:spam {:class (stl/css :feature-title)}
"CSS Grid Layout: "] "CSS Grid Layout: "]
"Bring your designs to life, knowing that what you create is what developers code."] "Bring your designs to life, knowing that what you create is what developers code."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)} [:spam {:class (stl/css :feature-title)}
"Sleeker UI: "] "Sleeker UI: "]
"We’ve polished Penpot to make your experience smoother and more enjoyable."] "We’ve polished Penpot to make your experience smoother and more enjoyable."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)} [:spam {:class (stl/css :feature-title)}
"New Components System: "] "New Components System: "]
"Managing and using your design components got a whole lot better."] "Managing and using your design components got a whole lot better."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"And that’s not all - we’ve fined tuned performance and " "And that’s not all - we’ve fined tuned performance and "
"accessibility to give you a better and more fluid design experience."] "accessibility to give you a better and more fluid design experience."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
" Ready to dive in? Let 's get started!"]] " Ready to dive in? Let 's get started!"]]
[:div {:class (stl/css :navigation)} [:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn) [:button {:class (stl/css :next-btn)
:on-click next} "Continue"]]]]]] :on-click next} "Continue"]]]]]]
0 0
[:div {:class (stl/css-case :modal-overlay true [:div {:class (stl/css-case :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)} [:div.animated {:class klass}
[:div.animated {:class klass} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-container)} [:img {:src "images/features/2.0-css-grid.gif"
[:img {:src "images/features/2.0-css-grid.gif" :class (stl/css :start-image)
:class (stl/css :start-image) :border "0"
:border "0" :alt "Penpot's CSS Grid Layout"}]
:alt "Penpot's CSS Grid Layout"}]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
"CSS Grid Layout - Design Meets Development"]] "CSS Grid Layout - Design Meets Development"]]
[:div {:class (stl/css :feature)} [:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"The much-awaited Grid Layout introduces 2-dimensional" "The much-awaited Grid Layout introduces 2-dimensional"
" layout capabilities to Penpot, allowing for the creation" " layout capabilities to Penpot, allowing for the creation"
" of adaptive layouts by leveraging the power of CSS properties."] " of adaptive layouts by leveraging the power of CSS properties."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"It’s a host of new features, including columns and" "It’s a host of new features, including columns and"
" rows management, flexible units such as FR (fractions)," " rows management, flexible units such as FR (fractions),"
" the ability to create and name areas, and tons of new " " the ability to create and name areas, and tons of new "
"and unique possibilities within a design tool."] "and unique possibilities within a design tool."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"Designers will learn CSS basics while working, " "Designers will learn CSS basics while working, "
"and as always with Penpot, developers can pick" "and as always with Penpot, developers can pick"
" up the design as code to take it from there."]] " up the design as code to take it from there."]]
[:div {:class (stl/css :navigation)} [:div {:class (stl/css :navigation)}
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide slide {:slide slide
:navigate navigate :navigate navigate
:total 4}] :total 4}]
[:button {:on-click next [:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]] :class (stl/css :next-btn)} "Continue"]]]]]]
1 1
[:div {:class (stl/css-case :modal-overlay true [:div {:class (stl/css-case :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)} [:div.animated {:class klass}
[:div.animated {:class klass} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-container)} [:img {:src "images/features/2.0-new-ui.gif"
[:img {:src "images/features/2.0-new-ui.gif" :class (stl/css :start-image)
:class (stl/css :start-image) :border "0"
:border "0" :alt "Penpot's UI Makeover"}]
:alt "Penpot's UI Makeover"}]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
"UI Makeover - Smoother, Sharper, and Simply More Fun"]] "UI Makeover - Smoother, Sharper, and Simply More Fun"]]
[:div {:class (stl/css :feature)} [:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"We've completely overhauled Penpot's user interface. " "We've completely overhauled Penpot's user interface. "
"The improvements in consistency, the introduction of " "The improvements in consistency, the introduction of "
"new microinteractions, and attention to countless details" "new microinteractions, and attention to countless details"
" will significantly enhance the productivity and enjoyment of using Penpot."] " will significantly enhance the productivity and enjoyment of using Penpot."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"Furthermore, we’ve made several accessibility improvements, " "Furthermore, we’ve made several accessibility improvements, "
"with better color contrast, keyboard navigation," "with better color contrast, keyboard navigation,"
" and adherence to other best practices."]] " and adherence to other best practices."]]
[:div {:class (stl/css :navigation)} [:div {:class (stl/css :navigation)}
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide slide {:slide slide
:navigate navigate :navigate navigate
:total 4}] :total 4}]
[:button {:on-click next [:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]] :class (stl/css :next-btn)} "Continue"]]]]]]
2 2
[:div {:class (stl/css-case :modal-overlay true [:div {:class (stl/css-case :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)} [:div.animated {:class klass}
[:div.animated {:class klass} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-container)} [:img {:src "images/features/2.0-components.gif"
[:img {:src "images/features/2.0-components.gif" :class (stl/css :start-image)
:class (stl/css :start-image) :border "0"
:border "0" :alt "Penpot's new components system"}]
:alt "Penpot's new components system"}]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
"New Components System"]] "New Components System"]]
[:div {:class (stl/css :feature)} [:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"The new Penpot components system improves" "The new Penpot components system improves"
" control over instances, including their " " control over instances, including their "
"inheritances and properties overrides. " "inheritances and properties overrides. "
"Main components are now accessible as design" "Main components are now accessible as design"
" elements, allowing a better updating " " elements, allowing a better updating "
"workflow through instant changes synchronization."] "workflow through instant changes synchronization."]
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"And that’s not all, there are new capabilities " "And that’s not all, there are new capabilities "
"such as component swapping and annotations " "such as component swapping and annotations "
"that will help you to better manage your design systems."]] "that will help you to better manage your design systems."]]
[:div {:class (stl/css :navigation)} [:div {:class (stl/css :navigation)}
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide slide {:slide slide
:navigate navigate :navigate navigate
:total 4}] :total 4}]
[:button {:on-click next [:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]] :class (stl/css :next-btn)} "Continue"]]]]]]
3 3
[:div {:class (stl/css-case :modal-overlay true [:div {:class (stl/css-case :modal-overlay true)}
:onboarding-a-b-test onboarding-a-b-test?)} [:div.animated {:class klass}
[:div.animated {:class klass} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-container)} [:img {:src "images/features/2.0-html.gif"
[:img {:src "images/features/2.0-html.gif" :class (stl/css :start-image)
:class (stl/css :start-image) :border "0"
:border "0" :alt " Penpot's HTML code generator"}]
:alt " Penpot's HTML code generator"}]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
"And much more"]] "And much more"]]
[:div {:class (stl/css :feature)} [:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)} [:p {:class (stl/css :feature-content)}
"In addition to all of this, we’ve included several other requested improvements:"] "In addition to all of this, we’ve included several other requested improvements:"]
[:ul {:class (stl/css :feature-list)} [:ul {:class (stl/css :feature-list)}
[:li "Access HTML markup code directly in inspect mode"] [: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 "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 "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"]]] [: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 [:& c/navigation-bullets
{:slide slide {:slide slide
:navigate navigate :navigate navigate
:total 4}] :total 4}]
[:button {:on-click finish [:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]])))) :class (stl/css :next-btn)} "Let's go"]]]]]])))