🎉 Add 1.5 relnotes modal.

frontend/src/app/main/ui.cljs

@@ -139,7 +139,7 @@
       :dashboard-team-settings)
      [:*
       #_[:div.modal-wrapper
-         [:& app.main.ui.onboarding/release-notes-modal {:version "1.4"}]]
+         [:& app.main.ui.onboarding/release-notes-modal {:version "1.5"}]]
       [:& dashboard {:route route}]]
 
      :viewer

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

@@ -238,9 +238,7 @@
 
 (defmulti render-release-notes :version)
 
-(mf/defc release-notes-modal
-  {::mf/register modal/components
-   ::mf/register-as :release-notes}
+(mf/defc release-notes
   [{:keys [version] :as props}]
   (let [slide (mf/use-state :start)
         klass (mf/use-state "fadeInDown")
@@ -285,16 +283,19 @@
       :slide slide
       :version version})))
 
-;; This case should never happen; but if happen just hide inmediatelly
-;; the modal.
-(defmethod render-release-notes :default
+(mf/defc release-notes-modal
+  {::mf/wrap-props false
+   ::mf/register modal/components
+   ::mf/register-as :release-notes}
   [props]
-  (tm/schedule 0 #(st/emit! (modal/hide)))
-  (mf/html [:span ""]))
+  (let [versions (methods render-release-notes)
+        version  (obj/get props "version")]
+    (when (contains? versions version)
+      [:> release-notes props])))
 
 (defmethod render-release-notes "0.0"
   [params]
-  (render-release-notes (assoc params :version "1.4")))
+  (render-release-notes (assoc params :version "1.5")))
 
 (defmethod render-release-notes "1.4"
   [{:keys [slide klass next finish navigate version]}]
@@ -393,3 +394,82 @@
            {:slide @slide
             :navigate navigate
             :total 4}]]]]]])))
+
+(defmethod render-release-notes "1.5"
+  [{: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.5.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.5.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}]]]]]])))