diff --git a/frontend/resources/images/form/adobe-xd.png b/frontend/resources/images/form/adobe-xd.png new file mode 100644 index 000000000..f2946ae39 Binary files /dev/null and b/frontend/resources/images/form/adobe-xd.png differ diff --git a/frontend/resources/images/form/figma.png b/frontend/resources/images/form/figma.png new file mode 100644 index 000000000..5e3bccb1a Binary files /dev/null and b/frontend/resources/images/form/figma.png differ diff --git a/frontend/resources/images/form/invision.png b/frontend/resources/images/form/invision.png new file mode 100644 index 000000000..551b8e2c5 Binary files /dev/null and b/frontend/resources/images/form/invision.png differ diff --git a/frontend/resources/images/form/never-used.png b/frontend/resources/images/form/never-used.png new file mode 100644 index 000000000..cda0947ec Binary files /dev/null and b/frontend/resources/images/form/never-used.png differ diff --git a/frontend/resources/images/form/sketch.png b/frontend/resources/images/form/sketch.png new file mode 100644 index 000000000..b923c607c Binary files /dev/null and b/frontend/resources/images/form/sketch.png differ diff --git a/frontend/resources/images/form/use-for-1.jpg b/frontend/resources/images/form/use-for-1.jpg new file mode 100644 index 000000000..b1fa3da55 Binary files /dev/null and b/frontend/resources/images/form/use-for-1.jpg differ diff --git a/frontend/resources/images/form/use-for-2.jpg b/frontend/resources/images/form/use-for-2.jpg new file mode 100644 index 000000000..449ab4d9f Binary files /dev/null and b/frontend/resources/images/form/use-for-2.jpg differ diff --git a/frontend/resources/images/form/use-for-3.jpg b/frontend/resources/images/form/use-for-3.jpg new file mode 100644 index 000000000..1d8c242d7 Binary files /dev/null and b/frontend/resources/images/form/use-for-3.jpg differ diff --git a/frontend/resources/images/form/use-for-4.jpg b/frontend/resources/images/form/use-for-4.jpg new file mode 100644 index 000000000..140c6539d Binary files /dev/null and b/frontend/resources/images/form/use-for-4.jpg differ diff --git a/frontend/resources/images/form/uxpin.png b/frontend/resources/images/form/uxpin.png new file mode 100644 index 000000000..02b5d9331 Binary files /dev/null and b/frontend/resources/images/form/uxpin.png differ diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 5801d9c0b..53d0baedf 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -89,3 +89,4 @@ @import "main/partials/handoff"; @import "main/partials/exception-page"; @import "main/partials/share-link"; +@import "main/partials/af-signup-questions"; diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss new file mode 100644 index 000000000..00f0a9627 --- /dev/null +++ b/frontend/resources/styles/main/partials/af-signup-questions.scss @@ -0,0 +1,218 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) UXBOX Labs SL + +.af-form { + background-color: $color-white; + color: $color-gray-60 !important; + max-width: 760px !important; + overflow-y: auto; + padding: 3rem; + width: 100% !important; + + h1, h3 { + font-family: 'worksans', sans-serif !important; + margin-bottom: .8rem; + font-weight: 500 !important; + } + + h1 { + font-size: $fs38; + } + + strong { + font-weight: 500; + } + + p, label { + font-family: 'worksans', sans-serif !important; + font-size: $fs14; + } + + form { + max-width: 760px; + width: 100%; + } + + button { + font-family: 'worksans', sans-serif !important; + } + + .af-choice, + .af-choice-multiple { + display: flex; + flex-wrap: wrap; + } + + .af-choice-option { + max-width: 33%; + width: 100%; + + label { + font-family: 'worksans', sans-serif !important; + font-size: $fs14; + padding-left: 0; + } + } + + .af-choice-multiple { + .af-choice-option { + max-width: 50%; + width: 100%; + } + } + + .af-divider-block { + margin-bottom: 2rem; + + p { + &::after, + &::before { + border-color: transparent; + } + } + } + + .af-dropdown-text, + .text { + font-family: 'worksans', sans-serif !important; + } + + .af-step-next { + display: flex; + margin-top: 2rem; + } + + .af-step-next button { + color: $color-black; + background-color: $color-primary; + max-width: 180px; + margin-left: auto; + } + + .af-step-previous { + margin-top: -40px; + } + + .af-step-button { + text-align: left; + } + + .af-field-input { + margin: 2rem 0; + } + + .af-choice-option input:checked+label:before, .af-legal input:checked+label:before { + background-color: $color-primary; + } + + .af-choice-option input#af-uid-416:checked+label, + .af-choice-option input#af-uid-417:checked+label, + .af-choice-option input#af-uid-418:checked+label, + .af-choice-option input#af-uid-419:checked+label, + .af-choice-option input#af-uid-420:checked+label, + .af-choice-option input#af-uid-421:checked+label, + .af-choice-option input#af-uid-424:checked+label, + .af-choice-option input#af-uid-425:checked+label, + .af-choice-option input#af-uid-426:checked+label, + .af-choice-option input#af-uid-427:checked+label { + &::before { + background-color: transparent; + border: 2px solid $color-primary; + } + } + + label[for=af-uid-416], + label[for=af-uid-417], + label[for=af-uid-418], + label[for=af-uid-419], + label[for=af-uid-420], + label[for=af-uid-421], + label[for=af-uid-424], + label[for=af-uid-425], + label[for=af-uid-426], + label[for=af-uid-427] { + display: flex; + padding-top: 5rem; + justify-content: center; + background-size: 50px; + background-repeat: no-repeat; + background-position: center 1rem; + margin: 1rem !important; + min-height: 130px; + position: relative; + text-align: center; + + &:hover { + background-color: transparent; + box-shadow: 0px 10px 20px rgba(0,0,0,.2); + } + + &::before { + background-color: transparent; + border-radius: 4px; + min-width: 100%; + min-height: 100%; + position: absolute; + top: 0; + left: 0; + margin: 0; + } + + &::after { + display: none !important; + } + + } + + label[for=af-uid-424], + label[for=af-uid-425], + label[for=af-uid-426], + label[for=af-uid-427] { + padding-top: 6rem; + background-size: 120px; + min-height: 150px; + } + + label[for=af-uid-416] { + background-image: url("../images/form/figma.png"); + } + + label[for=af-uid-417] { + background-image: url("../images/form/sketch.png"); + } + + label[for=af-uid-418] { + background-image: url("../images/form/adobe-xd.png"); + } + + label[for=af-uid-419] { + background-image: url("../images/form/uxpin.png"); + } + + label[for=af-uid-420] { + background-image: url("../images/form/invision.png"); + } + + label[for=af-uid-421] { + background-image: url("../images/form/never-used.png"); + } + + label[for=af-uid-424] { + background-image: url("../images/form/use-for-1.jpg"); + } + + label[for=af-uid-425] { + background-image: url("../images/form/use-for-2.jpg"); + } + + label[for=af-uid-426] { + background-image: url("../images/form/use-for-3.jpg"); + } + + label[for=af-uid-427] { + background-image: url("../images/form/use-for-4.jpg"); + } +} \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 8ec241b29..6e7328706 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1144,11 +1144,15 @@ } .modal-container { - width: 90vw; - height: 90vh; + 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;