From beb2c0ab87b4d83e12dd15b4544a1458de7bace8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nela=20Letochov=C3=A1?= <98041631+Nelusa@users.noreply.github.com> Date: Tue, 7 Nov 2023 08:52:50 +0100 Subject: [PATCH] Design LoveReport, fix some styling (#25) * Design LoveReport, fix some styling * Fix some issues --------- Co-authored-by: Nelusa --- package-lock.json | 175 ++++++++++-------- public/assets/images/lovereport_gradient.svg | 34 ++++ .../images/lovereport_supplementary-image.svg | 14 ++ .../images/lovereport_woman-primary-image.svg | 68 +++++++ .../lovereport_woman-secondary-image.svg | 80 ++++++++ src/app/components-preview/page.tsx | 2 +- src/app/layout.tsx | 2 +- .../components/LoveReportFieldInput.tsx | 17 +- .../components/CreateLoveReportWizard.tsx | 159 +++++++++++----- src/app/lovereport/create/page.tsx | 1 - src/app/lovereport/intro/page.tsx | 81 ++++++++ src/app/lovereport/page.tsx | 122 +++++++++++- .../components/LoveReportInputGroup.tsx | 104 +++++++---- .../summary/components/LoveReportSummary.tsx | 23 ++- src/library/atoms/Button.tsx | 2 +- src/library/atoms/DateInput.tsx | 34 ++-- src/library/atoms/Divider.tsx | 4 +- src/library/atoms/Input.tsx | 6 +- src/library/atoms/RadioGroup.tsx | 7 +- src/library/icons/arrows.tsx | 22 +++ src/library/icons/symbols.tsx | 10 + src/library/molecules/ProgressStepper.tsx | 2 +- tailwind.config.js | 3 +- 23 files changed, 761 insertions(+), 211 deletions(-) create mode 100644 public/assets/images/lovereport_gradient.svg create mode 100644 public/assets/images/lovereport_supplementary-image.svg create mode 100644 public/assets/images/lovereport_woman-primary-image.svg create mode 100644 public/assets/images/lovereport_woman-secondary-image.svg create mode 100644 src/app/lovereport/intro/page.tsx diff --git a/package-lock.json b/package-lock.json index 2d9ce1a..897768d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -108,9 +108,9 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz", - "integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz", + "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==", "dev": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" @@ -180,12 +180,12 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.12", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.12.tgz", - "integrity": "sha512-NlGesA1usRNn6ctHCZ21M4/dKPgW9Nn1FypRdIKKgZOKzkVV4T1FlK5mBiLhHBCDmEbdQG0idrcXlbZfksJ+RA==", + "version": "0.11.13", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", + "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==", "dev": true, "dependencies": { - "@humanwhocodes/object-schema": "^2.0.0", + "@humanwhocodes/object-schema": "^2.0.1", "debug": "^4.1.1", "minimatch": "^3.0.5" }, @@ -207,9 +207,9 @@ } }, "node_modules/@humanwhocodes/object-schema": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.0.tgz", - "integrity": "sha512-9S9QrXY2K0L4AGDcSgTi9vgiCcG8VcBv4Mp7/1hDPYoswIy6Z6KO5blYto82BT8M0MZNRWmCFLpCs3HlpYGGdw==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz", + "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, "node_modules/@jridgewell/gen-mapping": { @@ -646,9 +646,9 @@ } }, "node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", + "version": "8.11.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", + "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -979,9 +979,9 @@ } }, "node_modules/axios": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz", - "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz", + "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==", "dependencies": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", @@ -1110,9 +1110,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001551", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz", - "integrity": "sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==", + "version": "1.0.30001557", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001557.tgz", + "integrity": "sha512-91oR7hLNUP3gG6MLU+n96em322a8Xzes8wWdBKhLgUoiJsAF5irZnxSUCbc+qUZXNnPCfUwLOi9ZCZpkvjQajw==", "funding": [ { "type": "opencollective", @@ -1450,9 +1450,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.561", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.561.tgz", - "integrity": "sha512-eS5t4ulWOBfVHdq9SW2dxEaFarj1lPjvJ8PaYMOjY0DecBaj/t4ARziL2IPpDr4atyWwjLFGQ2vo/VCgQFezVQ==", + "version": "1.4.569", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.569.tgz", + "integrity": "sha512-LsrJjZ0IbVy12ApW3gpYpcmHS3iRxH4bkKOW98y1/D+3cvDUWGcbzbsFinfUS8knpcZk/PG/2p/RnkMCYN7PVg==", "dev": true }, "node_modules/emoji-regex": { @@ -1475,26 +1475,26 @@ } }, "node_modules/es-abstract": { - "version": "1.22.2", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz", - "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==", + "version": "1.22.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz", + "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.0", "arraybuffer.prototype.slice": "^1.0.2", "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "call-bind": "^1.0.5", "es-set-tostringtag": "^2.0.1", "es-to-primitive": "^1.2.1", "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.1", + "get-intrinsic": "^1.2.2", "get-symbol-description": "^1.0.0", "globalthis": "^1.0.3", "gopd": "^1.0.1", - "has": "^1.0.3", "has-property-descriptors": "^1.0.0", "has-proto": "^1.0.1", "has-symbols": "^1.0.3", + "hasown": "^2.0.0", "internal-slot": "^1.0.5", "is-array-buffer": "^3.0.2", "is-callable": "^1.2.7", @@ -1504,7 +1504,7 @@ "is-string": "^1.0.7", "is-typed-array": "^1.1.12", "is-weakref": "^1.0.2", - "object-inspect": "^1.12.3", + "object-inspect": "^1.13.1", "object-keys": "^1.1.1", "object.assign": "^4.1.4", "regexp.prototype.flags": "^1.5.1", @@ -1518,7 +1518,7 @@ "typed-array-byte-offset": "^1.0.0", "typed-array-length": "^1.0.4", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.11" + "which-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" @@ -1550,26 +1550,26 @@ } }, "node_modules/es-set-tostringtag": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", - "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz", + "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==", "dev": true, "dependencies": { - "get-intrinsic": "^1.1.3", - "has": "^1.0.3", - "has-tostringtag": "^1.0.0" + "get-intrinsic": "^1.2.2", + "has-tostringtag": "^1.0.0", + "hasown": "^2.0.0" }, "engines": { "node": ">= 0.4" } }, "node_modules/es-shim-unscopables": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz", - "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", + "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", "dev": true, "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" } }, "node_modules/es-to-primitive": { @@ -1776,26 +1776,26 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.28.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz", - "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==", + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz", + "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==", "dev": true, "dependencies": { - "array-includes": "^3.1.6", - "array.prototype.findlastindex": "^1.2.2", - "array.prototype.flat": "^1.3.1", - "array.prototype.flatmap": "^1.3.1", + "array-includes": "^3.1.7", + "array.prototype.findlastindex": "^1.2.3", + "array.prototype.flat": "^1.3.2", + "array.prototype.flatmap": "^1.3.2", "debug": "^3.2.7", "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.7", + "eslint-import-resolver-node": "^0.3.9", "eslint-module-utils": "^2.8.0", - "has": "^1.0.3", - "is-core-module": "^2.13.0", + "hasown": "^2.0.0", + "is-core-module": "^2.13.1", "is-glob": "^4.0.3", "minimatch": "^3.1.2", - "object.fromentries": "^2.0.6", - "object.groupby": "^1.0.0", - "object.values": "^1.1.6", + "object.fromentries": "^2.0.7", + "object.groupby": "^1.0.1", + "object.values": "^1.1.7", "semver": "^6.3.1", "tsconfig-paths": "^3.14.2" }, @@ -2281,7 +2281,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -2314,15 +2313,15 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", + "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==", "dev": true, "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", + "function-bind": "^1.1.2", "has-proto": "^1.0.1", - "has-symbols": "^1.0.3" + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -2489,6 +2488,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz", "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==", + "dev": true, "engines": { "node": ">= 0.4.0" } @@ -2512,12 +2512,12 @@ } }, "node_modules/has-property-descriptors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz", - "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz", + "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==", "dev": true, "dependencies": { - "get-intrinsic": "^1.1.1" + "get-intrinsic": "^1.2.2" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -2562,6 +2562,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hasown": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", + "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/heroicons": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.0.18.tgz", @@ -2640,13 +2651,13 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/internal-slot": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", - "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz", + "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==", "dev": true, "dependencies": { - "get-intrinsic": "^1.2.0", - "has": "^1.0.3", + "get-intrinsic": "^1.2.2", + "hasown": "^2.0.0", "side-channel": "^1.0.4" }, "engines": { @@ -2734,11 +2745,11 @@ } }, "node_modules/is-core-module": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", - "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -3578,9 +3589,9 @@ } }, "node_modules/next-auth": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.3.tgz", - "integrity": "sha512-n1EvmY7MwQMSOkCh6jhI6uBneB6VVtkYELVMEwVaCLD1mBD3IAAucwk+90kgxramW09nSp5drvynwfNCi1JjaQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.4.tgz", + "integrity": "sha512-5DGffi+OpkbU62vPQIJ1z+hFnmow+ec5Qrn9m6eoglIO51m0DlrmLxBduZEwKAYDEg9k2joi1yelgmq1vqK3aQ==", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -3593,7 +3604,7 @@ "uuid": "^8.3.2" }, "peerDependencies": { - "next": "^12.2.5 || ^13", + "next": "^12.2.5 || ^13 || ^14", "nodemailer": "^6.6.5", "react": "^17.0.2 || ^18", "react-dom": "^17.0.2 || ^18" @@ -4980,19 +4991,19 @@ } }, "node_modules/tailwindcss": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", - "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz", + "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.18.2", + "jiti": "^1.19.1", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/public/assets/images/lovereport_gradient.svg b/public/assets/images/lovereport_gradient.svg new file mode 100644 index 0000000..e16c776 --- /dev/null +++ b/public/assets/images/lovereport_gradient.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/lovereport_supplementary-image.svg b/public/assets/images/lovereport_supplementary-image.svg new file mode 100644 index 0000000..7b094bc --- /dev/null +++ b/public/assets/images/lovereport_supplementary-image.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/images/lovereport_woman-primary-image.svg b/public/assets/images/lovereport_woman-primary-image.svg new file mode 100644 index 0000000..d0d19d3 --- /dev/null +++ b/public/assets/images/lovereport_woman-primary-image.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/lovereport_woman-secondary-image.svg b/public/assets/images/lovereport_woman-secondary-image.svg new file mode 100644 index 0000000..6f5f28a --- /dev/null +++ b/public/assets/images/lovereport_woman-secondary-image.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components-preview/page.tsx b/src/app/components-preview/page.tsx index 5a4fb1b..5293147 100644 --- a/src/app/components-preview/page.tsx +++ b/src/app/components-preview/page.tsx @@ -175,7 +175,7 @@ export default function ComponentsPreview() { /> { loading...}> -
+
{children} diff --git a/src/app/lovereport/common/components/LoveReportFieldInput.tsx b/src/app/lovereport/common/components/LoveReportFieldInput.tsx index ade7c41..1d7e1c1 100644 --- a/src/app/lovereport/common/components/LoveReportFieldInput.tsx +++ b/src/app/lovereport/common/components/LoveReportFieldInput.tsx @@ -18,28 +18,27 @@ const LoveReportFieldInput = ({ field, control, register, error }: FieldInputPro if (field.type === "radio") { const options = field.choices ? Object.values(field.choices).map(e => { + //TODO: Upravit TS chyby - doplnit typ pro "e" return { - id: e.value !== '' ? e.value : e.label, + id: e.value !== "" ? e.value : e.label, optionName: e.label, }; }) : []; - return ; + return ; } - if(field.type === 'date-time') { - return () + if (field.type === "date-time") { + return ; } - if(field.type === 'checkbox') { - return (); + if (field.type === "checkbox") { + return ; } const type = field.type === "number" ? "number" : "text"; - return ( - - ); + return ; }; export default LoveReportFieldInput; diff --git a/src/app/lovereport/create/components/CreateLoveReportWizard.tsx b/src/app/lovereport/create/components/CreateLoveReportWizard.tsx index 187b94e..cfbe19f 100644 --- a/src/app/lovereport/create/components/CreateLoveReportWizard.tsx +++ b/src/app/lovereport/create/components/CreateLoveReportWizard.tsx @@ -1,20 +1,21 @@ -"use client";; +"use client"; import StepperMenu, { StepperStep } from "library/molecules/ProgressStepper"; import { useState } from "react"; import LoveReportFieldInput from "../../common/components/LoveReportFieldInput"; import Button from "library/atoms/Button"; -import { useRouter } from 'next/navigation' +import { useRouter } from "next/navigation"; import { LoveReportFieldWithGroup } from "../../common/types"; import { getPageTitle, isInput } from "../../common/functions/functions"; import { FormValues, createForm, saveToSession, validateStep } from "../../common/functions/form"; import useLoveReportSessionStorage from "app/lovereport/common/hooks/useLoveReportSessionStorage"; +import classNames from "helpers/classNames"; type Props = { fields: LoveReportFieldWithGroup[]; }; const CreateLoveReportWizard = (props: Props) => { - const router = useRouter() + const router = useRouter(); const [currentStep, setStep] = useState(1); const inputFields = props.fields.filter(e => isInput(e.type)); @@ -40,14 +41,66 @@ const CreateLoveReportWizard = (props: Props) => { useLoveReportSessionStorage(form); return ( -
- - {

{pageTitle}

} +
+ +

{pageTitle}

+ {currentStep === 1 ? ( +
+

+ Než se pustíš do vyplňování tematických celků, prozraď nám o sobě pár základních informací, které jsou pro + LoveReport nezbytné. +

+

Nezapomeň, vše vyplňuj pravdivě.

+
+ ) : currentStep === 2 ? ( +

+ Možná si říkáš, proč nás tohle zajímá. Tvé předchozí vztahové zkušenosti jsou součástí tebe samé/ho, a proto + mají v LoveReportu své místo. +

+ ) : currentStep === 3 ? ( +

+ Je pro nás důležité vědět, kde pracuješ a jak trávíš svůj volný čas. Jen tak ti můžeme vypracovat LoveReport + na míru. +

+ ) : currentStep === 4 ? ( +
+

+ Pověz nám o svém sexuálním životě. Sex je součástí vztahů a tvůj přístup k němu by měl být v LoveReportu + zohledněn. +

+

+ Následující otázky pro tebe mohou být velmi citlivé, ale u nás jsou tvé odpovědi v bezpečí. Uvidí je jen + vztahový kouč a nikdo jiný. +

+
+ ) : currentStep === 5 ? ( +
+

Popisek, o čem je tato sekce a proč je pro LoveReport důležitá.

+

Odpověz, jak se shoduješ s následujícími tvrzeními.

+
+ ) : currentStep === 6 ? ( +
+

+ Přestože máme tendenci být k sobě kritičtí, je pro nás důležité vědět, jak vnímáš sám/a sebe a svou povahu. +

+

Odpověz, jak se shoduješ s následujícími tvrzeními.

+
+ ) : ( + currentStep === 7 && ( +
+

+ Komunikace je základ všeho. Abychom ti pomohli najít vhodného partnera/ku, se kterým/kterou komunikace + nebude váznout, potřebujeme znát tvé odpovědi. +

+

Odpověz, jak se shoduješ s následujícími tvrzeními.

+
+ ) + )} {inputFields .map((e, index) => ({ field: e, originalIndex: index })) .filter(e => e.field.group === currentStep) - .map(e => ( -
+ .map((e, index) => ( +
{ {e.field.placeholder}
))} - {currentStep > 1 && ( - - )} - {currentStep + 1 <= maxStep && ( - - )} - - {currentStep === maxStep ? ( - - ) : ( - <> - )} +
+ {currentStep > 1 ? ( +
); }; diff --git a/src/app/lovereport/create/page.tsx b/src/app/lovereport/create/page.tsx index 3584e88..f2829b6 100644 --- a/src/app/lovereport/create/page.tsx +++ b/src/app/lovereport/create/page.tsx @@ -12,7 +12,6 @@ const CreateLoveReport = async () => { return ( <> -

Profile: Create Love Report page

); diff --git a/src/app/lovereport/intro/page.tsx b/src/app/lovereport/intro/page.tsx new file mode 100644 index 0000000..3b7ae03 --- /dev/null +++ b/src/app/lovereport/intro/page.tsx @@ -0,0 +1,81 @@ +"use client"; + +import Button from "library/atoms/Button"; +import Content from "library/atoms/Content"; +import { HuggingEmojiSvg } from "library/icons/symbols"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; + +const info = [ + { + title: "6 částí", + content: "LoveReport je rozdělen do 6 tematických celků", + }, + { + title: "5 – 10 minut", + content: "Na jeho vyplnění budeš potřebovat přibližně 5 až 10 minut.", + }, + { + title: "Buď k sobě upřímný/á", + content: "Na otázky odpovídej pravdivě a otevřeně. Jenom tak můžeme vše objektivně zhodnotit a pomoci ti.", + }, + { + title: "Převyplněné údaje", + content: + "Údaje z tvého profilu jsme použili do LoveReportu, abys měl/a vyplňování jednodušší. Můžeš je ale upravit.", + }, +]; + +const LoveReportIntro = () => { + const router = useRouter(); + + const handleCreateLovereport = () => { + router.push("/lovereport/create"); + }; + + return ( + +
+ {/* TODO: Překlopit do samostatné komponenty? */} + + {info.map((item, index) => { + return ( +
+
+
+ +
+
+

{item.title}

+

{item.content}

+
+
+ {index === 1 && ( + Graphic image + )} +
+ ); + })} +
+ + ); +}; +export default LoveReportIntro; diff --git a/src/app/lovereport/page.tsx b/src/app/lovereport/page.tsx index ff883f1..2870f99 100644 --- a/src/app/lovereport/page.tsx +++ b/src/app/lovereport/page.tsx @@ -1,12 +1,126 @@ +import Content from "library/atoms/Content"; import { Metadata } from "next"; +import Image from "next/image"; +import gradientImage from "../../../public/assets/images/lovereport_gradient.svg"; +import Button from "library/atoms/Button"; +import { HuggingEmojiSvg } from "library/icons/symbols"; export const metadata: Metadata = { - title: 'Love Report', -} + title: "Love Report", +}; + +const functions = [ + { + title: "Statistická analýza", + content: + "Naše technologie vyhodnocuje mnoho faktorů z online seznamek a generuje komplexní pohled na tvůj seznamovací profil.", + }, + { + title: "Osobní kouč", + content: + "Každý LoveReport je dále ověřen a doplněn osobním seznamovacím koučem. Tím se zaručuje, že analýza je vždy individuální, co nejpřesnější a relevantní právě pro tebe.", + }, + { + title: "Rozsáhlý pohled na tvé vztahové a seznamovací dovednosti", + content: + "LoveReport se nezaměřuje pouze na současnou situaci, ale také na tvoji vztahovou minulost, dovednosti v navazování a budování vztahů i tvoji připravenost na nový vztah.", + }, + { + title: "Hodnocení minulých vztahů", + content: + "LoveReport zkoumá tvé minulé vztahy a pomáhá identifikovat vzorce a tendence, které by mohly ovlivňovat tvé současné a budoucí vztahy.", + }, + { + title: "Unikátní LOVEREPORT index", + content: + "Tento index ti poskytuje komplexní zobrazení tvých seznamovacího schopností a vztahových vlastností v šesti klíčových kategoriích.", + }, +]; const LoveReport = async () => { + return ( + <> + Gradient + +
+ Zjisti, jaký máš potenciál se seznamovat! +

+ Vítej v LoveReportu, revolučním nástroji pro lepší porozumění tvému seznamovacímu a vztahovému potenciálu! +

+ +
+ {/* TODO: Překlopit do samostatné komponenty? */} +
+

Jak to funguje?

+ {functions.map(item => { + return ( +
+
+ +
+
+

{item.title}

+

{item.content}

+
+
+ ); + })} +
+
); diff --git a/src/library/atoms/Button.tsx b/src/library/atoms/Button.tsx index 2870969..0177587 100644 --- a/src/library/atoms/Button.tsx +++ b/src/library/atoms/Button.tsx @@ -52,7 +52,7 @@ const ButtonBase = ({ children, color, size, className, disabled }: ButtonBasePr return (
{ const hasError = props.error && props.error.message; return (
- ( { - e.field.onChange(date); - }} - >)} /> - + render={e => ( + { + e.field.onChange(date); + }} + > + )} + /> - {hasError ?

{props.error!.message}

: <>} + {hasError ?

{props.error!.message}

: <>}
); }; diff --git a/src/library/atoms/Divider.tsx b/src/library/atoms/Divider.tsx index b26a5ca..ac85e7a 100644 --- a/src/library/atoms/Divider.tsx +++ b/src/library/atoms/Divider.tsx @@ -2,7 +2,7 @@ import classNames from "helpers/classNames"; type Props = { label?: string; - type: "default" | "withText"; + type?: "default" | "withText"; borderColor?: string; textColor?: string; background?: string; @@ -12,7 +12,7 @@ type Props = { const Divider = ({ label, - type, + type = "default", borderColor = "border-violet-70", textColor = "text-violet-70", background = "bg-white", diff --git a/src/library/atoms/Input.tsx b/src/library/atoms/Input.tsx index d306272..f578b98 100644 --- a/src/library/atoms/Input.tsx +++ b/src/library/atoms/Input.tsx @@ -30,12 +30,12 @@ const Input = ({ const hasError = error && error.message; return ( -
+ <>
@@ -72,7 +72,7 @@ const Input = ({ <> )}
-
+ ); }; diff --git a/src/library/atoms/RadioGroup.tsx b/src/library/atoms/RadioGroup.tsx index 477990d..91417d6 100644 --- a/src/library/atoms/RadioGroup.tsx +++ b/src/library/atoms/RadioGroup.tsx @@ -13,10 +13,11 @@ type Props = { optionName: string; }[]; disabled?: boolean; + direction?: "row" | "column"; }; //TODO: Upravit, až bude hotový design pro RadioGroup -const RadioGroup = ({ title, description, options, register, error, disabled = false }: Props) => { +const RadioGroup = ({ title, description, options, register, error, disabled = false, direction = "row" }: Props) => { const hasError = error && error.message; return ( @@ -24,11 +25,11 @@ const RadioGroup = ({ title, description, options, register, error, disabled = f

{title}

{description && description !== "" ?

{description}

: <>} -
+
{title} {options.map(option => { return ( -
+