diff --git a/frontend/resources/images/features/basic-nodes.gif b/frontend/resources/images/features/basic-nodes.gif new file mode 100644 index 0000000000..cea1025682 Binary files /dev/null and b/frontend/resources/images/features/basic-nodes.gif differ diff --git a/frontend/resources/images/features/custom-fonts.gif b/frontend/resources/images/features/custom-fonts.gif new file mode 100644 index 0000000000..191dcf36c4 Binary files /dev/null and b/frontend/resources/images/features/custom-fonts.gif differ diff --git a/frontend/resources/images/features/performance.gif b/frontend/resources/images/features/performance.gif new file mode 100644 index 0000000000..afd4c582a8 Binary files /dev/null and b/frontend/resources/images/features/performance.gif differ diff --git a/frontend/resources/images/features/scale-text.gif b/frontend/resources/images/features/scale-text.gif new file mode 100644 index 0000000000..bc56494a6e Binary files /dev/null and b/frontend/resources/images/features/scale-text.gif differ diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index bd995bc8c9..5a9c19c4d7 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -23,6 +23,7 @@ $color-info: #59b9e2; $color-ocean: #4285f4; $color-component: #76B0B8; $color-component-highlight: #00E0FF; +$color-pink: #feecfc; // Gray scale $color-gray-10: #E3E3E3; diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index d67985d15c..bb0b12751e 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -382,7 +382,7 @@ .modal-left { align-items: center; - background-color: $color-primary; + background-color: $color-pink; border-top-left-radius: 5px; border-bottom-left-radius: 5px; display: flex; @@ -391,6 +391,10 @@ overflow: hidden; padding: $x-big; width: 230px; + + &.welcome { + padding: 0; + } } .modal-right { @@ -498,6 +502,7 @@ color: $color-black; flex: 1; flex-direction: column; + overflow: visible; padding: $x-big 40px; text-align: center; diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 422a3734ad..63ca3458d7 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -144,8 +144,8 @@ :dashboard-team-members :dashboard-team-settings) [:* - #_[:div.modal-wrapper - [:& app.main.ui.onboarding/release-notes-modal {:version "1.5"}]] + [:div.modal-wrapper + [:& app.main.ui.onboarding/release-notes-modal {:version "1.6"}]] [:& dashboard {:route route}]] :viewer diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index a14f22a9fa..057fa9bd12 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -34,7 +34,7 @@ (mf/defc onboarding-start [{:keys [next] :as props}] [:div.modal-container.onboarding - [:div.modal-left + [:div.modal-left.welcome [:img {:src "images/login-on.jpg" :border "0" :alt "Penpot"}]] [:div.modal-right [:div.modal-title @@ -474,3 +474,82 @@ {:slide @slide :navigate navigate :total 3}]]]]]]))) + +(defmethod render-release-notes "1.6" + [{:keys [slide klass next finish navigate version]}] + (mf/html + (case @slide + :start + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.6.0"}]] + [:div.modal-right + [:div.modal-title + [:h2 "What's new?"]] + [:span.release "Alpha version " version] + [:div.modal-content + [:p "Penpot continues growing with new features that improve performance, user experience and visual design."] + [:p "We are happy to show you a sneak peak of the most important stuff that the Alpha 1.6.0 version brings."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"]]] + [:img.deco {:src "images/deco-left.png" :border "0"}] + [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]] + + 0 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/path-tool.gif" :border "0" :alt "New path tool"}]] + [:div.modal-right + [:div.modal-title + [:h2 "New features for paths"]] + [:div.modal-content + [:p "Now you can select snap points on edition, add/remove nodes, merge/join/split nodes."] + [:p "The usability and performance of the paths tool has been improved too."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]] + + 1 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/assets-organiz.gif" :border "0" :alt "Manage libraries"}]] + [:div.modal-right + [:div.modal-title + [:h2 "New libraries organization"]] + [:div.modal-content + [:p "Penpot now allows to group, multiselect and bulk edition of assets (components and graphics)."] + [:p "It is time to have all the libraries well organized and work more efficiently."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]] + + 2 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/smart-inputs.gif" :border "0" :alt "Smart inputs"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Smart inputs"]] + [:div.modal-content + [:p "Now you can have more precision in your designs with basic math operations in inputs."] + [:p "It's easier to specify by how much you want to change a value and work with measures and distances."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]])))