diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index 562c1eab2..6dd39b14f 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -27,6 +27,7 @@ [app.main.ui.releases.v1-8] [app.main.ui.releases.v1-9] [app.main.ui.releases.v2-0] + [app.main.ui.releases.v2-1] [app.util.object :as obj] [app.util.timers :as tm] [rumext.v2 :as mf])) @@ -91,4 +92,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "2.0"))) + (rc/render-release-notes (assoc params :version "2.1"))) diff --git a/frontend/src/app/main/ui/releases/v2_1.cljs b/frontend/src/app/main/ui/releases/v2_1.cljs new file mode 100644 index 000000000..7d05212cd --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_1.cljs @@ -0,0 +1,48 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.releases.v2-1 + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.main.ui.releases.common :as c] + [rumext.v2 :as mf])) + +(defmethod c/render-release-notes "2.1" + [{:keys [slide klass finish version]}] + (mf/html + (case slide + :start + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.0-intro-image.png" + :class (stl/css :start-image) + :border "0" + :alt "A graphic illustration with Penpot style"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "What's new in Penpot? "] + + [:div {:class (stl/css :version-tag)} + (dm/str "Version " version)]] + + [:div {:class (stl/css :features-block)} + [:p {:class (stl/css :feature-content)} + "Penpot 2.1 brings improvements to the authentication system, path editing, real-time persistence, and comments system among other enhancements. We’ve improved the stability of the platform by fixing a bunch of bugs, a lot of them raised by our amazing community <3."] + + [:p {:class (stl/css :feature-content)} + "This minor release comes shortly after our amazing Penpot 2.0 and it shows the way to long-expected capabilities like the incoming new plugin system!"] + + [:p {:class (stl/css :feature-content)} + " Ready to dive in? Let 's get started!"]] + + [:div {:class (stl/css :navigation)} + [:button {:class (stl/css :next-btn) + :on-click finish} "Let's go"]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss new file mode 100644 index 000000000..e305c5d52 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_1.scss @@ -0,0 +1,79 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-container { + display: grid; + grid-template-columns: $s-324 1fr; + height: $s-500; + width: $s-888; + border-radius: $br-8; + background-color: var(--modal-background-color); + border: $s-2 solid var(--modal-border-color); +} + +.start-image { + width: $s-324; + border-radius: $br-8 0 0 $br-8; +} + +.modal-content { + padding: $s-40; + display: grid; + grid-template-rows: auto 1fr $s-32; + gap: $s-24; +} + +.modal-header { + display: grid; + gap: $s-8; +} + +.version-tag { + @include flexCenter; + @include headlineSmallTypography; + height: $s-32; + width: $s-96; + background-color: var(--communication-tag-background-color); + color: var(--communication-tag-foreground-color); + border-radius: $br-8; +} + +.modal-title { + @include headlineLargeTypography; + color: var(--modal-title-foreground-color); +} + +.features-block { + display: flex; + flex-direction: column; + gap: $s-16; + width: $s-440; +} + +.feature-content { + @include bodyMediumTypography; + margin: 0; + color: var(--modal-text-foreground-color); +} + +.navigation { + width: 100%; + display: grid; + grid-template-areas: "bullets button"; +} + +.next-btn { + @extend .button-primary; + width: $s-100; + justify-self: flex-end; + grid-area: button; +}