diff --git a/frontend/resources/images/form/canva.png b/frontend/resources/images/form/canva.png new file mode 100644 index 000000000..31c18170d Binary files /dev/null and b/frontend/resources/images/form/canva.png differ diff --git a/frontend/resources/images/form/never-used.png b/frontend/resources/images/form/never-used.png index 101889995..f45d6cf2d 100644 Binary files a/frontend/resources/images/form/never-used.png and b/frontend/resources/images/form/never-used.png differ diff --git a/frontend/resources/images/form/use-for-1.jpg b/frontend/resources/images/form/use-for-1.jpg deleted file mode 100644 index b1fa3da55..000000000 Binary files a/frontend/resources/images/form/use-for-1.jpg and /dev/null differ diff --git a/frontend/resources/images/form/use-for-1.png b/frontend/resources/images/form/use-for-1.png new file mode 100644 index 000000000..8c9dabcba Binary files /dev/null and b/frontend/resources/images/form/use-for-1.png differ diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss index fbf45fed7..47d42271b 100644 --- a/frontend/resources/styles/common/dependencies/fonts.scss +++ b/frontend/resources/styles/common/dependencies/fonts.scss @@ -19,9 +19,9 @@ $fs19: 1.1875rem; $fs20: 1.25rem; $fs21: 1.315rem; $fs22: 1.375rem; +$fs23: 1.4375rem; $fs24: 1.5rem; $fs26: 1.625rem; -$fs24: 1.75rem; $fs30: 1.875rem; $fs32: 2rem; $fs34: 2.125rem; diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss index 9283d53f2..12f0211c4 100644 --- a/frontend/resources/styles/main/partials/af-signup-questions.scss +++ b/frontend/resources/styles/main/partials/af-signup-questions.scss @@ -7,9 +7,11 @@ .af-form { background-color: $color-white; color: $color-gray-60 !important; - max-width: 760px !important; + height: 710px; + max-width: 646px !important; overflow-y: auto; - padding: 3rem; + padding: 1.5rem 1rem; + position: relative; width: 100% !important; h1, @@ -20,7 +22,11 @@ } h1 { - font-size: $fs38; + font-size: $fs36 !important; + } + + h3 { + font-size: $fs23 !important; } strong { @@ -44,17 +50,21 @@ .af-choice, .af-choice-multiple { + color: $color-gray-40; display: flex; flex-wrap: wrap; + margin: -0.5rem -0.75rem; + padding-top: 1rem; } .af-choice-option { - max-width: 33%; + margin: 0.5rem 0.75rem; + max-width: 11.75rem; width: 100%; label { font-family: "worksans", sans-serif !important; - font-size: $fs14; + font-size: $fs15; padding-left: 0; } } @@ -68,6 +78,7 @@ .af-divider-block { /* margin-bottom: 2rem; */ + display: none; p { &::after, &::before { @@ -81,9 +92,44 @@ font-family: "worksans", sans-serif !important; } + .af-dropdown-search-options { + max-height: none; + } + + .af-dropdown-search-options div { + font-family: "worksans", sans-serif !important; + font-size: $fs16; + } + + .step-header { + height: 2.5rem; + width: 100%; + } + + .step-number { + background-color: $color-gray-10; + border: none; + border-radius: 1rem; + color: $color-gray-40; + float: right; + font-family: "worksans", sans-serif !important; + font-size: $fs12; + height: 1.5rem; + line-height: 1.5rem; + text-align: center; + width: 2.5rem !important; + } + + .header-image { + width: 240px; + } + .af-step-next { display: flex; - margin-top: 2rem; + position: absolute; + right: 1rem; + bottom: 0.5rem; + width: 44rem; } .af-step-next button { @@ -94,17 +140,32 @@ } .af-step-previous { - margin-top: -40px; + position: absolute; + left: 1rem; + bottom: 1.25rem; + } + + .af-step-next span, + .af-step-previous span { + font-weight: normal !important; } .af-step-button { text-align: left; } + .af-field { + margin: 0; + } + .af-field-input { margin: 0.5rem 0; } + .af-dropdown { + height: 2.5rem; + } + .af-field-input input[type="text"], .af-choice-option label:before, .af-dropdown { @@ -143,16 +204,21 @@ background-image: url("../images/form/use-for-4.jpg"); } + .af-field-label { + font-family: "worksans", sans-serif !important; + font-size: $fs18; + } + .af-field-use_of_penpot label, .af-field-previous_design_tool label { display: flex; - padding-top: 5rem; + padding-top: 4rem; justify-content: center; background-size: 50px; background-repeat: no-repeat; - background-position: center 1rem; - margin: 1rem !important; - min-height: 130px; + background-position: center 0.75rem; + margin: 0 !important; + min-height: 108px; position: relative; text-align: center; @@ -177,6 +243,10 @@ } } + .af-field-previous_design_tool label { + font-size: $fs13; + } + .af-field-previous_design_tool .af-choice-option:nth-child(1) label { background-image: url("../images/form/figma.png"); } @@ -190,7 +260,7 @@ } .af-field-previous_design_tool .af-choice-option:nth-child(4) label { - background-image: url("../images/form/uxpin.png"); + background-image: url("../images/form/canva.png"); } .af-field-previous_design_tool .af-choice-option:nth-child(5) label { diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index c353006be..51f797bc2 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1149,6 +1149,18 @@ top: -18px; width: 60px; + &.left { + left: -50px; + top: 100px; + color: $color-primary; + } + + &.right { + left: 731px; + top: 100px; + color: $color-primary; + } + &.square { top: -18px; left: 631px; @@ -1197,11 +1209,6 @@ left: -15px; top: -15px; } - - &.right { - left: 590px; - top: 0; - } } .relnotes .onboarding { @@ -1498,15 +1505,9 @@ } .modal-container { - background-image: url("../images/deco-left.png"), url("../images/deco-right.png"); - background-repeat: no-repeat; - background-position: 10% 50px, 90% 50px; - background-size: 65px; display: flex; flex-direction: row; - height: 100vh; justify-content: center; - width: 100vw; .af-form { --primary-color: #00c38b; @@ -1530,10 +1531,6 @@ --message-success-background-color: rgba(171, 232, 197, 1); } } - - .modal-overlay { - background-color: rgba(0, 0, 0, 0.9); - } } // Nudge modal diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 7a70b8660..0feaf0b38 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -23,8 +23,7 @@ (.setHiddenField ^js form "email" email)))))) (on-submit-success [_event] - (st/emit! (du/mark-questions-as-answered))) - ] + (st/emit! (du/mark-questions-as-answered)))] (let [script (dom/create-element "script") head (unchecked-get js/document "head") @@ -43,6 +42,8 @@ (mf/use-effect (partial load-arengu-sdk container (:email profile) form-id)) [:div.modal-wrapper.questions-form [:div.modal-overlay - [:div.modal-container {:ref container}]]])) + [:div.modal-container.onboarding.onboarding-v2 {:ref container} + [:img.deco.left {:src "images/deco-left.png" :border 0}] + [:img.deco.right {:src "images/deco-right.png" :border 0}]]]]))