✨ New overlay for v2 information

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]

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);
+}

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

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

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;
+  }
+}