✨ Design improvements to the Invitations page with an empty state

CHANGES.md

@@ -12,6 +12,7 @@
 
 - Update board presets with a newer devices [Taiga #10610](https://tree.taiga.io/project/penpot/us/10610)
 - Propagate "sharing a prototype" to editors and viewers [Taiga #8853](https://tree.taiga.io/project/penpot/us/8853)
+- Design improvements to the Invitations page with an empty state [Taiga #4554](https://tree.taiga.io/project/penpot/us/4554)
 
 ### :bug: Bugs fixed
 

frontend/src/app/main/ui/dashboard/team.cljs

@@ -74,6 +74,7 @@
         invitations-section? (= section :dashboard-team-invitations)
         webhooks-section?    (= section :dashboard-team-webhooks)
         permissions          (:permissions team)
+        invitations          (:invitations team)
 
         on-invite-member
         (mf/use-fn
@@ -108,7 +109,7 @@
        [:li {:class (when settings-section? (stl/css :active))}
         [:a {:on-click on-nav-settings} (tr "labels.settings")]]]]
      [:div {:class (stl/css :dashboard-buttons)}
-      (if (and (or invitations-section? members-section?) (:is-admin permissions))
+      (if (and (or invitations-section? members-section?) (:is-admin permissions) (not-empty invitations))
         [:a
          {:class (stl/css :btn-secondary :btn-small)
           :on-click on-invite-member
@@ -735,12 +736,27 @@
 (mf/defc empty-invitation-table*
   {::mf/props :obj
    ::mf/private true}
-  [{:keys [can-invite]}]
-  [:div {:class (stl/css :empty-invitations)}
-   [:span (tr "labels.no-invitations")]
-   (when ^boolean can-invite
-     [:> i18n/tr-html* {:content (tr "labels.no-invitations-hint")
-                        :tag-name "span"}])])
+  [{:keys [can-invite team]}]
+  (let
+   [route                (mf/deref refs/route)
+    invite-email         (-> route :query-params :invite-email)
+    on-invite-member     (mf/use-fn
+                          (mf/deps team invite-email)
+                          (fn []
+                            (st/emit! (modal/show {:type :invite-members
+                                                   :team team
+                                                   :origin :team
+                                                   :invite-email invite-email}))))]
+    [:div {:class (stl/css :empty-invitations)}
+     [:span (tr "labels.no-invitations")]
+     (when ^boolean can-invite
+       [[:span (tr "labels.no-invitations-gather-people")]
+        [:a
+         {:class (stl/css :btn-empty-invitations)
+          :on-click on-invite-member
+          :data-testid "invite-member"}
+         (tr "dashboard.invite-profile")]
+        [:div {:class (stl/css :blank-space)}]])]))
 
 (mf/defc invitation-section*
   {::mf/props :obj
@@ -761,7 +777,7 @@
       [:div {:class (stl/css :title-field-role)} (tr "labels.role")]
       [:div {:class (stl/css :title-field-status)} (tr "labels.status")]]
      (if (empty? invitations)
-       [:> empty-invitation-table* {:can-invite can-invite?}]
+       [:> empty-invitation-table* {:can-invite can-invite? :team team}]
        [:div {:class (stl/css :table-rows)}
         (for [invitation invitations]
           [:> invitation-row*

frontend/src/app/main/ui/dashboard/team.scss

@@ -310,6 +310,12 @@
   color: var(--dashboard-list-text-foreground-color);
 }
 
+.btn-empty-invitations {
+  @extend .button-primary;
+  margin-block-start: $s-16;
+  padding-inline: $s-12;
+}
+
 .title-field-status {
   position: relative;
   cursor: default;

frontend/translations/en.po

@@ -2152,9 +2152,8 @@ msgid "labels.no-invitations"
 msgstr "No pending invitations."
 
 #: src/app/main/ui/dashboard/team.cljs:742
-#, markdown
-msgid "labels.no-invitations-hint"
-msgstr "Click the **Invite people** button to invite people to this team."
+msgid "labels.no-invitations-gather-people"
+msgstr "Gather your people and build great things together."
 
 #: src/app/main/ui/static.cljs
 #, unused

frontend/translations/es.po

@@ -2175,9 +2175,8 @@ msgid "labels.no-invitations"
 msgstr "No hay invitaciones pendientes."
 
 #: src/app/main/ui/dashboard/team.cljs:742
-#, markdown
-msgid "labels.no-invitations-hint"
-msgstr "Pulsa el botón 'Invitar al equipo' para añadir más integrantes al equipo."
+msgid "labels.no-invitations-gather-people"
+msgstr "Reúne a tu gente y construid juntos grandes cosas."
 
 #: src/app/main/ui/static.cljs
 #, unused