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/images/features/shapes-to-path.gif b/frontend/resources/images/features/shapes-to-path.gif new file mode 100644 index 0000000000..cea1025682 Binary files /dev/null and b/frontend/resources/images/features/shapes-to-path.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..601b89ecc1 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -145,7 +145,7 @@ :dashboard-team-settings) [:* #_[:div.modal-wrapper - [:& app.main.ui.onboarding/release-notes-modal {:version "1.5"}]] + [:& 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..58877f7e9a 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 @@ -296,7 +296,7 @@ (defmethod render-release-notes "0.0" [params] - (render-release-notes (assoc params :version "1.5"))) + (render-release-notes (assoc params :version "1.6"))) (defmethod render-release-notes "1.4" [{:keys [slide klass next finish navigate version]}] @@ -474,3 +474,101 @@ {: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/custom-fonts.gif" :border "0" :alt "Upload/use custom fonts"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Upload/use custom fonts"]] + [:div.modal-content + [:p "From now on you can upload fonts from your computer to a Penpot team and use them across its files. This is one of the most requested features since our first release (we listen!)"] + [:p "We hope you enjoy having more typography options and our brand new font selector."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 1 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/scale-text.gif" :border "0" :alt "Interactively scale text"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Scale text layers at resizing"]] + [:div.modal-content + [:p "New main menu option “Scale text (K)” to enable scale text mode."] + [:p "Disabled by default, this tool is disabled back after being used."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 2 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/performance.gif" :border "0" :alt "Performance improvements"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Performance improvements"]] + [:div.modal-content + [:p "Penpot brings important improvements handling large files. The performance in managing files in the dashboard has also been improved."] + [:p "You should have the feeling that files and layers show up a bit faster :)"]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 3 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/shapes-to-path.gif" :border "0" :alt "Shapes to path"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Shapes to path"]] + [:div.modal-content + [:p "Now you can edit basic shapes like rectangles, circles and image containers by double clicking."] + [:p "An easy way to increase speed by working with vectors!"]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]])))