🎉 Review onboarding questions

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;

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 {

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 {
@@ -1492,15 +1499,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;
@@ -1524,10 +1525,6 @@
       --message-success-background-color: rgba(171, 232, 197, 1);
     }
   }
-
-  .modal-overlay {
-    background-color: rgba(0, 0, 0, 0.9);
-  }
 }
 
 // Nudge modal

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}]]]]))