Merge pull request #2155 from penpot/eva-onboarding-team-up

🎉 Eva onboarding team up

CHANGES.md

@@ -5,6 +5,12 @@
 ### :boom: Breaking changes & Deprecations
 ### :sparkles: New features
 
+- Add team hero in projects dashboard [Taiga #3863](https://tree.taiga.io/project/penpot/us/3863)
+- Add zoom style to shared link [Taiga #3874](https://tree.taiga.io/project/penpot/us/3874)
+- Add dashboard creation button as placeholder [Taiga #3861](https://tree.taiga.io/project/penpot/us/3861)
+- Improve invitation flow on onboarding [Taiga #3241](https://tree.taiga.io/project/penpot/us/3241)
+- Add new text to initial modals [Taiga #3458](https://tree.taiga.io/project/penpot/us/3458)
+- Add new questions to onboarding [Taiga #3462](https://tree.taiga.io/project/penpot/us/3462)
 - Add cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
 - Outline highlights on layer hovering [Taiga #2645](https://tree.taiga.io/project/penpot/us/2645) by @andrewzhurov
 - Add zoom to shape on double click up on its icon [Taiga #3929](https://tree.taiga.io/project/penpot/us/3929) by @andrewzhurov

frontend/resources/styles/main/partials/dashboard-team.scss

@@ -1,11 +1,16 @@
 .dashboard-invite-modal {
-  top: 65px;
+  top: 72px;
   right: 13px;
-  padding: 14px;
+  padding: 32px;
   box-shadow: 0px 4px 8px rgba($color-black, 0.25);
   border-radius: 8px;
-  width: 500px;
+  width: 400px;
   position: fixed;
+  z-index: 16;
+  &.hero {
+    top: 218px;
+    right: 35px;
+  }
 
   form {
     width: 100%;
@@ -13,13 +18,18 @@
 
   .form-row {
     display: flex;
-    flex-direction: row;
+    justify-content: space-between;
-    margin: 15px 0px;
+    margin: 4px 0px;
+    .label {
+      margin-bottom: 0;
+      display: flex;
+      align-items: center;
+    }
   }
 
   .custom-input {
-    width: 314px;
+    width: 100%;
-    margin-right: 10px;
+    height: 115px;
   }
 
   .custom-select {
@@ -33,7 +43,7 @@
 
   .action-buttons {
     display: flex;
-    justify-content: center;
+    margin-top: 16px;
     input[type="submit"] {
       margin-bottom: 0px;
     }
@@ -41,6 +51,8 @@
 
   .title {
     color: $color-black;
+    font-weight: bold;
+    margin-bottom: 16px;
   }
 
   .hint {

frontend/resources/styles/main/partials/dashboard.scss

@@ -4,6 +4,63 @@
 //
 // Copyright (c) UXBOX Labs SL
 
+.team-hero {
+  display: flex;
+  position: relative;
+  border: 2px solid $color-gray-10;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 0 1rem 0 21px;
+  height: 154px;
+
+  .text {
+    flex-grow: 1;
+    padding-left: 20px;
+    .title {
+      font-size: $fs24;
+      font-weight: bold;
+      color: $color-black;
+    }
+    .info {
+      span {
+        color: $color-gray-30;
+        display: block;
+      }
+      padding-top: 10px;
+    }
+  }
+  .close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    svg {
+      transform: rotate(45deg);
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .invite {
+    background-color: $color-primary;
+    color: $color-black;
+    width: 180px;
+    height: 40px;
+    border: none;
+    align-self: flex-end;
+    cursor: pointer;
+  }
+  img {
+    width: 274px;
+    margin-bottom: -41px;
+    @media (max-width: 1200px) {
+      display: none;
+      width: 0;
+    }
+  }
+}
+
 .dashboard-container {
   background-color: $color-dashboard;
   flex: 1 0 0;

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

@@ -192,7 +192,7 @@
      (case section
        :dashboard-projects
        [:*
-        [:& projects-section {:team team :projects projects}]
+        [:& projects-section {:team team :projects projects :profile profile}]
         [:& templates-section {:profile profile
                                :project project
                                :default-project-id default-project-id

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

@@ -9,6 +9,8 @@
    [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
+   [app.main.data.modal :as modal]
+   [app.main.data.users :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [line-grid]]
@@ -36,6 +38,22 @@
      [:a.btn-secondary.btn-small {:on-click create :data-test "new-project-button"}
       (tr "dashboard.new-project")]]))
 
+(mf/defc team-hero
+  {::mf/wrap [mf/memo]}
+  [{:keys [team close-banner] :as props}]
+  (let [go-members    #(st/emit! (dd/go-to-team-members))
+        invite-member #(st/emit! (modal/show {:type :invite-members :team team :origin :hero}))]
+    [:div.team-hero
+     [:img {:src "images/deco-team-banner.png" :border "0"}]
+     [:div.text
+      [:div.title (tr "dasboard.team-hero.title")]
+      [:div.info
+       [:span (tr "dasboard.team-hero.text")]
+       [:a {:on-click  go-members} (tr "dasboard.team-hero.management")]]]
+     [:button.invite {:on-click invite-member} (tr "onboarding.choice.team-up.invite-members")]
+     [:button.close {:on-click close-banner}
+      [:span i/close]]]))
+
 (mf/defc project-item
   [{:keys [project first? team files] :as props}]
   (let [locale     (mf/deref i18n/locale)
@@ -196,11 +214,17 @@
   (l/derived :dashboard-recent-files st/state))
 
 (mf/defc projects-section
-  [{:keys [team projects] :as props}]
+  [{:keys [team projects profile] :as props}]
-  (let [projects   (->> (vals projects)
+  (let [projects    (->> (vals projects)
-                        (sort-by :modified-at)
+                         (sort-by :modified-at)
-                        (reverse))
+                         (reverse))
-        recent-map (mf/deref recent-files-ref)]
+        recent-map  (mf/deref recent-files-ref)
+        props       (some-> profile (get :props {}))
+        team-hero?  (:team-hero? props true)
+
+        close-banner (fn []
+                       (st/emit!
+                        (du/update-profile-props {:team-hero? false})))]
 
     (mf/use-effect
      (mf/deps team)
@@ -219,6 +243,11 @@
     (when (seq projects)
       [:*
        [:& header]
+       (when (and team-hero? (not (:is-default team)))
+         [:& team-hero 
+          {:team team
+           :close-banner close-banner}])
+
        [:section.dashboard-container.no-bg
         (for [{:keys [id] :as project} projects]
           (let [files (when recent-map

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

@@ -34,7 +34,9 @@
   (let [go-members           (mf/use-fn #(st/emit! (dd/go-to-team-members)))
         go-settings          (mf/use-fn #(st/emit! (dd/go-to-team-settings)))
         go-invitations       (mf/use-fn #(st/emit! (dd/go-to-team-invitations)))
-        invite-member        (mf/use-fn #(st/emit! (modal/show {:type :invite-members :team team})))
+        invite-member        (mf/use-fn 
+                              (mf/deps team)
+                              #(st/emit! (modal/show {:type :invite-members :team team :origin :team})))
 
         members-section?     (= section :dashboard-team-members)
         settings-section?    (= section :dashboard-team-settings)
@@ -87,7 +89,7 @@
 (mf/defc invite-members-modal
   {::mf/register modal/components
    ::mf/register-as :invite-members}
-  [{:keys [team]}]
+  [{:keys [team origin]}]
   (let [perms   (:permissions team)
         roles   (mf/use-memo (mf/deps perms) #(get-available-roles perms))
         initial (mf/use-memo (constantly {:role "editor" :team-id (:id team)}))
@@ -127,24 +129,29 @@
                       (dd/fetch-team-invitations))))]
 
     [:div.modal.dashboard-invite-modal.form-container
+     {:class (dom/classnames
+              :hero (= origin :hero))}
      [:& fm/form {:on-submit on-submit :form form}
       [:div.title
-       [:span.text (tr "modals.invite-member.title")]]
+       [:span.text (tr "modals.invite-team-member.title")]]
 
       (when-not (= "" @error-text)
         [:div.error
          [:span.icon i/msg-error]
          [:span.text @error-text]])
-
       [:div.form-row
+       [:p.label (tr "onboarding.choice.team-up.roles")]
+       [:& fm/select {:name :role :options roles}]]
+      [:div.form-row
+
+
        [:& fm/multi-input {:type "email"
                            :name :emails
                            :auto-focus? true
                            :trim true
                            :valid-item-fn us/parse-email
                            :label (tr "modals.invite-member.emails")
-                           :on-submit  on-submit}]
+                           :on-submit  on-submit}]]
-       [:& fm/select {:name :role :options roles}]]
 
       [:div.action-buttons
        [:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")}]]]]))

frontend/translations/ar.po

@@ -1290,10 +1290,6 @@ msgstr "حذف العضو"
 msgid "modals.invite-member-confirm.accept"
 msgstr "إرسال دعوة"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "دعوة للانضمام إلى الفريق"
-
 msgid "modals.leave-and-reassign.forbiden"
 msgstr ""
 "لا يمكنك مغادرة الفريق إذا لم يكن هناك عضو آخر للترقية إلى المالك. قد ترغب "

frontend/translations/ca.po

@@ -1613,10 +1613,6 @@ msgstr "Envia una invitació"
 msgid "modals.invite-member.emails"
 msgstr "Correus electrònics, separats per una coma"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Convida a unir-se a l'equip"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""

frontend/translations/de.po

@@ -1637,10 +1637,6 @@ msgstr "Einladung senden"
 msgid "modals.invite-member.emails"
 msgstr "E-Mails, durch Komma getrennt"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Einladen, dem Team beizutreten"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""

frontend/translations/el.po

@@ -1115,10 +1115,6 @@ msgstr "Διαγραφή μέλους της ομάδας"
 msgid "modals.invite-member-confirm.accept"
 msgstr "Αποστολή πρόσκλησης"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Προσκαλέστε να συμμετάσχετε στην ομάδα"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-reassign.hint1"
 msgstr "Είστε ο ιδιοκτήτης του %s"

frontend/translations/en.po

@@ -464,6 +464,18 @@ msgstr "Move to other team"
 msgid "dashboard.new-file"
 msgstr "+ New File"
 
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.title"
+msgstr "Team up!"
+
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.text"
+msgstr "Penpot is meant for teams. Invite members to work together on projects and files"
+
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.management"
+msgstr "Team management"
+
 #: src/app/main/data/dashboard.cljs
 msgid "dashboard.new-file-prefix"
 msgstr "New File"
@@ -1702,8 +1714,8 @@ msgid "modals.invite-member.emails"
 msgstr "Emails, comma separated"
 
 #: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
+msgid "modals.invite-team-member.title"
-msgstr "Invite to join the team"
+msgstr "Invite members to the team"
 
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
@@ -1914,7 +1926,7 @@ msgid "onboarding.choice.team-up.invite-members-info"
 msgstr "Remember to include everyone. Developers, designers, managers... diversity adds up :)"
 
 msgid "onboarding.choice.team-up.roles"
-msgstr "Invite members with the role:"
+msgstr "Invite with the role:"
 
 msgid "onboarding.choice.team-up.create-later"
 msgstr "Create a team later"

frontend/translations/es.po

@@ -484,6 +484,18 @@ msgstr "Nuevo Archivo"
 msgid "dashboard.new-project"
 msgstr "+ Nuevo proyecto"
 
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.title"
+msgstr "¡Forma equipo!"
+
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.text"
+msgstr " Penpot está dirigido a equipos. Invita a personas para trabajar conjuntamente en proyectos y archivos."
+
+#: src/app/main/ui/dashboard/projects.cljs
+msgid "dasboard.team-hero.management"
+msgstr "Gestión del equipo"
+
 #: src/app/main/data/dashboard.cljs
 msgid "dashboard.new-project-prefix"
 msgstr "Nuevo Proyecto"
@@ -1776,8 +1788,8 @@ msgid "modals.invite-member.emails"
 msgstr "Emails, separados por coma"
 
 #: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
+msgid "modals.invite-team-member.title"
-msgstr "Invitar a unirse al equipo"
+msgstr "Invitar a miembros al equipo"
 
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
@@ -1997,7 +2009,7 @@ msgid "onboarding.choice.team-up.invite-members-info"
 msgstr "No olvides incluir personas de desarrollo, diseño, gestión… la diversidad suma :)"
 
 msgid "onboarding.choice.team-up.roles"
-msgstr "Invitar integrantes con el rol:"
+msgstr "Invitar con el rol:"
 
 msgid "onboarding.choice.team-up.create-later"
 msgstr "Crea un equipo más tarde"
@@ -2021,7 +2033,7 @@ msgid "onboarding.team-modal.create-team-feature-4"
 msgstr "Sin límite de integrantes"
 
 msgid "onboarding.team-modal.create-team-feature-5"
-msgstr "¡100 gratis!"
+msgstr "¡100% gratis!"
 
 msgid "onboarding.choice.team-up.invite-members-skip"
 msgstr "Crear equipo e invitar después"

frontend/translations/fr.po

@@ -1666,10 +1666,6 @@ msgstr "Envoyer l'invitation"
 msgid "modals.invite-member.emails"
 msgstr "Adresse e-mail, séparées par des virgules"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Inviter à rejoindre l’équipe"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""

frontend/translations/he.po

@@ -1612,10 +1612,6 @@ msgstr "שליחת הזמנה"
 msgid "modals.invite-member.emails"
 msgstr "כתובות דוא״ל, מופרדות בפסיקים"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "הזמנה להצטרף לצוות"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr "כיוון שאין עוד חברים בצוות הזה מלבדך, הצוות יימחק על כל המיזמים והקבצים שלו."

frontend/translations/pl.po

@@ -1636,10 +1636,6 @@ msgstr "Wyślij zaproszenie"
 msgid "modals.invite-member.emails"
 msgstr "Emaile, oddzielone przecinkami"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Zaproś do zespołu"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""

frontend/translations/pt_BR.po

@@ -1317,10 +1317,6 @@ msgstr "Excluir membro da equipe"
 msgid "modals.invite-member-confirm.accept"
 msgstr "Enviar convite"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Convidar para se juntar à equipe"
-
 msgid "modals.leave-and-reassign.forbiden"
 msgstr ""
 "Você não pode deixar a equipe se não houver outro membro para promover a "

frontend/translations/ro.po

@@ -1230,10 +1230,6 @@ msgstr "Elimină un membru al echipei"
 msgid "modals.invite-member-confirm.accept"
 msgstr "Trimite invitație"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Invită o persoană în echipă"
-
 msgid "modals.leave-and-reassign.forbiden"
 msgstr ""
 "Nu puteţi părăsi echipa dacă nu există un alt membru care să devină "

frontend/translations/tr.po

@@ -1643,10 +1643,6 @@ msgstr "Davet gönder"
 msgid "modals.invite-member.emails"
 msgstr "E-posta adresleri, virgülle ayrılmış"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "Takıma katılma daveti gönder"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""

frontend/translations/zh_CN.po

@@ -1554,10 +1554,6 @@ msgstr "发送邀请"
 msgid "modals.invite-member.emails"
 msgstr "电子邮件，以逗号分隔"
 
-#: src/app/main/ui/dashboard/team.cljs
-msgid "modals.invite-member.title"
-msgstr "邀请加入团队"
-
 #: src/app/main/ui/dashboard/sidebar.cljs
 msgid "modals.leave-and-close-confirm.hint"
 msgstr "由于你是这个团队的唯一成员，这个团队将连同其项目和文件一起被删除。"