Merge branch 'onboarding-1.6-release' into staging

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;

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;
 

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

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