mirror of
https://github.com/penpot/penpot.git
synced 2025-05-19 08:46:11 +02:00
♻️ Remove new-css-system from dashboard
This commit is contained in:
Eva
parent
3f151f16ce
commit
af99bf05e2
52 changed files with 1917 additions and 9738 deletions
|
|
@ -13,7 +13,6 @@
|
|||
[app.main.data.users :as du]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cljs.spec.alpha :as s]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -22,139 +21,75 @@
|
|||
(mf/defc step-container
|
||||
[{:keys [form step on-next on-prev children] :as props}]
|
||||
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:& fm/form {:form form :on-submit on-next}
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)]
|
||||
|
||||
(if new-css-system
|
||||
[:& fm/form {:form form :on-submit on-next}
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)]
|
||||
children
|
||||
|
||||
children
|
||||
[:div {:class (stl/css :action-buttons)}
|
||||
|
||||
[:div {:class (stl/css :action-buttons)}
|
||||
(when on-prev
|
||||
[:button {:class (stl/css :prev-button)
|
||||
:on-click on-prev} (tr "questions.previous")])
|
||||
|
||||
(when on-prev
|
||||
[:button {:class (stl/css :prev-button)
|
||||
:on-click on-prev} (tr "questions.previous")])
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
|
||||
:class (stl/css :next-button)}]]]
|
||||
|
||||
|
||||
|
||||
[:& fm/form {:form form :on-submit on-next}
|
||||
[:div.step-header
|
||||
[:div.step-number (str/ffmt "%/4" step)]]
|
||||
|
||||
children
|
||||
|
||||
[:div.buttons
|
||||
[:div.step-next
|
||||
[:> fm/submit-button*
|
||||
{:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
|
||||
:class "step-next"}]]
|
||||
|
||||
(when on-prev
|
||||
[:div.step-prev
|
||||
[:button {:on-click on-prev} (tr "questions.previous")]])]])))
|
||||
[:> fm/submit-button*
|
||||
{:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
|
||||
:class (stl/css :next-button)}]]])
|
||||
|
||||
(s/def ::questions-form-step-1
|
||||
(s/keys :req-un [::planning]))
|
||||
|
||||
(mf/defc step-1
|
||||
[{:keys [on-next form] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:& step-container {:form form :step 1 :on-next on-next}
|
||||
[:img {:class (stl/css :header-image)
|
||||
:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}]
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")]
|
||||
[:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "questions-how-are-you-planning-to-use-penpot" :disabled true}
|
||||
{:label (tr "questions.discover-more-about-penpot") :value "discover-more-about-penpot" :key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") :value "test-penpot-to-see-if-its-a-fit-for-team" :key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.start-to-work-on-my-project") :value "start-to-work-on-my-project" :key "start-to-work-on-my-project"}
|
||||
{:label (tr "questions.get-the-code-from-my-team-project") :value "get-the-code-from-my-team-project" :key "get-the-code-from-my-team-project"}
|
||||
{:label (tr "questions.leave-feedback-for-my-team-project") :value "leave-feedback-for-my-team-project" :key "leave-feedback-for-my-team-project"}
|
||||
{:label (tr "questions.work-in-concept-ideas") :value "work-in-concept-ideas" :key "work-in-concept-ideas"}
|
||||
{:label (tr "questions.try-out-before-using-penpot-on-premise") :value "try-out-before-using-penpot-on-premise" :key "try-out-before-using-penpot-on-premise"}]
|
||||
:default ""
|
||||
:name :planning}]]
|
||||
|
||||
|
||||
[:& step-container {:form form :step 1 :on-next on-next}
|
||||
[:img.header-image {:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}]
|
||||
[:h1 (tr "questions.lets-get-started")]
|
||||
[:p.intro (tr "questions.your-feedback-will-help-us")]
|
||||
[:h3 (tr "questions.questions-how-are-you-planning-to-use-penpot")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "questions-how-are-you-planning-to-use-penpot" :disabled true}
|
||||
{:label (tr "questions.discover-more-about-penpot") :value "discover-more-about-penpot" :key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") :value "test-penpot-to-see-if-its-a-fit-for-team" :key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.start-to-work-on-my-project") :value "start-to-work-on-my-project" :key "start-to-work-on-my-project"}
|
||||
{:label (tr "questions.get-the-code-from-my-team-project") :value "get-the-code-from-my-team-project" :key "get-the-code-from-my-team-project"}
|
||||
{:label (tr "questions.leave-feedback-for-my-team-project") :value "leave-feedback-for-my-team-project" :key "leave-feedback-for-my-team-project"}
|
||||
{:label (tr "questions.work-in-concept-ideas") :value "work-in-concept-ideas" :key "work-in-concept-ideas"}
|
||||
{:label (tr "questions.try-out-before-using-penpot-on-premise") :value "try-out-before-using-penpot-on-premise" :key "try-out-before-using-penpot-on-premise"}]
|
||||
:default ""
|
||||
:name :planning}]])))
|
||||
[:& step-container {:form form :step 1 :on-next on-next}
|
||||
[:img {:class (stl/css :header-image)
|
||||
:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}]
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")]
|
||||
[:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "questions-how-are-you-planning-to-use-penpot" :disabled true}
|
||||
{:label (tr "questions.discover-more-about-penpot") :value "discover-more-about-penpot" :key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") :value "test-penpot-to-see-if-its-a-fit-for-team" :key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.start-to-work-on-my-project") :value "start-to-work-on-my-project" :key "start-to-work-on-my-project"}
|
||||
{:label (tr "questions.get-the-code-from-my-team-project") :value "get-the-code-from-my-team-project" :key "get-the-code-from-my-team-project"}
|
||||
{:label (tr "questions.leave-feedback-for-my-team-project") :value "leave-feedback-for-my-team-project" :key "leave-feedback-for-my-team-project"}
|
||||
{:label (tr "questions.work-in-concept-ideas") :value "work-in-concept-ideas" :key "work-in-concept-ideas"}
|
||||
{:label (tr "questions.try-out-before-using-penpot-on-premise") :value "try-out-before-using-penpot-on-premise" :key "try-out-before-using-penpot-on-premise"}]
|
||||
:default ""
|
||||
:name :planning}]])
|
||||
|
||||
(s/def ::questions-form-step-2
|
||||
(s/keys :req-un [::experience-branding-illustrations-marketing-pieces ::experience-interface-design-visual-assets-design-systems ::experience-interface-wireframes-user-journeys-flows-navigation-trees]))
|
||||
|
||||
(mf/defc step-2
|
||||
[{:keys [on-next on-prev form] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "questions.describe-your-experience-working-on")]
|
||||
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "questions.describe-your-experience-working-on")]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "branding-illustrations-marketing-pieces")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-branding-illustrations-marketing-pieces}]]
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "branding-illustrations-marketing-pieces")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-branding-illustrations-marketing-pieces}]]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "questions.interface-design-visual-assets-design-systems")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-design-visual-assets-design-systems}]]
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "questions.interface-design-visual-assets-design-systems")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-design-visual-assets-design-systems}]]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "questions.wireframes-user-journeys-flows-navigation-trees")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]]
|
||||
|
||||
|
||||
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev}
|
||||
[:h3 (tr "questions.describe-your-experience-working-on")]
|
||||
|
||||
[:div.section (tr "branding-illustrations-marketing-pieces")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-branding-illustrations-marketing-pieces}]
|
||||
|
||||
[:div.section (tr "questions.interface-design-visual-assets-design-systems")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-design-visual-assets-design-systems}]
|
||||
|
||||
[:div.section (tr "questions.wireframes-user-journeys-flows-navigation-trees")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]])))
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
(tr "questions.wireframes-user-journeys-flows-navigation-trees")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]])
|
||||
|
||||
(s/def ::questions-form-step-3
|
||||
(s/keys :req-un [::experience-design-tool]
|
||||
|
|
@ -170,8 +105,7 @@
|
|||
|
||||
(mf/defc step-3
|
||||
[{:keys [on-next on-prev form] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
experience-design-tool (dm/get-in @form [:clean-data :experience-design-tool])
|
||||
(let [experience-design-tool (dm/get-in @form [:clean-data :experience-design-tool])
|
||||
on-design-tool-change
|
||||
(fn [_ _]
|
||||
(let [experience-design-tool (dm/get-in @form [:clean-data :experience-design-tool])]
|
||||
|
|
@ -180,40 +114,23 @@
|
|||
(swap! form d/dissoc-in [:data :experience-design-tool-other])
|
||||
(swap! form d/dissoc-in [:errors :experience-design-tool-other])))))]
|
||||
|
||||
(if new-css-system
|
||||
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "question.design-tool-more-experienced-with")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"}
|
||||
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"}
|
||||
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"}
|
||||
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"}
|
||||
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :experience-design-tool
|
||||
:on-change on-design-tool-change}]
|
||||
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "question.design-tool-more-experienced-with")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"}
|
||||
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"}
|
||||
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"}
|
||||
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"}
|
||||
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :experience-design-tool
|
||||
:on-change on-design-tool-change}]
|
||||
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:placeholder (tr "questions.other")
|
||||
:label ""
|
||||
:disabled (not= experience-design-tool "other")}]]
|
||||
|
||||
|
||||
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev}
|
||||
[:h3 (tr "question.design-tool-more-experienced-with")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"}
|
||||
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"}
|
||||
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"}
|
||||
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"}
|
||||
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :experience-design-tool
|
||||
:on-change on-design-tool-change}]
|
||||
[:div.other
|
||||
[:label (tr "questions.other")]
|
||||
[:& fm/input {:name :experience-design-tool-other :label (tr "questions.other") :disabled (not= experience-design-tool "other")}]]])))
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:placeholder (tr "questions.other")
|
||||
:label ""
|
||||
:disabled (not= experience-design-tool "other")}]]))
|
||||
|
||||
(s/def ::questions-form-step-4
|
||||
(s/keys :req-un [::team-size ::role]
|
||||
|
|
@ -229,8 +146,7 @@
|
|||
|
||||
(mf/defc step-4
|
||||
[{:keys [on-next on-prev form] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
role (dm/get-in @form [:data :role])
|
||||
(let [role (dm/get-in @form [:data :role])
|
||||
on-role-change
|
||||
(fn [_ _]
|
||||
(let [experience-design-tool (dm/get-in @form [:clean-data :experience-design-tool])]
|
||||
|
|
@ -239,63 +155,34 @@
|
|||
(swap! form d/dissoc-in [:data :role-other])
|
||||
(swap! form d/dissoc-in [:errors :role-other])))))]
|
||||
|
||||
(if new-css-system
|
||||
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
|
||||
{:label (tr "questions.developer") :value "developer"}
|
||||
{:label (tr "questions.manager") :value "manager"}
|
||||
{:label (tr "questions.founder") :value "founder"}
|
||||
{:label (tr "questions.marketing") :value "marketing"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :role
|
||||
:on-change on-role-change}]
|
||||
[:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}]
|
||||
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
|
||||
{:label (tr "questions.developer") :value "developer"}
|
||||
{:label (tr "questions.manager") :value "manager"}
|
||||
{:label (tr "questions.founder") :value "founder"}
|
||||
{:label (tr "questions.marketing") :value "marketing"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :role
|
||||
:on-change on-role-change}]
|
||||
[:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "team-size" :disabled true}
|
||||
{:label (tr "questions.more-than-50") :value "more-than-50" :key "more-than-50"}
|
||||
{:label (tr "questions.31-50") :value "31-50" :key "31-50"}
|
||||
{:label (tr "questions.11-30") :value "11-30" :key "11-30"}
|
||||
{:label (tr "questions.2-10") :value "2-10" :key "2-10"}
|
||||
{:label (tr "questions.freelancer") :value "freelancer" :key "freelancer"}
|
||||
{:label (tr "questions.personal-project") :value "personal-project" :key "personal-project"}]
|
||||
:default ""
|
||||
:name :team-size}]]]
|
||||
|
||||
|
||||
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev}
|
||||
[:h3 (tr "questions.role")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
|
||||
{:label (tr "questions.developer") :value "developer"}
|
||||
{:label (tr "questions.manager") :value "manager"}
|
||||
{:label (tr "questions.founder") :value "founder"}
|
||||
{:label (tr "questions.marketing") :value "marketing"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :role
|
||||
:on-change on-role-change}]
|
||||
[:div.other
|
||||
[:label (tr "questions.other")]
|
||||
[:& fm/input {:name :role-other :label (tr "questions.other") :disabled (not= role "other")}]]
|
||||
|
||||
[:h3 (tr "questions.team-size")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "team-size" :disabled true}
|
||||
{:label (tr "questions.more-than-50") :value "more-than-50" :key "more-than-50"}
|
||||
{:label (tr "questions.31-50") :value "31-50" :key "31-50"}
|
||||
{:label (tr "questions.11-30") :value "11-30" :key "11-30"}
|
||||
{:label (tr "questions.2-10") :value "2-10" :key "2-10"}
|
||||
{:label (tr "questions.freelancer") :value "freelancer" :key "freelancer"}
|
||||
{:label (tr "questions.personal-project") :value "personal-project" :key "personal-project"}]
|
||||
:default ""
|
||||
:name :team-size}]])))
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")]
|
||||
[:& fm/select {:options [{:label (tr "questions.select-option") :value "" :key "team-size" :disabled true}
|
||||
{:label (tr "questions.more-than-50") :value "more-than-50" :key "more-than-50"}
|
||||
{:label (tr "questions.31-50") :value "31-50" :key "31-50"}
|
||||
{:label (tr "questions.11-30") :value "11-30" :key "11-30"}
|
||||
{:label (tr "questions.2-10") :value "2-10" :key "2-10"}
|
||||
{:label (tr "questions.freelancer") :value "freelancer" :key "freelancer"}
|
||||
{:label (tr "questions.personal-project") :value "personal-project" :key "personal-project"}]
|
||||
:default ""
|
||||
:name :team-size}]]]))
|
||||
|
||||
(mf/defc questions
|
||||
[{:keys []}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
container (mf/use-ref)
|
||||
(let [container (mf/use-ref)
|
||||
step (mf/use-state 1)
|
||||
clean-data (mf/use-state {})
|
||||
|
||||
|
|
@ -336,25 +223,11 @@
|
|||
(reset! clean-data questionnaire)
|
||||
(st/emit! (du/mark-questions-as-answered questionnaire)))))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)
|
||||
:ref container}
|
||||
(case @step
|
||||
1 [:& step-1 {:on-next on-next :on-prev on-prev :form step-1-form}]
|
||||
2 [:& step-2 {:on-next on-next :on-prev on-prev :form step-2-form}]
|
||||
3 [:& step-3 {:on-next on-next :on-prev on-prev :form step-3-form}]
|
||||
4 [:& step-4 {:on-next on-submit :on-prev on-prev :form step-4-form}])]]
|
||||
|
||||
|
||||
[:div.modal-wrapper.questions-form
|
||||
[:div.modal-overlay
|
||||
[: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}]
|
||||
[:div.signup-questions
|
||||
(case @step
|
||||
1 [:& step-1 {:on-next on-next :on-prev on-prev :form step-1-form}]
|
||||
2 [:& step-2 {:on-next on-next :on-prev on-prev :form step-2-form}]
|
||||
3 [:& step-3 {:on-next on-next :on-prev on-prev :form step-3-form}]
|
||||
4 [:& step-4 {:on-next on-submit :on-prev on-prev :form step-4-form}])]]]])))
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)
|
||||
:ref container}
|
||||
(case @step
|
||||
1 [:& step-1 {:on-next on-next :on-prev on-prev :form step-1-form}]
|
||||
2 [:& step-2 {:on-next on-next :on-prev on-prev :form step-2-form}]
|
||||
3 [:& step-3 {:on-next on-next :on-prev on-prev :form step-3-form}]
|
||||
4 [:& step-4 {:on-next on-submit :on-prev on-prev :form step-4-form}])]]))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue