diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 61555e114..6f28edf69 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/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 { diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index c7048003d..da1f0d784 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/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)}; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 2b5feb06a..432906c9e 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/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; diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index 01e98c6cb..8f133cc72 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/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; diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index 0f2bfd2ce..e76cd0679 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 9904790db..3d715a185 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/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} diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 743c05184..c1b939e4f 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/releases/v2_0.cljs b/frontend/src/app/main/ui/releases/v2_0.cljs index 511307544..57f2b0847 100644 --- a/frontend/src/app/main/ui/releases/v2_0.cljs +++ b/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"]]]]]])))