diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 3636416c4..3e4e0ee9f 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1437,19 +1437,19 @@ font-size: $fs26; font-weight: $fw700; color: $color-gray-60; - margin-bottom: 6px; + margin-bottom: 8px; } .info { font-size: $fs14; color: $color-black; } form { - margin-top: 60px; flex-grow: 1; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: start; align-items: flex-start; + row-gap: 1.5rem; .custom-input { width: 100%; } @@ -1507,7 +1507,6 @@ text-align: left; font-size: $fs12; color: $color-gray-30; - cursor: pointer; } } @@ -1540,14 +1539,10 @@ .onboarding-team-members { .team-left { - padding: 42px 64px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: auto; form { - margin-top: 5px; + align-items: stretch; + margin-top: 24px; + row-gap: normal; .invite-row { .custom-input { width: 100%; @@ -1584,7 +1579,7 @@ } } .buttons { - margin: 12px 0; + margin: 32px 0 16px 0; button { height: auto; } diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index fd1f3ead2..e37244969 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -6,7 +6,6 @@ (ns app.main.ui.onboarding.team-choice (:require - [app.common.data :as d] [app.common.spec :as us] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] @@ -20,7 +19,6 @@ [app.util.router :as rt] [app.util.timers :as tm] [cljs.spec.alpha :as s] - [cuerdas.core :as str] [potok.core :as ptk] [rumext.v2 :as mf])) @@ -80,7 +78,7 @@ [:div.modal-overlay [:div.modal-container.onboarding-team.animated.fadeIn [:div.team-left - [:h2.title (tr "onboarding.choice.team-up.create-team")] + [:h2.title (tr "onboarding.team-modal.create-team")] [:p.info (tr "onboarding.choice.team-up.create-team-desc")] [:& fm/form {:form form :on-submit on-submit} @@ -89,9 +87,13 @@ :label (tr "onboarding.choice.team-up.create-team-placeholder")}] [:& fm/submit-button - {:label (tr "labels.continue")}]] + {:label (tr "onboarding.choice.team-up.continue-creating-team")}]] - [:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]] + [:h2.title (tr "onboarding.choice.team-up.start-without-a-team")] + [:p.info (tr "onboarding.choice.team-up.start-without-a-team-description")] + + [:div + [:button.btn-primary.btn-large {:on-click on-skip} (tr "onboarding.choice.team-up.continue-without-a-team")]]] [:& team-modal-right] [:div.paginator "1/2"] @@ -107,7 +109,7 @@ [{:value "editor" :label (tr "labels.editor")} {:value "admin" :label (tr "labels.admin")}]) -(s/def ::emails (s/and ::us/set-of-valid-emails d/not-empty?)) +(s/def ::emails (s/and ::us/set-of-valid-emails)) (s/def ::role ::us/keyword) (s/def ::invite-form (s/keys :req-un [::role ::emails])) @@ -124,12 +126,11 @@ :name name})) form (fm/use-form :spec ::invite-form :initial initial) - + params (:clean-data @form) + emails (:emails params) + roles (mf/use-memo #(get-available-roles)) - profile (mf/deref refs/profile) - email (-> profile :email str/lower) - on-success (mf/use-callback (fn [_form response] @@ -146,7 +147,7 @@ (st/emit! (dm/error "Error on creating team.")))) ;; The SKIP branch only creates the team, without invitations - on-skip + on-invite-later (mf/use-callback (fn [_] (let [mdata {:on-success (partial on-success form) @@ -159,14 +160,13 @@ :step 2}))))) ;; The SUBMIT branch creates the team with the invitations - on-submit + on-invite-now (mf/use-callback - (fn [form _] + (fn [_] (let [mdata {:on-success (partial on-success form) :on-error (partial on-error form)} params (:clean-data @form) - emails (disj (:emails params) email) - params (assoc params :emails emails)] + emails (:emails params)] (st/emit! (if (> (count emails) 0) ;; If the user is only inviting to itself we don't call to create-team-with-invitations @@ -177,7 +177,16 @@ :invites (count emails) :role (:role params) :name name - :step 2})))))] + :step 2}))))) + + on-submit + (mf/use-callback + (fn [_] + (let [params (:clean-data @form) + emails (:emails params)] + (if (> (count emails) 0) + (on-invite-now form) + (on-invite-later form)))))] [:div.modal-overlay [:div.modal-container.onboarding-team-members.animated.fadeIn @@ -210,10 +219,12 @@ :step 2}))} (tr "labels.back")] [:& fm/submit-button - {:label (tr "onboarding.choice.team-up.invite-members-submit")}]] + {:label + (if (> (count emails) 0) + (tr "onboarding.choice.team-up.create-team-and-send-invites") + (tr "onboarding.choice.team-up.create-team-without-inviting"))}]] [:div.skip-action - {:on-click on-skip} - [:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]] + (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]] [:& team-modal-right] [:div.paginator "2/2"] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 0605e8cd0..e8bd9cdf1 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2238,18 +2238,33 @@ msgstr "Contributing guide" msgid "onboarding-v2.welcome.title" msgstr "Welcome to Penpot!" -msgid "onboarding.choice.team-up.create-later" -msgstr "Create a team later" - -msgid "onboarding.choice.team-up.create-team" -msgstr "Your team name" - msgid "onboarding.choice.team-up.create-team-desc" msgstr "After naming your team, you will be able to invite people to join." msgid "onboarding.choice.team-up.create-team-placeholder" msgstr "Enter the name of the team" +msgid "onboarding.choice.team-up.continue-creating-team" +msgstr "Continue creating team" + +msgid "onboarding.choice.team-up.start-without-a-team" +msgstr "Start without a team" + +msgid "onboarding.choice.team-up.start-without-a-team-description" +msgstr "You will be able to create a team later." + +msgid "onboarding.choice.team-up.continue-without-a-team" +msgstr "Continue without team" + +msgid "onboarding.choice.team-up.create-team-and-send-invites" +msgstr "Create team and send invites" + +msgid "onboarding.choice.team-up.create-team-without-inviting" +msgstr "Create team without inviting" + +msgid "onboarding.choice.team-up.create-team-and-send-invites-description" +msgstr "You'll be able to invite later" + msgid "onboarding.choice.team-up.invite-members" msgstr "Invite members" @@ -2258,12 +2273,6 @@ msgstr "" "Remember to include everyone. Developers, designers, managers... diversity " "adds up :)" -msgid "onboarding.choice.team-up.invite-members-skip" -msgstr "Create team and invite later" - -msgid "onboarding.choice.team-up.invite-members-submit" -msgstr "Create team and send invites" - msgid "onboarding.choice.team-up.roles" msgstr "Invite with the role:" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 0bab82043..8dc32d34d 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2307,18 +2307,33 @@ msgstr "Guía de contribución" msgid "onboarding-v2.welcome.title" msgstr "¡Te damos la bienvenida a Penpot!" -msgid "onboarding.choice.team-up.create-later" -msgstr "Crea un equipo más tarde" - -msgid "onboarding.choice.team-up.create-team" -msgstr "El nombre de tu equipo" - msgid "onboarding.choice.team-up.create-team-desc" msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan." msgid "onboarding.choice.team-up.create-team-placeholder" msgstr "Introduce el nombre del equipo" +msgid "onboarding.choice.team-up.continue-creating-team" +msgstr "Continuar creando equipo" + +msgid "onboarding.choice.team-up.start-without-a-team" +msgstr "Comenzar sin equipo" + +msgid "onboarding.choice.team-up.start-without-a-team-description" +msgstr "Podrás crear un equipo después." + +msgid "onboarding.choice.team-up.continue-without-a-team" +msgstr "Seguir sin equipo" + +msgid "onboarding.choice.team-up.create-team-and-send-invites" +msgstr "Crear equipo y enviar invitaciones" + +msgid "onboarding.choice.team-up.create-team-without-inviting" +msgstr "Crear equipo sin invitar" + +msgid "onboarding.choice.team-up.create-team-and-send-invites-description" +msgstr "Podrás enviar invitaciones después" + msgid "onboarding.choice.team-up.invite-members" msgstr "Invitar integrantes" @@ -2327,12 +2342,6 @@ msgstr "" "No olvides incluir personas de desarrollo, diseño, gestión… la diversidad " "suma :)" -msgid "onboarding.choice.team-up.invite-members-skip" -msgstr "Crear equipo e invitar después" - -msgid "onboarding.choice.team-up.invite-members-submit" -msgstr "Crear equipo y enviar invitaciones" - msgid "onboarding.choice.team-up.roles" msgstr "Invitar con el rol:"