diff --git a/backend/src/app/rpc/commands/auth.clj b/backend/src/app/rpc/commands/auth.clj
index 66bec377d..8e9671e59 100644
--- a/backend/src/app/rpc/commands/auth.clj
+++ b/backend/src/app/rpc/commands/auth.clj
@@ -262,7 +262,8 @@
(merge (:props params))
(merge {:viewed-tutorial? false
:viewed-walkthrough? false
- :nudge {:big 10 :small 1}})
+ :nudge {:big 10 :small 1}
+ :v2-info-shown true})
(db/tjson))
password (or (:password params) "!")
diff --git a/frontend/resources/images/icons/v2-icon-1.svg b/frontend/resources/images/icons/v2-icon-1.svg
new file mode 100644
index 000000000..b39647eb1
--- /dev/null
+++ b/frontend/resources/images/icons/v2-icon-1.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/v2-icon-2.svg b/frontend/resources/images/icons/v2-icon-2.svg
new file mode 100644
index 000000000..d384ee2ed
--- /dev/null
+++ b/frontend/resources/images/icons/v2-icon-2.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/v2-icon-3.svg b/frontend/resources/images/icons/v2-icon-3.svg
new file mode 100644
index 000000000..bfc88da6d
--- /dev/null
+++ b/frontend/resources/images/icons/v2-icon-3.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/v2-icon-4.svg b/frontend/resources/images/icons/v2-icon-4.svg
new file mode 100644
index 000000000..dc2443432
--- /dev/null
+++ b/frontend/resources/images/icons/v2-icon-4.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss
index 40d1dcb87..c4bc4cb3f 100644
--- a/frontend/resources/styles/common/refactor/fonts.scss
+++ b/frontend/resources/styles/common/refactor/fonts.scss
@@ -15,6 +15,7 @@ $fs-11: 0.688rem;
$fs-12: math.div(12, $fs-base) + rem;
$fs-14: math.div(14, $fs-base) + rem;
$fs-16: math.div(16, $fs-base) + rem;
+$fs-18: math.div(18, $fs-base) + rem;
$fs-24: math.div(24, $fs-base) + rem;
$fs-36: math.div(36, $fs-base) + rem;
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 46d847794..0249bf2ca 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -35,6 +35,7 @@
[app.main.data.events :as ev]
[app.main.data.fonts :as df]
[app.main.data.messages :as msg]
+ [app.main.data.modal :as modal]
[app.main.data.users :as du]
[app.main.data.workspace.bool :as dwb]
[app.main.data.workspace.changes :as dch]
@@ -119,10 +120,14 @@
(assoc :workspace-ready? true)))
ptk/WatchEvent
- (watch [_ _ _]
- (rx/of (fbc/fix-bool-contents)
- (fdf/fix-deleted-fonts)
- (fbs/fix-broken-shapes)))))
+ (watch [_ state _]
+ (rx/of
+ (when (and (not (boolean (-> state :profile :props :v2-info-shown)))
+ (features/active-feature? state "components/v2"))
+ (modal/show :v2-info {}))
+ (fbc/fix-bool-contents)
+ (fdf/fix-deleted-fonts)
+ (fbs/fix-broken-shapes)))))
(defn- workspace-data-loaded
[data]
diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss
index 2da4ec233..c1f6bf7d9 100644
--- a/frontend/src/app/main/ui/dashboard/change_owner.scss
+++ b/frontend/src/app/main/ui/dashboard/change_owner.scss
@@ -50,3 +50,7 @@
@extend .modal-danger-btn;
}
}
+
+.modal-msg {
+ color: var(--modal-text-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index e90cc022e..f65ff1676 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -479,6 +479,11 @@
(def ^:icon cap-round (icon-xref :cap-round))
(def ^:icon cap-square (icon-xref :cap-square))
+(def ^:icon v2-icon-1 (icon-xref :v2-icon-1))
+(def ^:icon v2-icon-2 (icon-xref :v2-icon-2))
+(def ^:icon v2-icon-3 (icon-xref :v2-icon-3))
+(def ^:icon v2-icon-4 (icon-xref :v2-icon-4))
+
(def ^:icon loader-pencil
(mf/html
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index 3262f202b..871c53799 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -15,6 +15,7 @@
[app.common.types.typographies-list :as ctyl]
[app.common.uuid :as uuid]
[app.main.data.modal :as modal]
+ [app.main.data.users :as du]
[app.main.data.workspace.libraries :as dwl]
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
@@ -511,3 +512,58 @@
[:& updates-tab {:file-id file-id
:file-data file-data
:libraries libraries}]]]]]]]]))
+
+(mf/defc v2-info-dialog
+ {::mf/register modal/components
+ ::mf/register-as :v2-info}
+ []
+ (let [handle-gotit-click
+ (mf/use-fn
+ (fn []
+ (modal/hide!)
+ (st/emit! (du/update-profile-props {:v2-info-shown true}))))]
+
+ [:div {:class (stl/css :modal-overlay)}
+ [:div {:class (stl/css :modal-dialog :modal-v2-info)}
+ [:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
+ [:div {:class (stl/css :modal-content)}
+ [:div {:class (stl/css :info-content)}
+ [:div {:class (stl/css :info-block)}
+ [:div {:class (stl/css :info-icon)} i/v2-icon-1]
+ [:div {:class (stl/css :info-block-title)}
+ "One physical source of truth"]
+ [:div {:class (stl/css :info-block-content)}
+ "Main components are now found at the design space. They act as a single source "
+ "of truth and can be worked on with their copies. This ensures consistency and "
+ "allows better control and synchronization."]]
+
+ [:div {:class (stl/css :info-block)}
+ [:div {:class (stl/css :info-icon)} i/v2-icon-2]
+ [:div {:class (stl/css :info-block-title)}
+ "Swap components"]
+ [:div {:class (stl/css :info-block-content)}
+ "Now, you can replace one component copy with another within your libraries. "
+ "The swap components functionality streamlines making changes, testing "
+ "variations, or updating elements without extensive manual adjustments."]]
+
+ [:div {:class (stl/css :info-block)}
+ [:div {:class (stl/css :info-icon)} i/v2-icon-3]
+ [:div {:class (stl/css :info-block-title)}
+ "Graphic assets no longer exist"]
+ [:div {:class (stl/css :info-block-content)}
+ "Graphic assets now disappear, so that all graphic assets become components. "
+ "This way, swapping between them is possible, and we avoid confusion about "
+ "what should go in each typology."]]
+
+ [:div {:class (stl/css :info-block)}
+ [:div {:class (stl/css :info-icon)} i/v2-icon-4]
+ [:div {:class (stl/css :info-block-title)}
+ "Main components page"]
+ [:div {:class (stl/css :info-block-content)}
+ "You might find that a new page called 'Main components' has appeared in "
+ "your file. On that page, you'll find all the main components that were "
+ "created in your files previously to this new version."]]]
+
+ [:div {:class (stl/css :info-bottom)}
+ [:button {:class (stl/css :primary-button)
+ :on-click handle-gotit-click} "I GOT IT"]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index 2664f3209..3fa999a1e 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -228,6 +228,15 @@
}
}
}
+
+ .modal-v2-info {
+ width: $s-664;
+ height: fit-content;
+
+ .modal-title {
+ font-size: $fs-18;
+ }
+ }
}
.item-contents {
@@ -245,3 +254,61 @@
margin-inline: $s-4;
}
}
+
+.info-content {
+ margin-top: $s-32;
+ display: flex;
+ flex-direction: column;
+ gap: $s-24;
+
+ .info-block {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: $s-20;
+ grid-template:
+ "icon title"
+ "icon content";
+ }
+
+ .info-icon {
+ grid-area: icon;
+ width: $s-52;
+ height: $s-52;
+ margin-top: $s-8;
+ border-radius: $br-circle;
+ background: $db-quaternary;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ svg {
+ width: $s-32;
+ height: $s-32;
+ fill: $da-primary;
+ }
+ }
+ .info-block-title {
+ grid-area: title;
+ font-size: $fs-16;
+ color: $df-primary;
+ }
+ .info-block-content {
+ grid-area: content;
+ font-size: $fs-14;
+ color: $df-secondary;
+ line-height: 1.2;
+ }
+}
+
+.info-bottom {
+ margin-top: $s-24;
+ margin-right: $s-8;
+ display: flex;
+ justify-content: flex-end;
+ .primary-button {
+ @extend .button-primary;
+ @include tabTitleTipography;
+ padding: $s-0 $s-16;
+ }
+}