From e200ed616c0db2402fc3533618c3cb132605286a Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Thu, 30 May 2024 11:15:27 +0200
Subject: [PATCH 1/6] :tada: Add a/b test for onboarding questions

---
 .../styles/common/refactor/basic-rules.scss   |   3 +
 .../styles/common/refactor/color-defs.scss    |   2 +
 .../common/refactor/themes/default-theme.scss |   1 +
 .../common/refactor/themes/light-theme.scss   |   2 +
 frontend/src/app/main/ui/onboarding.cljs      |   8 +-
 .../app/main/ui/onboarding/newsletter.cljs    |   7 +-
 .../src/app/main/ui/onboarding/questions.cljs |   6 +-
 .../app/main/ui/onboarding/team_choice.cljs   |  13 +-
 frontend/src/app/main/ui/releases/v2_0.cljs   | 321 +++++++++---------
 9 files changed, 195 insertions(+), 168 deletions(-)

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"]]]]]]))))
 

From 06221c37a3cb25f7047b7ea579cd9e11494ece2b Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Mon, 3 Jun 2024 13:04:49 +0200
Subject: [PATCH 2/6] Update THANKYOU.md

---
 THANKYOU.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/THANKYOU.md b/THANKYOU.md
index 1a27aa8eb..77a1483aa 100644
--- a/THANKYOU.md
+++ b/THANKYOU.md
@@ -6,6 +6,7 @@ We want to thank to the amazing people that help us! Thank you! You're the best!
 * Husnain Iqbal (CEO OF ALPHA INFERNO PVT LTD)
 * [Shiraz Ali Khan](https://www.linkedin.com/in/shiraz-ali-khan-1ba508180/)
 * Vaibhav Shukla
+* Hassan Ahmed (Alias Xen Lee)
 
 ## Internationalization
 * [00ff88](https://hosted.weblate.org/user/00ff88)

From de7880b4a29aab9bb3c32cb1055215ab0844775b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 30 May 2024 14:31:52 +0200
Subject: [PATCH 3/6] :bug: Fix color names in palette being clipped and not
 breaking at dot characters

---
 frontend/src/app/main/ui/components/color_bullet.cljs | 6 +++++-
 frontend/src/app/main/ui/components/color_bullet.scss | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 0c857cc3d..1a39f1750 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -44,6 +44,10 @@
         (some? image)
         (tr "media.image")))))
 
+(defn- breakable-color-title
+  [title]
+  (str/replace title "." ".\u200B"))
+
 (mf/defc color-bullet
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
@@ -112,4 +116,4 @@
               :title name
               :on-click on-click
               :on-double-click on-double-click}
-       (or name color (uc/gradient-type->string (:type gradient)))])))
+       (breakable-color-title (or name color (uc/gradient-type->string (:type gradient))))])))
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index 3a8e0e202..cdfcb6c07 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -86,6 +86,7 @@
 .big-text {
   @include inspectValue;
   @include twoLineTextEllipsis;
+  line-height: 1;
   color: var(--palette-text-color);
   height: $s-28;
   text-align: center;

From 8f0fd0a6e280c79888a1c950452c0984cc52140f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 30 May 2024 15:48:06 +0200
Subject: [PATCH 4/6] :bug: Fix wrong css selector applied globally and
 affecting the palette

---
 frontend/src/app/main/ui/components/forms.scss        | 9 ++++-----
 frontend/src/app/main/ui/workspace/color_palette.scss | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index d29571542..69c6dcd0b 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -259,11 +259,10 @@
 // SUBMIT-BUTTON
 .button-submit {
   @extend .button-primary;
-}
-
-:disabled {
-  @extend .button-disabled;
-  min-height: $s-32;
+  &:disabled {
+    @extend .button-disabled;
+    min-height: $s-32;
+  }
 }
 
 // MULTI INPUT
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 4815dee3e..019704155 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -62,7 +62,8 @@
       var(--palette-button-shadow-final) 100%
     );
   }
-  &.disabled ::after {
+
+  &:disabled::after {
     background-image: none;
   }
 

From 258aaf81d5ea6b61a276f87f462d85cd8fe9305e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Mon, 3 Jun 2024 15:28:24 +0200
Subject: [PATCH 5/6] :bug: Fix color palette inner scroll width

---
 .../app/main/ui/workspace/color_palette.cljs  | 16 ++++----
 .../app/main/ui/workspace/color_palette.scss  | 39 +++++++++----------
 .../src/app/main/ui/workspace/palette.cljs    |  1 -
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index b48eb89dc..62c414614 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -41,27 +41,29 @@
         state          (mf/use-state {:show-menu false})
         offset-step (cond
                       (<= size 64) 40
-                      (<= size 72) 88
-                      (<= size 80) 88
-                      :else 88)
+                      (<= size 80) 72
+                      :else 72)
         buttons-size (cond
                        (<= size 64) 164
-                       (<= size 72) 164
-                       (<= size 80) 132
                        :else 132)
         width          (- width buttons-size)
         visible        (int (/ width offset-step))
         show-arrows?   (> (count current-colors) visible)
+        visible        (if show-arrows?
+                         (int (/ (- width 48) offset-step))
+                         visible)
         offset         (:offset @state 0)
         max-offset     (- (count current-colors)
                           visible)
-
         container      (mf/use-ref nil)
         bullet-size  (cond
                        (<= size 64) "32"
                        (<= size 72) "28"
                        (<= size 80) "32"
                        :else "32")
+        color-cell-width (cond
+                           (<= size 64) 32
+                           :else 64)
 
         on-left-arrow-click
         (mf/use-callback
@@ -103,7 +105,7 @@
 
     [:div {:class (stl/css-case :color-palette true
                                 :no-text (< size 64))
-           :style #js {"--bullet-size" (dm/str bullet-size "px")}}
+           :style #js {"--bullet-size" (dm/str bullet-size "px") "--color-cell-width" (dm/str color-cell-width "px")}}
 
      (when show-arrows?
        [:button {:class (stl/css :left-arrow)
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 019704155..6d27fbe99 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -73,27 +73,26 @@
 }
 
 .color-palette-content {
-  display: flex;
-  overflow: hidden;
+    overflow: hidden;
+}
 
-  .color-palette-inside {
-    display: flex;
-    gap: $s-8;
-  }
-  .color-cell {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: auto 1fr;
-    justify-items: center;
-    height: 100%;
-    width: $s-80;
-    &.is-not-library-color {
-      width: $s-64;
-    }
-    &.no-text {
-      @include flexCenter;
-      width: $s-32;
-    }
+.color-palette-inside {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--color-cell-width);
+  gap: $s-8;
+}
+
+.color-cell {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+  height: 100%;
+
+  &.no-text {
+    @include flexCenter;
+    width: $s-32;
   }
 }
 
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index eab23c77b..eedaeda61 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -125,7 +125,6 @@
              (dom/blur! node))))
 
         any-palette? (or color-palette? text-palette?)
-
         size-classname
         (cond
           (<= size 64) (stl/css :small-palette)

From f8ca4c4343927eadc60bc0193d70a01fb103f262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Mon, 3 Jun 2024 16:30:16 +0200
Subject: [PATCH 6/6] :bug: Fix color name in circle bullets spanning over more
 than 2 lines

---
 CHANGES.md                                            | 2 ++
 frontend/src/app/main/ui/components/color_bullet.scss | 1 -
 frontend/src/app/main/ui/workspace/color_palette.scss | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 17f333222..952f7c51a 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -13,6 +13,8 @@
 
 ### :bug: Bugs fixed
 
+- Layout and scrollign fixes for the bottom palette [Taiga Issue #7559](https://tree.taiga.io/project/penpot/issue/7559)
+
 ## 2.0.3
 
 ### :bug: Bugs fixed
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index cdfcb6c07..37b733f34 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -88,7 +88,6 @@
   @include twoLineTextEllipsis;
   line-height: 1;
   color: var(--palette-text-color);
-  height: $s-28;
   text-align: center;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 6d27fbe99..396245369 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -73,7 +73,7 @@
 }
 
 .color-palette-content {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .color-palette-inside {