diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 0b15964681..fbd57b9826 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -42,15 +42,16 @@ [:div {:class (stl/css :modal-info)} [:img {:src "images/form/slide-final-team.svg"}] - [:> heading* {:level 2 - :typography t/title-medium - :class (stl/css :color-light)} - (tr "onboarding.team-modal.team-definition")] + [:div {:class (stl/css :modal-info-desc)} + [:> heading* {:level 2 + :typography t/title-medium + :class (stl/css :color-light)} + (tr "onboarding.team-modal.team-definition")] - [:> text* {:as "div" - :typography t/body-medium - :class (stl/css :color-dimmed :margin-bottom)} - (tr "onboarding.team-modal.create-team-desc")] + [:> text* {:as "div" + :typography t/body-large + :class (stl/css :color-dimmed)} + (tr "onboarding.team-modal.create-team-desc")]] [:ul {:class (stl/css :modal-info-features)} [:> team-info-feature* {:icon-id i/document @@ -181,11 +182,18 @@ :class (stl/css :color-light)} (tr "onboarding.team-modal.create-team")] - [:> fc/form-input* {:type "text" - :name :name - :auto-focus true - :auto-complete "off" - :placeholder (tr "onboarding.choice.team-up.create-team-placeholder")}] + [:div {:class (stl/css :modal-team-sub-block)} + [:> text* {:as "div" + :typography t/headline-small + :class (stl/css :color-light)} + (tr "onboarding.choice.team-up.create-team-enter")] + + [:> fc/form-input* {:type "text" + :icon i/effects + :name :name + :auto-focus true + :auto-complete "off" + :placeholder (tr "onboarding.choice.team-up.create-team-name")}]] [:> text* {:as "div" :typography t/body-small @@ -215,28 +223,23 @@ [:> text* {:as "div" :typography t/body-small :class (stl/css :color-dimmed)} - (tr "onboarding.choice.team-up.invite-members-info")] + (tr "onboarding.choice.team-up.invite-members-desc")]] + [:div {:class (stl/css :modal-team-block)} (let [params (:clean-data @form) emails (:emails params) num-emails (count emails)] [:* - [:div {:class (stl/css :flex-align-right)} - [:> fc/form-submit* {:variant "primary"} - (if (> num-emails 0) - (tr "onboarding.choice.team-up.create-team-and-invite") - (tr "onboarding.choice.team-up.create-team-without-invite"))]] + [:> fc/form-submit* {:variant "primary" + :class (stl/css :align-center)} + (if (> num-emails 0) + (tr "onboarding.choice.team-up.create-team-and-invite") + (tr "onboarding.choice.team-up.create-team-without-invite"))]]) - (when (= num-emails 0) - [:> text* {:as "div" - :typography t/body-small - :class (stl/css :color-dimmed :text-align-right)} - "(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")"])])]] - - [:div {:class (stl/css :link-wrapper)} - [:> link* {:class (stl/css :link) - :action on-skip} - (tr "onboarding.choice.team-up.continue-without-a-team")]]])) + [:div {:class (stl/css :link-wrapper)} + [:> link* {:class (stl/css :link) + :action on-skip} + (tr "onboarding.choice.team-up.continue-without-a-team")]]]]])) (mf/defc onboarding-team-modal* [{:keys [go-to-team]}] diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss index e948531c6f..a86e316e21 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.scss +++ b/frontend/src/app/main/ui/onboarding/team_choice.scss @@ -22,13 +22,8 @@ text-align: right; } -.flex-align-right { - display: flex; - justify-content: flex-end; -} - -.margin-bottom { - margin-bottom: var(--sp-xxl); +.align-center { + justify-content: center; } .link-wrapper { @@ -60,7 +55,7 @@ gap: var(--sp-xxl); position: relative; inline-size: px2rem(908); - padding: $sz-64 px2rem(100); + padding: px2rem(72) px2rem(100); border-radius: $br-8; background-color: var(--color-background-primary); border: $b-2 solid var(--color-background-quaternary); @@ -68,7 +63,7 @@ .modal-sections { display: grid; - grid-template-columns: px2rem(310) $sz-32 1fr; + grid-template-columns: px2rem(336) $sz-12 1fr; gap: var(--sp-xxl); block-size: 100%; } @@ -76,17 +71,20 @@ .modal-info { display: flex; flex-direction: column; - gap: var(--sp-xl); - border: $b-1 solid var(--color-foreground-secondary); + gap: var(--sp-xxl); padding: var(--sp-m); - border-radius: $br-12; - background-color: var(--color-background-quaternary); +} + +.modal-info-desc { + display: flex; + flex-direction: column; + gap: var(--sp-m); } .modal-info-features { display: flex; flex-direction: column; - gap: var(--sp-m); + gap: var(--sp-s); } .modal-info-item { @@ -112,10 +110,8 @@ } .modal-separator-line { - inline-size: px2rem(8); + inline-size: $sz-1; block-size: 100%; - border-radius: $br-8; - opacity: 0.5; background-color: var(--color-background-quaternary); } @@ -134,7 +130,7 @@ .modal-team-block { display: flex; flex-direction: column; - gap: var(--sp-m); + gap: var(--sp-l); } .modal-team-sub-block { diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 32fae56628..fa3f61cae6 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4733,12 +4733,15 @@ msgstr "Create team and send invites" msgid "onboarding.choice.team-up.create-team-and-send-invites-description" msgstr "You'll be able to invite later" -#: src/app/main/ui/onboarding/team_choice.cljs:193 +msgid "onboarding.choice.team-up.create-team-name" +msgstr "Team name" + +#: src/app/main/ui/onboarding/team_choice.cljs:176 msgid "onboarding.choice.team-up.create-team-desc" msgstr "After naming your team, you will be able to invite people to join." -#: src/app/main/ui/onboarding/team_choice.cljs:188 -msgid "onboarding.choice.team-up.create-team-placeholder" +#: src/app/main/ui/onboarding/team_choice.cljs:184 +msgid "onboarding.choice.team-up.create-team-enter" msgstr "Enter the name of the team" #: src/app/main/ui/onboarding/team_choice.cljs:228 @@ -4753,7 +4756,12 @@ msgstr "Create team without inviting" msgid "onboarding.choice.team-up.invite-members" msgstr "Invite members" -#: src/app/main/ui/onboarding/team_choice.cljs:218 +msgid "onboarding.choice.team-up.invite-members-desc" +msgstr "" +"Developers, designers, managers... everyone's welcome. " +"You can invite more later." + +#: src/app/main/ui/onboarding/team_choice.cljs:187 msgid "onboarding.choice.team-up.invite-members-info" msgstr "" "Remember to include everyone. Developers, designers, managers... Diversity " diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 47db94a9ca..6c4a7b6ed0 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4607,12 +4607,15 @@ msgstr "Crear equipo y enviar invitaciones" msgid "onboarding.choice.team-up.create-team-and-send-invites-description" msgstr "Podrás enviar invitaciones después" -#: src/app/main/ui/onboarding/team_choice.cljs:193 +msgid "onboarding.choice.team-up.create-team-name" +msgstr "Nombre del equipo" + +#: src/app/main/ui/onboarding/team_choice.cljs:176 msgid "onboarding.choice.team-up.create-team-desc" msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan." -#: src/app/main/ui/onboarding/team_choice.cljs:188 -msgid "onboarding.choice.team-up.create-team-placeholder" +#: src/app/main/ui/onboarding/team_choice.cljs:184 +msgid "onboarding.choice.team-up.create-team-enter" msgstr "Introduce el nombre del equipo" #: src/app/main/ui/onboarding/team_choice.cljs:228 @@ -4627,7 +4630,12 @@ msgstr "Crear equipo sin invitar" msgid "onboarding.choice.team-up.invite-members" msgstr "Invitar integrantes" -#: src/app/main/ui/onboarding/team_choice.cljs:218 +msgid "onboarding.choice.team-up.invite-members-desc" +msgstr "" +"Personas de desarrollo, diseño, gestión... todo el mundo es bienvenido. " +"Podrás invitar a más gente posteriormente." + +#: src/app/main/ui/onboarding/team_choice.cljs:187 msgid "onboarding.choice.team-up.invite-members-info" msgstr "" "No olvides incluir personas de desarrollo, diseño, gestión… la diversidad "