Merge pull request #4746 from penpot/superalex-remove-a-b-testing-for-onboarding-questions

✨ Remove a/b testing code for onboarding questions

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -590,9 +590,6 @@
   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 {

frontend/resources/styles/common/refactor/color-defs.scss

@@ -11,7 +11,6 @@
   // 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)};
@@ -36,7 +35,6 @@
   // 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)};

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

@@ -37,7 +37,6 @@
   --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;

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

@@ -37,7 +37,6 @@
   --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;

frontend/src/app/main/ui/onboarding/newsletter.cljs

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

frontend/src/app/main/ui/onboarding/questions.cljs

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

frontend/src/app/main/ui/onboarding/team_choice.cljs

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

frontend/src/app/main/ui/releases/v2_0.cljs

@@ -8,203 +8,196 @@
   (: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]}]
-  (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"}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [: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-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"}]
+     0
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [: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-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"}]
+     1
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [: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-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"}]
+     2
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [: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-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"}]
+     3
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [: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"]]]]]])))