🐛 Fix basic onboarding CSS

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

@@ -144,8 +144,8 @@
         :dashboard-team-members
         :dashboard-team-settings)
        [:*
-        #_[:div.modal-wrapper
+        [: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
@@ -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}]]]]]])))