From f5eb4fc7c81f301fb5e3814d7af9ba2bad09bb77 Mon Sep 17 00:00:00 2001 From: Misha Hrynko Date: Mon, 5 Aug 2024 09:40:06 +0300 Subject: [PATCH 1/2] Merge pull request #478 from mykhalenych/patch-2 Update README.md --- package-lock.json | 307 ++++++++---------- package.json | 30 +- public/img/icons/Chevron (Arrow Down).png | Bin 0 -> 231 bytes public/img/icons/Chevron (Arrow Left).png | Bin 0 -> 222 bytes public/img/icons/Chevron (Arrow Right).png | Bin 0 -> 223 bytes public/img/icons/Chevron (Arrow Up).png | Bin 0 -> 232 bytes public/img/icons/Close.png | Bin 0 -> 325 bytes public/img/icons/Favourites (Heart Like).png | Bin 0 -> 445 bytes .../Favourites + Counter (Heart Like).png | Bin 0 -> 774 bytes .../icons/Favourites Filled (Heart Like).png | Bin 0 -> 337 bytes public/img/icons/Home.png | Bin 0 -> 414 bytes public/img/icons/Logo.png | Bin 0 -> 2822 bytes public/img/icons/Menu.png | Bin 0 -> 226 bytes public/img/icons/Minus.png | Bin 0 -> 167 bytes public/img/icons/Plus.png | Bin 0 -> 224 bytes public/img/icons/Search.png | Bin 0 -> 468 bytes public/img/icons/Shopping bag (Cart).png | Bin 0 -> 415 bytes .../icons/Shopping bag + Counter(Cart).png | Bin 0 -> 801 bytes src/App.scss | 9 +- src/App.tsx | 5 +- src/components/Header/Header.scss | 19 ++ src/components/Header/Header.tsx | 27 ++ src/index.tsx | 15 +- src/pages/HomePage.tsx | 3 + src/pages/PageNotFound.tsx | 3 + src/styles/_typography.scss | 100 ++++++ {public => src/styles}/fonts/Mont-Bold.otf | Bin {public => src/styles}/fonts/Mont-Regular.otf | Bin .../styles}/fonts/Mont-SemiBold.otf | Bin src/styles/fonts/_fonts.scss | 20 ++ src/styles/utils.scss | 2 + src/styles/utils/_mixins.scss | 43 +++ src/styles/utils/_vars.scss | 17 + 33 files changed, 422 insertions(+), 178 deletions(-) create mode 100644 public/img/icons/Chevron (Arrow Down).png create mode 100644 public/img/icons/Chevron (Arrow Left).png create mode 100644 public/img/icons/Chevron (Arrow Right).png create mode 100644 public/img/icons/Chevron (Arrow Up).png create mode 100644 public/img/icons/Close.png create mode 100644 public/img/icons/Favourites (Heart Like).png create mode 100644 public/img/icons/Favourites + Counter (Heart Like).png create mode 100644 public/img/icons/Favourites Filled (Heart Like).png create mode 100644 public/img/icons/Home.png create mode 100644 public/img/icons/Logo.png create mode 100644 public/img/icons/Menu.png create mode 100644 public/img/icons/Minus.png create mode 100644 public/img/icons/Plus.png create mode 100644 public/img/icons/Search.png create mode 100644 public/img/icons/Shopping bag (Cart).png create mode 100644 public/img/icons/Shopping bag + Counter(Cart).png create mode 100644 src/components/Header/Header.scss create mode 100644 src/components/Header/Header.tsx create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/PageNotFound.tsx create mode 100644 src/styles/_typography.scss rename {public => src/styles}/fonts/Mont-Bold.otf (100%) mode change 100755 => 100644 rename {public => src/styles}/fonts/Mont-Regular.otf (100%) mode change 100755 => 100644 rename {public => src/styles}/fonts/Mont-SemiBold.otf (100%) mode change 100755 => 100644 create mode 100644 src/styles/fonts/_fonts.scss create mode 100644 src/styles/utils.scss create mode 100644 src/styles/utils/_mixins.scss create mode 100644 src/styles/utils/_vars.scss diff --git a/package-lock.json b/package-lock.json index 98392dc382..641f077ca1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1671,19 +1671,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==" }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, "string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", @@ -1694,36 +1681,6 @@ "strip-ansi": "^7.0.1" } }, - "string-width-cjs": { - "version": "npm:string-width@4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "strip-ansi": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", @@ -1732,21 +1689,6 @@ "ansi-regex": "^6.0.1" } }, - "strip-ansi-cjs": { - "version": "npm:strip-ansi@6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - } - } - }, "wrap-ansi": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", @@ -1756,54 +1698,6 @@ "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } - }, - "wrap-ansi-cjs": { - "version": "npm:wrap-ansi@7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - } - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - } - } - } } } }, @@ -2421,9 +2315,9 @@ } }, "@mate-academy/scripts": { - "version": "1.7.9", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.7.9.tgz", - "integrity": "sha512-TDtSLf9BVwkaib4xpMB8r8VA18N6ABRpePGxpqk+aYOHcXq1DFwrzqCbOW9LyrOxWbqLVJBhP5exEgFXiaWhfw==", + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.3.tgz", + "integrity": "sha512-dvwmJ379IIcv9qtTNJTxzvZa6Sg0tZAb11K21fuFVaiQI7vOGkoWZHeA6Qc85qMyIf6Tqgz/GWQZZcEfikbeVA==", "dev": true, "requires": { "@octokit/rest": "^17.11.2", @@ -2778,9 +2672,9 @@ } }, "@remix-run/router": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", - "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==" + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==" }, "@rollup/plugin-babel": { "version": "5.3.1", @@ -3805,10 +3699,10 @@ } } }, - "acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==" + "acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==" }, "acorn-jsx": { "version": "5.3.2", @@ -4798,9 +4692,9 @@ } }, "chrome-trace-event": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", - "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", + "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==" }, "ci-info": { "version": "3.9.0", @@ -5942,9 +5836,9 @@ } }, "enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "requires": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -6124,9 +6018,9 @@ } }, "es-module-lexer": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz", - "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==" + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz", + "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==" }, "es-object-atoms": { "version": "1.0.0", @@ -6653,13 +6547,13 @@ } }, "eslint-plugin-prettier": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", - "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "dev": true, "requires": { "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.6" + "synckit": "^0.9.1" } }, "eslint-plugin-react": { @@ -8070,6 +7964,12 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, + "husky": { + "version": "9.1.4", + "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.4.tgz", + "integrity": "sha512-bho94YyReb4JV7LYWRWxZ/xr6TtOTt8cMfmQ39MQYJ7f/YE268s3GdghGwi+y4zAeqewE5zYLvuhV0M0ijsDEA==", + "dev": true + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -8113,9 +8013,9 @@ "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==" }, "immutable": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", - "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", "dev": true }, "import-fresh": { @@ -12661,9 +12561,9 @@ "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==" }, "prettier": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", - "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true }, "prettier-linter-helpers": { @@ -13004,20 +12904,20 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, "react-router": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", - "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", "requires": { - "@remix-run/router": "1.15.3" + "@remix-run/router": "1.19.1" } }, "react-router-dom": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", - "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", "requires": { - "@remix-run/router": "1.15.3", - "react-router": "6.22.3" + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" } }, "react-scripts": { @@ -13208,6 +13108,15 @@ "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, + "sass-loader": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", + "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==", + "requires": { + "klona": "^2.0.4", + "neo-async": "^2.6.2" + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -13801,9 +13710,9 @@ "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, "sass": { - "version": "1.72.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz", - "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==", + "version": "1.77.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", + "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", @@ -13812,11 +13721,11 @@ } }, "sass-loader": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", - "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.1.tgz", + "integrity": "sha512-xACl1ToTsKnL9Ce5yYpRxrLj9QUDCnwZNhzpC7tKiFyA8zXsd3Ap+HGVnbCgkdQcm43E+i6oKAWBsvGA6ZoiMw==", + "dev": true, "requires": { - "klona": "^2.0.4", "neo-async": "^2.6.2" } }, @@ -14379,6 +14288,23 @@ } } }, + "string-width-cjs": { + "version": "npm:string-width@4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "dependencies": { + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + } + } + }, "string.prototype.matchall": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz", @@ -14514,6 +14440,14 @@ "ansi-regex": "^5.0.1" } }, + "strip-ansi-cjs": { + "version": "npm:strip-ansi@6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "requires": { + "ansi-regex": "^5.0.1" + } + }, "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -14911,9 +14845,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "synckit": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", - "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz", + "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==", "dev": true, "requires": { "@pkgr/core": "^0.1.0", @@ -14921,9 +14855,9 @@ }, "dependencies": { "tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", "dev": true } } @@ -15617,9 +15551,9 @@ } }, "watchpack": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", - "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", + "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==", "requires": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -15639,25 +15573,25 @@ "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==" }, "webpack": { - "version": "5.90.3", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz", - "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==", + "version": "5.93.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz", + "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==", "requires": { "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.17.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", @@ -15665,7 +15599,7 @@ "schema-utils": "^3.2.0", "tapable": "^2.1.1", "terser-webpack-plugin": "^5.3.10", - "watchpack": "^2.4.0", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "dependencies": { @@ -16346,6 +16280,39 @@ } } }, + "wrap-ansi-cjs": { + "version": "npm:wrap-ansi@7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + } + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 222c88a139..6dd5151b77 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,14 @@ "classnames": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3", + "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "react-transition-group": "^4.4.5" }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@mate-academy/eslint-config-react-typescript": "latest", - "@mate-academy/scripts": "^1.7.9", + "@mate-academy/scripts": "^1.9.3", "@mate-academy/students-ts-config": "latest", "@mate-academy/stylelint-config": "latest", "@types/node": "^16.18.80", @@ -28,16 +28,21 @@ "@types/react-dom": "^18.2.19", "cypress": "^12.17.4", "eslint": "^7.32.0", + "eslint-config-prettier": "^9.1.0", "eslint-plugin-cypress": "^2.11.2", + "eslint-plugin-prettier": "^5.2.1", "gh-pages": "^6.1.1", + "husky": "^9.1.4", "mochawesome": "^7.1.3", "mochawesome-merge": "^4.2.0", "mochawesome-report-generator": "^6.2.0", "postcss": "^8.4.12", - "prettier": "^3.2.5", - "sass": "^1.72.0", + "prettier": "^3.3.3", + "sass": "^1.77.8", + "sass-loader": "^16.0.1", "stylelint": "^15.11.0", - "typescript": "5.1.6" + "typescript": "5.1.6", + "webpack": "^5.93.0" }, "scripts": { "start": "mate-scripts start -l", @@ -72,5 +77,20 @@ "_comment": "Add `cypressComponents: true` to enable component tests", "cypress": true } + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.ts": [ + "eslint --fix", + "prettier --write" + ], + "*.tsx": [ + "eslint --fix", + "prettier --write" + ] } } diff --git a/public/img/icons/Chevron (Arrow Down).png b/public/img/icons/Chevron (Arrow Down).png new file mode 100644 index 0000000000000000000000000000000000000000..453fda21f656e479419f904c91a9ec0a922acce9 GIT binary patch literal 231 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBevPM#V@L(#TfdFG4GID^a}Ttx(UEmBzrcHh zQ^M_qirS&5U!Nv62?TP#-SLE@zP!G&p(S7O>MgF+Uo-sYMfg0<-f91!ueJ8)5)ak(u6{1-oD!M``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBezB*EV@L(#(@7gS8yt9C|G#9?OG$kxu&zLQ zg|J1>MjoZ-c76*cDn!W6S>F31JE&!Pi+@ACgH5#5^HbNoor=z{V_agqI;F!kHA$U$ zx70?PNuBD|q2JOs%su)*Z&&Pk3#XdH0%wn2=l|yz`DCqNgvYK2v)}C1a@|t6#(pEv OdInEdKbLh*2~7a=%uICv literal 0 HcmV?d00001 diff --git a/public/img/icons/Chevron (Arrow Right).png b/public/img/icons/Chevron (Arrow Right).png new file mode 100644 index 0000000000000000000000000000000000000000..ee116b69ab894488717ba65757f0953ab800f23a GIT binary patch literal 223 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBeu<}xV@L(#-GGg}4F){L+I$Zb&CKRKXsKh6 zSIAq~Be_842(yVvwQ5vEfUQc9h;?71(Z);nqOE*Rt?T2xSuFc%%LM6<_gbZOEdTX) zEY+RWStsvp_#QdvFF Oeg;ohKbLh*2~7YS?Ma9L literal 0 HcmV?d00001 diff --git a/public/img/icons/Chevron (Arrow Up).png b/public/img/icons/Chevron (Arrow Up).png new file mode 100644 index 0000000000000000000000000000000000000000..1862034f7bf096e338ad96b781e4a19fb604769e GIT binary patch literal 232 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBeyyjAV@L(#+kk_-4GKIuR@3$8AB(-gF!Mm- zk#u>s?-yBpmP!aK9`de_DO$Mmb*u*?*T2?-p+?2lp{HhC;A1c`TK`j4Nwlo3=!;{~ z`o-^Vt3`^m@J7wLxGMVb%&m9)ZFuyI_>QaY`Fy2Wy2JTRlS5hV;>S$aZZNMh*Z3i( Z{&b~d!IdzzIG{rqJYD@<);T3K0RW}NPNV<; literal 0 HcmV?d00001 diff --git a/public/img/icons/Close.png b/public/img/icons/Close.png new file mode 100644 index 0000000000000000000000000000000000000000..a822fd1c84a50b622ec0b86ce4abde2ace6bf045 GIT binary patch literal 325 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{w+@z$B+ufyFu1MO%6P@-QpXV|6GYOiqA-dCcpU0r+bvyN2u zv`;T)u711j#N{P_jjLoubvbupo-#aQ@3BNiq$4g-9*ImMY{A(D5Z`Hj~ TC^r2F^d*C*tDnm{r-UW|A3=Vd literal 0 HcmV?d00001 diff --git a/public/img/icons/Favourites (Heart Like).png b/public/img/icons/Favourites (Heart Like).png new file mode 100644 index 0000000000000000000000000000000000000000..09bcfd49c12d7a710ea98390e5df7b381768d0e7 GIT binary patch literal 445 zcmV;u0Yd(XP)<-fG5x!uvW$jxB;F(?NDR(c>=evpmQtA8RxM9 zHGu`fWQ#ZR=KJlNKSWy^W``hXSYxOy;A03f2Aq2z4W@UejiwQ93Bf|hG2_;`Q8oue zQKK!yT@um{PD53I0uU!6*d?GPD%5zc0;?)3jJ84s@PCHkRG5ZDl`H3-^5R8t2Zp-- zJWDR(O@&Vqg`5jlju1rkYo&I)GZX)oRlfk_J5Ar7|Hl<#CZGD?!~=RHur7T$qYW%P zi62EIGunn+>$SA0iPs=E#CTBG22tEuR~r?%IuRc3jK^PDZU3OEeYmOZ9cJo(l#Bhu z=uVrSIQM!#zX-#6Ka670skF+(MUM7uk(EJKipwBnVl0D9w@(*H*ITz&dcxAznlIM^ n{Dt`QGVw~&(RNqXysiBJI*+3|oa-Rv00000NkvXXu0mjf5DB(R literal 0 HcmV?d00001 diff --git a/public/img/icons/Favourites + Counter (Heart Like).png b/public/img/icons/Favourites + Counter (Heart Like).png new file mode 100644 index 0000000000000000000000000000000000000000..132af7b72864141227a7e0849c2d25e1765e42de GIT binary patch literal 774 zcmV+h1Nr=kP)eAy9giX4Y-K1giIyx9g{{XQrj_^X@AK;bh9J(lh_;CKjo+w@mPeC1 zeHjcW45;#YJ$JUTA^zUm12WQxB!MTH1kd!ejz3>9#$FE$L|DeCR&%FIOJG*3|MU?8 z0l2@g0IonlMQE{aU@KMSpY!vg9jp^7E-&kX-~U*E{*`TRZdx$!%nbPF=3sPk(t1F@ z=~nkJr6lrcmP#TX(}Muz=K8vIIN#X;=JQ!M8H+|OaD8nJ+=;~XOSEdMjzIsCFAol^ zgHfpf)azG)cXuu0jfQnI=Jj?0rLI6(j!S|7Dre>s##zN=Ow+z>7w!BBM8fU_S2zq8 zc>7K{rc_blDichcCo|1WCYl@)jPrt`M02%TO>d{`Z(&DTb)@cXi^c?{xxnFOz|42t zg!kA6Nlp8>dUEn(H8}q86c}4{kGVaO@T2Rwb7Soc>Q=lVHH?WVc7;OLGvnw8e5n*c zOSZt^#6%irCJvlnAN2PB2;B~jhrTu%jknKVW}aPaZFwk-WK>fDn}-0G`}1r~g-f0PlBT)_4Rs^#A|>07*qoM6N<$ Eg1B#HQvd(} literal 0 HcmV?d00001 diff --git a/public/img/icons/Favourites Filled (Heart Like).png b/public/img/icons/Favourites Filled (Heart Like).png new file mode 100644 index 0000000000000000000000000000000000000000..0a2e341783b6e6424793b69a015c69ba902b4f1a GIT binary patch literal 337 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{xeS($B+uft&<#u4mt?9?p{8{H1y45mUR!r zX3n)}T-+g?AfB^>QT+kOwH1>}wLX=KES%KoF=hL!nJfR-pZ_B8m&3lh`&yXClK_#@ z)XE9Xwb>hI98FhWTg~umQ@Y@W^_r%6RreGPEwbKfB(N-U(>lOfJlS=QC)*s0hR08| zHyC%=GymAC@M48Q*RQ2Vzl-eeg%{JlW#9LhdAWy(cNR h7jMq>e=+|K17}@v@h`#^; literal 0 HcmV?d00001 diff --git a/public/img/icons/Home.png b/public/img/icons/Home.png new file mode 100644 index 0000000000000000000000000000000000000000..ce4d43c586abcf12e888eaea75532b3c6807def3 GIT binary patch literal 414 zcmV;P0b%}$P)b8gxIs8UR5D>8Izk#IZBDR{Rm=!uB2Vb@ zW+ZD?@2yv>C!!WuTlB+dlby7^umxs#9Pex2bqTf+ip#Bm_w+B*X*6eS@dQ z4`|;=$`cZZq!JQnB@{Dex39Q;3~YA;jX3#6QGGA+bMjQsMAz~>kb{pOvkw~z!5v4eZhW~ZJ` zU_LAa>q;0KB1toh%d^lXkRc9(iLplZ@@e~>)C6N9Ye_g>yg+T!wf(^~mM))z7IEdu zw>rB2a$Q@IP(1dH-!5m*>)+fgt)DDBT8)K!x^{hPU+7EN?ANf(;C_Xcq1(J`u>kVUpq&h7nWat7R;AwFC;uj}BTfCQhQ9tm`=U>@>>w~#dH=cRv;MpMC zxSqTHJ{lVa;YjG)umj+gWD^vlSd1}AYGV*ug^)*_XDQK>xMX^ppp>SXjDVX+>SP?f z<+3cs4P()8#(DGj!EiJ@8i_@e_yWUCCTwqwktHrj#2`F%bRb3J!JcXIFZvG4Yl0q$JCJ9zkOf6P>>ewBT*Z{o0i zFx9>qnHdzcV!x!K;a<cFUWV2Ck20{$2sWyalAW%)Tw6nh z+lc|(0qECKf8b+i#B_A!G91T{K-;!5mhzeTymt&nJ0Q_lpL-DK+8LKG(Bq+z>EiOt zU^==xI@;aS6+7^9z$kC_Kt}*)G61UhaU{@(A_ z&3`^Pjs9?66bm?{uvCPaLqfT<36JmR;ofro&#(g!1Q|#=ZzA;2+d#^$(+oCxYwAV! zIIxYB)u6r)?gFyrDAmVLNGX(xU@U+}?N2woZE>tLjx`NUzI3~0RV`*`^W**AhU|NA=T7ZH#!I%MMm?!6f z>K!IiqFqvi=kKzaXv_xfPF|>dgEt(O0WIs%!9)xbve}7+DH%%{R~Ih$RW_v&JrG%D zBW@bwiGB%N0S&Q~ft!@)h8B@sx}^A~eE$IEczjX;04mL!#+YN0Tf`5f8YbE;P#`hq zmzh&#K9fjR8iw|vG0Yt&5`8Ie#g;T$2Lf|Xd+5*(XubvvCZIbC=jpVG6O%0Is6c`t z1x90%C($(;!GgTg$;!;tg8NT`{_Zer0h-6U#2C$6C4o)2kHY+Egdsl~F;6|=KNrox zlio|p$Tf7d^EG8Oc1>qbKceZVI^EG+6JWot-8fI&y%ziuqe0HagtWB=olIb)=L!_& zae*dOnH%%wB#`lEK-%49$`wp##3;jPtY_^gu7WfkUCq#;fi-S`n5FvG)7UlWq5)~_ zk74y_P- zn|M+|6Q*gKj?I~dr{}ePdJCuE4IwZsz?~1Fp^BTr?CM1*bIheLkR&_OOkuUdWG01E zQRgu@gGXi^!rZDtQhs64zzp6jt4LEtWweoI4CDL-=Z&$AUSu>r6=KygX;x`OtIo?B zG^5d38=HoWT01CNAp`9kOt?V8hbaWZP9dPM4r4BUm>7=+*F+wqgX{w`%M}t`ZWW;U{btaZa6hT4{U-yX=4yn=#TkDZH+tcJ08(3Y&_Q`{ zPnAYS+IAL#meH^*Hf<@eb(6pZI%6h1`X%A(R0Y_6=_)>P>Sy(7LuKgt7f>q7u0@0% z65~-a+)H}_oUMp7%EmOhf%ak=z>`n$$*;77icnBGcic)Llyo$7LyS2)TsaGvyI_W` zLzz(9`+_yVBAq0w(`5QlrRq9$nCj;7Dy$@b{l;iZWpGhdPfGn%B%2aT6&f*}N&5Ms zqH$?aEl{~_tdMiM`s7o{HFO!Lr-t?WgP;!%qAb%D<49K;Q@#^+$`>crIVNzb+Zz|+ z^-w9G%D~jwxp1cijs?+Xd6oMPh+luQ*^IW73d>+r3AM) zMNpbGtG~*qv;oyl(k}v4Hw~b>`cH-kW2UY!3>B3?PJUb^_ld?eq|p_iH2M*Su}O?f z>zMC732zlBoEI5WyGng{TnlsBLM} zY1#B?ZK4#Iq&JNQdb5s3d*?~jH>3I*wS8p^hOJSqx0Swh7K-#-tLGV>xT_u2ohAYK Y4}|Px;tkRexc~qF07*qoM6N<$f&w;D`2YX_ literal 0 HcmV?d00001 diff --git a/public/img/icons/Menu.png b/public/img/icons/Menu.png new file mode 100644 index 0000000000000000000000000000000000000000..b567a54d6833d98ee0ae22a9884788007a18c4b5 GIT binary patch literal 226 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBez~WMV@L(#+ldD`8w_|{CtqSLVUk_w`YO)v z8AlxJ!jhK01>a}gxW=mUWx<2ymY9F)_KZJlX3R2jV=N9{!gI-bd)3TXzZeFWnT-o< zznMuJaQ1e@cFwbu323fiw(TjF=~hyhyt!=lk-dCX%S4`53MTWL{``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzKy4gV@L(#+tV8b83Y7eE|!WcYT+(TFHzqk zWb#O&(LwE5+?Vt+F$4Yr>lwi+>wi95GPlbkclBXIo*DMO4_mpI-+Wf$1DeC&>FVdQ I&MBb@0Gn``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBeyOL6V@L(#-AQLT8w_|_FTYUe3$W>M4=)sY zsj}|T#boyaL1E98i<&H79K6KOwEnE}1o?&~8@H`hG4Wri%9z=)s(#A>_ka2cWr~Ln zJ$hkzAZJ&CkqDK literal 0 HcmV?d00001 diff --git a/public/img/icons/Search.png b/public/img/icons/Search.png new file mode 100644 index 0000000000000000000000000000000000000000..40d5ff6c12bcd12d4c9f3e8d9ae6387433a3457f GIT binary patch literal 468 zcmV;_0W1EAP)u)G5_^35b9Lo0000< KMNUMnLSTYLl)7dB literal 0 HcmV?d00001 diff --git a/public/img/icons/Shopping bag (Cart).png b/public/img/icons/Shopping bag (Cart).png new file mode 100644 index 0000000000000000000000000000000000000000..ce37092f6e05262f9cb5c7c0d7973cde2dc58728 GIT binary patch literal 415 zcmV;Q0bu@#P)QO$aY7QMX_Z8R zPkK+bV}Ex1Y(fLZoVakZ5M8jNnE5rWRB8s3BTp*2=te5`z+;ZTa%EgIk-dcwMCh=Y zVY|X`O7xxRxmWd~uE6-G3xW~=OeEZuUO=v1p#V$XysgR#vYBR2MT14q14&7JK{DI= z1r3gQ^B!RUj6Yvjva|E?XnyJW!Dri^+l)C5+x8s-WaCtCx9M!mnaORW4QjiO+Xm(r z_Pih_XS6ncu*z+OY@v8ymCCH&q8G-Dz=DR6$!UJTo+~>QOpqzuKJe_dxNBkdw z4u?B5NPVZ3{M!TT+(8#f-@11WYgk+rWR+g5GVJ-V=*eTXjX%L?ZA)0@j`08h002ov JPDHLkV1i8nvBm%Z literal 0 HcmV?d00001 diff --git a/public/img/icons/Shopping bag + Counter(Cart).png b/public/img/icons/Shopping bag + Counter(Cart).png new file mode 100644 index 0000000000000000000000000000000000000000..d5398960b29b92336a509022b01649af7f8554aa GIT binary patch literal 801 zcmV++1K#|JP)52mCLRU6SSlHUhFc9mi2_QqksWx$M!NoY~0^NWKG>yFl z1|jJ&K!+yg9EugWdw$=etrt?-qjk~nOTOg&yZ3wFpWk-?e*r=W6>T0ZC;lLdmPF&u zvkY1UUKkd|V*JP2n)+*Z7sv=+&Y@#`96H9vOq{-CjJ|r_0?lKtw7DtCe3O&VH9ZY&gM)H| z=H%6N3@L%ml+tMxhfiA})Jm(Xa_}>g0oK_mJ-IeKEQyONE6^SaRUc8#ZP@GTX6*q7 z#R{EYK0P>)1IsV~ip8^wcXp(S<74R=^ZA^FydfcxF-5FnCOEhN5fQLD!PDOlC+NKs z4G9^u;~*Fo2^-M$ZNssZ!*KD644lACYUOi*cLc< z+Sk23Bl6-oKiS&qpfHkAP8BR3A~@aOmpQcZd0=gARK?T)rdWLsN0KrQUp_}_?NgV* zOOqsg>jEu$%EHGA#%QsGYguUbMkazoqdDgqUXXh8?!D=a#oz|&(2GS<0m*^#s4gv; z%2}65(7G#GNLXG2rNK4ren{6d8}bp_BQ2GBs~+YL!>?koP)Q4hZu+}<`3nOrg_b}v zv--$-9OpwC434hj7aVg~X~a=XsF}@v3f4Mb3+_Dx${C9Qv*(zAc{ykB0fg__W$w5X zVOfWfvNeTPdg*^ch{EUK64WFbovEKgTUiEd+^9bRZehdYdfN^E`102T_87Q=@1w47 fm~e$F{L}ai@}DjN=QFAL00000NkvXXu0mjf9P(mS literal 0 HcmV?d00001 diff --git a/src/App.scss b/src/App.scss index 71bc413aad..28963b4461 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1 +1,8 @@ -// not empty +@import '/src/styles/fonts/fonts'; +@import './styles/typography'; +@import './styles/utils'; + +* { + font-family: $f-main; + box-sizing: border-box; +} diff --git a/src/App.tsx b/src/App.tsx index 372e4b4206..1cf881dfc9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,10 @@ import './App.scss'; +import { Header } from './components/Header/Header'; export const App = () => (
-

Product Catalog

+
+
+
); diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss new file mode 100644 index 0000000000..f1b7e5d70a --- /dev/null +++ b/src/components/Header/Header.scss @@ -0,0 +1,19 @@ +.header { + display: flex; + + &__logo { + width: 64px; + height: 22px; + } +} + +.nav-bar { + display: flex; + gap: 10px; + &__link { + color: black; + text-transform: uppercase; + text-decoration: none; + font-size: 12px; + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000000..90bdf939de --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,27 @@ +import { Link, NavLink } from 'react-router-dom'; +import './Header.scss'; + +export const Header: React.FC = () => { + return ( +
+ + Nice gadgets + + +

HELLO

+
+ ); +}; diff --git a/src/index.tsx b/src/index.tsx index 50470f1508..dfdc913483 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,17 @@ import { createRoot } from 'react-dom/client'; import { App } from './App'; +import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'; +import { PageNotFound } from './pages/PageNotFound'; +import { HomePage } from './pages/HomePage'; -createRoot(document.getElementById('root') as HTMLElement).render(); +createRoot(document.getElementById('root') as HTMLElement).render( + + + }> + } /> + } /> + } /> + + + , +); diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000000..1c9b4399cd --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,3 @@ +export const HomePage: React.FC = () => { + return

Hello world

; +}; diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx new file mode 100644 index 0000000000..e26d1218cf --- /dev/null +++ b/src/pages/PageNotFound.tsx @@ -0,0 +1,3 @@ +export const PageNotFound: React.FC = () => { + return

Page Not Found

; +}; diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss new file mode 100644 index 0000000000..7c1ae42759 --- /dev/null +++ b/src/styles/_typography.scss @@ -0,0 +1,100 @@ +@import './utils'; + +h1 { + font-weight: bold; + font-size: 32px; + line-height: 41px; + letter-spacing: -0.01em; +} + +h2 { + font-weight: bold; + font-size: 22px; + line-height: 31px; + letter-spacing: 0; +} + +h3 { + font-weight: 600; + font-size: 20px; + line-height: 26px; + letter-spacing: 0; +} + +h4 { + font-weight: 600; + font-size: 16px; + line-height: 20px; + letter-spacing: 0; +} + +h5 { + font-size: 12px; + line-height: 15px; + letter-spacing: 0; +} + +h6 { + font-size: 12px; + line-height: 11px; + letter-spacing: 0.04em; +} + +button { + font-size: 14px; + line-height: 21px; +} + +p { + font-size: 14px; + line-height: 21px; + font-weight: normal; +} + + +@include on-tablet { + h1 { + font-size: 48px; + line-height: 56px; + letter-spacing: -0.01em; + } + + h2 { + font-size: 32px; + line-height: 41px; + letter-spacing: -0.01em; + } + + h3 { + font-size: 22px; + line-height: 31px; + letter-spacing: 0; + } + + h4 { + font-size: 20px; + line-height: 26px; + letter-spacing: 0; + } + + h5 { + font-size: 12px; + line-height: 15px; + letter-spacing: 0; + } + + h6 { + font-size: 12px; + line-height: 11px; + letter-spacing: 0.04em; + } + + button { + font-size: 14px; + line-height: 21px; + } + + p { + font-weight: normal; + } +} diff --git a/public/fonts/Mont-Bold.otf b/src/styles/fonts/Mont-Bold.otf old mode 100755 new mode 100644 similarity index 100% rename from public/fonts/Mont-Bold.otf rename to src/styles/fonts/Mont-Bold.otf diff --git a/public/fonts/Mont-Regular.otf b/src/styles/fonts/Mont-Regular.otf old mode 100755 new mode 100644 similarity index 100% rename from public/fonts/Mont-Regular.otf rename to src/styles/fonts/Mont-Regular.otf diff --git a/public/fonts/Mont-SemiBold.otf b/src/styles/fonts/Mont-SemiBold.otf old mode 100755 new mode 100644 similarity index 100% rename from public/fonts/Mont-SemiBold.otf rename to src/styles/fonts/Mont-SemiBold.otf diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss new file mode 100644 index 0000000000..01c7b08c91 --- /dev/null +++ b/src/styles/fonts/_fonts.scss @@ -0,0 +1,20 @@ +@font-face { + font-family: Mont; + src: url("../fonts/Mont-Regular.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: Mont; + src: url("../fonts/Mont-Regular.otf") format("opentype"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: Mont; + src: url("../fonts/Mont-SemiBold.otf") format("opentype"); + font-weight: 600; + font-style: normal; +} diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 0000000000..eed1e1bd6f --- /dev/null +++ b/src/styles/utils.scss @@ -0,0 +1,2 @@ +@import './utils/vars'; +@import './utils/mixins'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss new file mode 100644 index 0000000000..13d788871a --- /dev/null +++ b/src/styles/utils/_mixins.scss @@ -0,0 +1,43 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $width-tablet) { + @content; + } +} + +@mixin on-laptop { + @media (min-width: $width-laptop) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $width-desktop) { + @content; + } +} + +@mixin container { + padding-inline: 16px; + @content; + + @include on-tablet { + padding-inline: 24px; + } + + @include on-desktop { + padding-inline: 32px; + } +} + +@mixin template { + display: grid; + align-items: center; + @content; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss new file mode 100644 index 0000000000..c38b922762 --- /dev/null +++ b/src/styles/utils/_vars.scss @@ -0,0 +1,17 @@ +// Colors + +$c-primary: #313237; +$c-secondary: #89939A; +$c-icon: #B4BDC4; +$c-element: #E2E6E9; +$c-hover-bg: #FAFBFC; +$c-white: #FFF; +$c-green: #27AE60; +$c-red: #EB5757; + +// Screen-widths + +$width-tablet: 640px; +$width-laptop: 1280px; +$width-desktop: 1440px; +$f-main: 'Mont'; From 4ebaf605cbef74c4d7353193241ed36634527636 Mon Sep 17 00:00:00 2001 From: GTXtab Date: Wed, 21 Aug 2024 01:01:24 +0300 Subject: [PATCH 2/2] prepared workspace(utils, typography, etc) --- .eslintrc.js | 1 + .prettierrc | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7c6c7923ca..a356e0696b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,6 +2,7 @@ module.exports = { extends: [ '@mate-academy/eslint-config-react-typescript', 'plugin:cypress/recommended', + "prettier", ], rules: {}, }; diff --git a/.prettierrc b/.prettierrc index 49b905d690..d9def107b5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,8 +4,23 @@ "tabWidth": 2, "trailingComma": "all", "jsxSingleQuote": false, - "printWidth": 80, + "printWidth": 100, "semi": true, "bracketSpacing": true, - "bracketSameLine": false + "bracketSameLine": false, + + "files.autoSave": "afterDelay", + "files.autoSaveDelay": 500, + "editor.fontSize": 15, + "editor.tabSize": 2, + "editor.renderWhitespace": "boundary", + "editor.detectIndentation": false, + + "editor.codeActionsOnSave": { + "source.fixAll": "always", + "source.fixAll.eslint": "always" + }, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnType": true, + "editor.formatOnSave": true }