From 6ada2f94119cae404ccbcdab3ba5383adb647619 Mon Sep 17 00:00:00 2001 From: aelassas Date: Fri, 22 Mar 2024 22:19:08 +0000 Subject: [PATCH] Fix CSS issues --- backend/.stylelintrc.json | 1 + backend/package-lock.json | 583 +++++++++++++++++- backend/package.json | 6 +- backend/src/App.tsx | 2 +- backend/src/assets/css/about.css | 3 + backend/src/assets/css/accordion.css | 11 +- backend/src/assets/css/activate.css | 4 +- backend/src/assets/css/agencies.css | 4 +- backend/src/assets/css/agency-list.css | 2 +- backend/src/assets/css/agency.css | 4 +- backend/src/assets/css/booking-list.css | 20 +- backend/src/assets/css/booking.css | 6 +- backend/src/assets/css/bookings.css | 9 +- backend/src/assets/css/change-password.css | 4 +- backend/src/assets/css/common.css | 14 +- backend/src/assets/css/contact.css | 3 + backend/src/assets/css/create-agency.css | 4 +- backend/src/assets/css/create-booking.css | 6 +- backend/src/assets/css/create-location.css | 4 +- backend/src/assets/css/create-property.css | 8 +- backend/src/assets/css/create-user.css | 4 +- backend/src/assets/css/forgot-password.css | 4 +- backend/src/assets/css/header.css | 4 +- backend/src/assets/css/image-editor.css | 8 +- backend/src/assets/css/image-viewer.css | 10 +- backend/src/assets/css/index.css | 2 +- backend/src/assets/css/info-box.css | 2 +- backend/src/assets/css/location-list.css | 2 +- backend/src/assets/css/locations.css | 4 +- backend/src/assets/css/notifications.css | 69 +-- backend/src/assets/css/properties.css | 4 +- backend/src/assets/css/property-bookings.css | 9 +- backend/src/assets/css/property-info.css | 2 +- backend/src/assets/css/property-list.css | 4 +- backend/src/assets/css/property.css | 7 +- backend/src/assets/css/reset-password.css | 4 +- backend/src/assets/css/settings.css | 4 +- backend/src/assets/css/signin.css | 10 +- backend/src/assets/css/signup.css | 4 +- backend/src/assets/css/tos.css | 3 + backend/src/assets/css/update-agency.css | 4 +- backend/src/assets/css/update-location.css | 4 +- backend/src/assets/css/update-property.css | 0 backend/src/assets/css/update-user.css | 4 +- backend/src/assets/css/user.css | 9 +- backend/src/assets/css/users.css | 14 +- backend/src/components/ImageViewer.tsx | 2 +- backend/src/pages/About.tsx | 9 +- backend/src/pages/Contact.tsx | 9 +- backend/src/pages/ToS.tsx | 9 +- backend/src/pages/UpdateProperty.tsx | 1 - frontend/.stylelintrc.json | 1 + frontend/package-lock.json | 577 ++++++++++++++++- frontend/package.json | 6 +- frontend/src/App.tsx | 2 +- frontend/src/assets/css/about.css | 3 + frontend/src/assets/css/accordion.css | 11 +- frontend/src/assets/css/activate.css | 4 +- frontend/src/assets/css/agency-badge.css | 2 +- frontend/src/assets/css/agency-list.css | 2 +- frontend/src/assets/css/booking-list.css | 20 +- frontend/src/assets/css/booking.css | 6 +- frontend/src/assets/css/bookings.css | 9 +- frontend/src/assets/css/change-password.css | 4 +- frontend/src/assets/css/checkout.css | 38 +- frontend/src/assets/css/common.css | 14 +- frontend/src/assets/css/contact.css | 3 + .../src/assets/css/create-reservation.css | 0 frontend/src/assets/css/forgot-password.css | 4 +- frontend/src/assets/css/header.css | 4 +- frontend/src/assets/css/home.css | 18 +- frontend/src/assets/css/image-viewer.css | 10 +- frontend/src/assets/css/index.css | 2 +- frontend/src/assets/css/multiple-select.css | 2 +- frontend/src/assets/css/notifications.css | 69 +-- frontend/src/assets/css/profile.css | 0 frontend/src/assets/css/properties.css | 4 +- frontend/src/assets/css/property-filter.css | 2 +- frontend/src/assets/css/property-info.css | 2 +- frontend/src/assets/css/property-list.css | 4 +- frontend/src/assets/css/property.css | 7 +- frontend/src/assets/css/reset-password.css | 4 +- frontend/src/assets/css/settings.css | 4 +- frontend/src/assets/css/signin.css | 10 +- frontend/src/assets/css/signup.css | 4 +- frontend/src/assets/css/tos.css | 3 + frontend/src/components/ImageViewer.tsx | 2 +- frontend/src/pages/About.tsx | 9 +- frontend/src/pages/Contact.tsx | 9 +- frontend/src/pages/ToS.tsx | 9 +- 90 files changed, 1434 insertions(+), 373 deletions(-) create mode 100644 backend/.stylelintrc.json delete mode 100644 backend/src/assets/css/update-property.css create mode 100644 frontend/.stylelintrc.json delete mode 100644 frontend/src/assets/css/create-reservation.css delete mode 100644 frontend/src/assets/css/profile.css diff --git a/backend/.stylelintrc.json b/backend/.stylelintrc.json new file mode 100644 index 00000000..77ceb29f --- /dev/null +++ b/backend/.stylelintrc.json @@ -0,0 +1 @@ +{ "extends": ["stylelint-config-standard"] } \ No newline at end of file diff --git a/backend/package-lock.json b/backend/package-lock.json index 8f3850d2..3a5f402c 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -42,7 +42,9 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint-config-airbnb": "^19.0.4", - "npm-check-updates": "^16.14.17" + "npm-check-updates": "^16.14.17", + "stylelint": "^16.2.1", + "stylelint-config-standard": "^36.0.0" } }, "../packages/disable-react-devtools": { @@ -2023,6 +2025,70 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", + "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^2.2.4" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz", + "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz", + "integrity": "sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.6.1", + "@csstools/css-tokenizer": "^2.2.4" + } + }, "node_modules/@csstools/normalize.css": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", @@ -5944,6 +6010,15 @@ "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==" }, + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/async": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", @@ -7400,6 +7475,15 @@ "postcss": "^8.0.9" } }, + "node_modules/css-functions-list": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", + "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", + "dev": true, + "engines": { + "node": ">=12 || >=16" + } + }, "node_modules/css-has-pseudo": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", @@ -9463,9 +9547,9 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", - "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -9493,6 +9577,15 @@ "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==", "dev": true }, + "node_modules/fastest-levenshtein": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", + "dev": true, + "engines": { + "node": ">= 4.9.1" + } + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -9749,9 +9842,9 @@ } }, "node_modules/flatted": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", - "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, "node_modules/follow-redirects": { "version": "1.15.6", @@ -10428,6 +10521,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -10742,6 +10841,18 @@ "node": ">= 12" } }, + "node_modules/html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/html-to-draftjs": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz", @@ -10958,9 +11069,9 @@ } }, "node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "engines": { "node": ">= 4" } @@ -11400,6 +11511,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -14038,9 +14158,9 @@ } }, "node_modules/keyv": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", - "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==", + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", "dependencies": { "json-buffer": "3.0.1" } @@ -14070,6 +14190,12 @@ "node": ">= 8" } }, + "node_modules/known-css-properties": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", + "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", + "dev": true + }, "node_modules/language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -14213,6 +14339,12 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "dev": true + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -14322,6 +14454,16 @@ "tmpl": "1.0.5" } }, + "node_modules/mathml-tag-names": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -14346,6 +14488,18 @@ "node": ">= 4.0.0" } }, + "node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -14790,9 +14944,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "funding": [ { "type": "github", @@ -16145,9 +16299,9 @@ } }, "node_modules/postcss": { - "version": "8.4.29", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", - "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "funding": [ { "type": "opencollective", @@ -16163,9 +16317,9 @@ } ], "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -17236,6 +17390,38 @@ "postcss": "^8.0.3" } }, + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", + "dev": true + }, + "node_modules/postcss-safe-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, "node_modules/postcss-selector-not": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz", @@ -17255,9 +17441,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -19114,6 +19300,56 @@ "node": ">=8" } }, + "node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/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==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/slice-ansi/node_modules/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==", + "dev": true + }, "node_modules/smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -19176,9 +19412,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -19739,6 +19975,243 @@ "postcss": "^8.2.15" } }, + "node_modules/stylelint": { + "version": "16.2.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", + "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", + "dev": true, + "dependencies": { + "@csstools/css-parser-algorithms": "^2.5.0", + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/media-query-list-parser": "^2.1.7", + "@csstools/selector-specificity": "^3.0.1", + "balanced-match": "^2.0.0", + "colord": "^2.9.3", + "cosmiconfig": "^9.0.0", + "css-functions-list": "^3.2.1", + "css-tree": "^2.3.1", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "fastest-levenshtein": "^1.0.16", + "file-entry-cache": "^8.0.0", + "global-modules": "^2.0.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "html-tags": "^3.3.1", + "ignore": "^5.3.0", + "imurmurhash": "^0.1.4", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.29.0", + "mathml-tag-names": "^2.1.3", + "meow": "^13.1.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.33", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.0.15", + "postcss-value-parser": "^4.2.0", + "resolve-from": "^5.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^7.1.0", + "supports-hyperlinks": "^3.0.0", + "svg-tags": "^1.0.0", + "table": "^6.8.1", + "write-file-atomic": "^5.0.1" + }, + "bin": { + "stylelint": "bin/stylelint.mjs" + }, + "engines": { + "node": ">=18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + } + }, + "node_modules/stylelint-config-recommended": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", + "dev": true, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.0" + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^14.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint/node_modules/@csstools/selector-specificity": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", + "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "node_modules/stylelint/node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/stylelint/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/stylelint/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/stylelint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, + "node_modules/stylelint/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/stylelint/node_modules/write-file-atomic": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -19870,6 +20343,12 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -19975,6 +20454,56 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/table": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", + "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.1", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/table/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", diff --git a/backend/package.json b/backend/package.json index 5a5c935b..072f9b13 100644 --- a/backend/package.json +++ b/backend/package.json @@ -41,6 +41,8 @@ "eject": "react-scripts eject", "lint": "eslint --ext .ts,.tsx .", "fix": "eslint --fix .", + "stylelint": "stylelint \"**/*.css\"", + "stylelint:fix": "stylelint \"**/*.css\" --fix", "ncu": "ncu -u -x typescript,date-fns" }, "eslintConfig": { @@ -64,6 +66,8 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint-config-airbnb": "^19.0.4", - "npm-check-updates": "^16.14.17" + "npm-check-updates": "^16.14.17", + "stylelint": "^16.2.1", + "stylelint-config-standard": "^36.0.0" } } diff --git a/backend/src/App.tsx b/backend/src/App.tsx index 3e5d8d3f..c6328406 100644 --- a/backend/src/App.tsx +++ b/backend/src/App.tsx @@ -35,7 +35,7 @@ const NoMatch = lazy(() => import('./pages/NoMatch')) const App = () => ( -
+
}> } /> diff --git a/backend/src/assets/css/about.css b/backend/src/assets/css/about.css index e69de29b..878cce6f 100644 --- a/backend/src/assets/css/about.css +++ b/backend/src/assets/css/about.css @@ -0,0 +1,3 @@ +.about { + padding: 15px; +} diff --git a/backend/src/assets/css/accordion.css b/backend/src/assets/css/accordion.css index 7cda0bdc..0e70c06a 100644 --- a/backend/src/assets/css/accordion.css +++ b/backend/src/assets/css/accordion.css @@ -14,7 +14,7 @@ div.accordion-container span.accordion { display: inline-block; width: 100%; text-align: center; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-weight: 400; font-size: 13px; line-height: 2em; @@ -24,10 +24,7 @@ div.accordion-container span.accordion { div.accordion-container span.accordion-active { border-bottom: 1px solid #dadada; - border-top-right-radius: 5px; - border-top-left-radius: 5px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-radius: 5px 5px 0 0; } div.accordion-container span.accordion-active, @@ -35,7 +32,7 @@ div.accordion-container span.accordion:hover { background: #fafafa; } -div.accordion-container span.accordion:after { +div.accordion-container span.accordion::after { content: ''; border-top: 5px solid transparent; border-left: 5px solid #000; @@ -45,7 +42,7 @@ div.accordion-container span.accordion:after { margin: 7px 7px 0; } -div.accordion-container span.accordion-active:after { +div.accordion-container span.accordion-active::after { transform: rotate(90deg); } diff --git a/backend/src/assets/css/activate.css b/backend/src/assets/css/activate.css index b69cb6d3..a5b23dad 100644 --- a/backend/src/assets/css/activate.css +++ b/backend/src/assets/css/activate.css @@ -52,7 +52,7 @@ div.resend { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .activate-form { margin-top: 40px; width: 330px; @@ -70,7 +70,7 @@ div.resend { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .activate-form { margin-top: 40px; width: 450px; diff --git a/backend/src/assets/css/agencies.css b/backend/src/assets/css/agencies.css index 4731d76a..9f51244f 100644 --- a/backend/src/assets/css/agencies.css +++ b/backend/src/assets/css/agencies.css @@ -14,7 +14,7 @@ div.agencies .info-box { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.agencies { flex-direction: column; } @@ -54,7 +54,7 @@ div.agencies .info-box { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.agencies { flex-direction: row; } diff --git a/backend/src/assets/css/agency-list.css b/backend/src/assets/css/agency-list.css index ab54d5b7..6bf0a073 100644 --- a/backend/src/assets/css/agency-list.css +++ b/backend/src/assets/css/agency-list.css @@ -68,7 +68,7 @@ section.agency-list article .agency-actions button { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { section.agency-list article { margin-left: calc(50% - 300px); width: 600px; diff --git a/backend/src/assets/css/agency.css b/backend/src/assets/css/agency.css index 02956033..19f3bac4 100644 --- a/backend/src/assets/css/agency.css +++ b/backend/src/assets/css/agency.css @@ -42,7 +42,7 @@ div.agency { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.agency { flex-direction: column; } @@ -70,7 +70,7 @@ div.agency { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.agency { flex-direction: row; } diff --git a/backend/src/assets/css/booking-list.css b/backend/src/assets/css/booking-list.css index c726841a..8c9f0f64 100644 --- a/backend/src/assets/css/booking-list.css +++ b/backend/src/assets/css/booking-list.css @@ -82,7 +82,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value { display: table-row; line-height: 25px; font-size: 13px; - color: rgba(0, 0, 0, 0.47); + color: rgb(0 0 0 / 47%); } div.bs-list div.booking-details div.booking-detail span.booking-detail-title { @@ -90,7 +90,7 @@ div.bs-list div.booking-details div.booking-detail span.booking-detail-title { font-weight: 700; width: 250px; font-size: 15px; - color: rgba(0, 0, 0, 0.87); + color: rgb(0 0 0 / 87%); } div.bs-list div.booking-details div.booking-detail div.booking-detail-value div.property-agency { @@ -107,7 +107,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value div. } div.bs-list div.booking-details div.booking-detail div.booking-detail-value span.property-agency-name { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 0.9em; line-height: 1em; white-space: nowrap; @@ -117,7 +117,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value span div.bs-list div.booking-details div.booking-detail div.booking-price { font-size: 17px; font-weight: 700; - color: rgba(0, 0, 0, 0.87); + color: rgb(0 0 0 / 87%); } div.bs-list div.booking-details div.bs { @@ -186,9 +186,8 @@ div.bs-list div.extras div.extra span.extra-title { } div.bs-list div.extras div.extra span.extra-text { - font-size: 13px; font-size: 12px; - color: rgba(0, 0, 0, 0.47); + color: rgb(0 0 0 / 47%); } div.bs-list div.bs-buttons { @@ -202,20 +201,17 @@ div.bs-list div.bs-buttons button { margin-bottom: 5px; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.bs-list { width: calc(100% - 20px); max-width: 480px; } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.bs-list { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; overflow-y: auto; } } diff --git a/backend/src/assets/css/booking.css b/backend/src/assets/css/booking.css index 29131f00..66f8685a 100644 --- a/backend/src/assets/css/booking.css +++ b/backend/src/assets/css/booking.css @@ -31,7 +31,7 @@ div.booking div.col-2 div.col-2-header span.price-day { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.booking div.col-1 { padding: 20px; background: #fefefe; @@ -43,7 +43,7 @@ div.booking div.col-2 div.col-2-header span.price-day { } } -@media only screen and (max-width: 1270px) { +@media only screen and (width <= 1270px) { div.booking div.col-2 .property { display: none; } @@ -51,7 +51,7 @@ div.booking div.col-2 div.col-2-header span.price-day { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.booking div.col-1 { background: #fefefe; border-right: #eee solid 1px; diff --git a/backend/src/assets/css/bookings.css b/backend/src/assets/css/bookings.css index ea4ecc28..a66591f0 100644 --- a/backend/src/assets/css/bookings.css +++ b/backend/src/assets/css/bookings.css @@ -7,7 +7,7 @@ div.bookings { /* Device width is lower than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.bookings { top: 56px; overflow-y: auto; @@ -50,7 +50,7 @@ div.bookings { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.bookings { top: 64px; } @@ -97,9 +97,6 @@ div.bookings { div.bookings div.col-2 { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 300px; + inset: 0 0 0 300px; } } diff --git a/backend/src/assets/css/change-password.css b/backend/src/assets/css/change-password.css index 065dc773..2de408f3 100644 --- a/backend/src/assets/css/change-password.css +++ b/backend/src/assets/css/change-password.css @@ -14,7 +14,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .password-reset-form { margin-top: 40px; width: 330px; @@ -25,7 +25,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .password-reset-form { margin-top: 40px; width: 450px; diff --git a/backend/src/assets/css/common.css b/backend/src/assets/css/common.css index 18f2847a..e303f9da 100644 --- a/backend/src/assets/css/common.css +++ b/backend/src/assets/css/common.css @@ -5,13 +5,13 @@ .btn-primary { background-color: #121212 !important; - color: #ffffff !important; + color: #fff !important; opacity: 0.9; } .btn-secondary { - background-color: #999999 !important; - color: #ffffff !important; + background-color: #999 !important; + color: #fff !important; } .btn-primary:hover, @@ -38,7 +38,7 @@ margin: 0 10px !important; } -.required:after { +.required::after { content: ' *'; } @@ -208,12 +208,12 @@ } .d-adornment-icon { - color: rgba(0, 0, 0, 0.54); + color: rgb(0 0 0 / 54%); width: 20px !important; height: 20px !important; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.content { margin: 0; padding: 0; @@ -239,7 +239,7 @@ } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.content { margin: 0; padding: 0; diff --git a/backend/src/assets/css/contact.css b/backend/src/assets/css/contact.css index e69de29b..08a46e08 100644 --- a/backend/src/assets/css/contact.css +++ b/backend/src/assets/css/contact.css @@ -0,0 +1,3 @@ +.contact { + padding: 15px; +} diff --git a/backend/src/assets/css/create-agency.css b/backend/src/assets/css/create-agency.css index 21475ff8..19845bc3 100644 --- a/backend/src/assets/css/create-agency.css +++ b/backend/src/assets/css/create-agency.css @@ -12,7 +12,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .agency-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -24,7 +24,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .agency-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/create-booking.css b/backend/src/assets/css/create-booking.css index f71f82d9..18270abb 100644 --- a/backend/src/assets/css/create-booking.css +++ b/backend/src/assets/css/create-booking.css @@ -15,14 +15,14 @@ } .checkbox-fc .checkbox-fcl { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 0.9em; line-height: 1em; } /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .booking-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -34,7 +34,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .booking-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/create-location.css b/backend/src/assets/css/create-location.css index b6f374aa..92b08dbf 100644 --- a/backend/src/assets/css/create-location.css +++ b/backend/src/assets/css/create-location.css @@ -12,7 +12,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .location-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -24,7 +24,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .location-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/create-property.css b/backend/src/assets/css/create-property.css index 2759e837..2afcf2a3 100644 --- a/backend/src/assets/css/create-property.css +++ b/backend/src/assets/css/create-property.css @@ -15,13 +15,13 @@ } .checkbox-fc .checkbox-fcl { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 0.9em; line-height: 1em; } .label { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-weight: 400; font-size: 12px; display: block; @@ -41,7 +41,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .property-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -52,7 +52,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .property-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/create-user.css b/backend/src/assets/css/create-user.css index fc0fdda1..08e8d400 100644 --- a/backend/src/assets/css/create-user.css +++ b/backend/src/assets/css/create-user.css @@ -12,7 +12,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .user-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -24,7 +24,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .user-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/forgot-password.css b/backend/src/assets/css/forgot-password.css index 2e1ae85f..372ee6a6 100644 --- a/backend/src/assets/css/forgot-password.css +++ b/backend/src/assets/css/forgot-password.css @@ -17,7 +17,7 @@ div.forgot-password h1.forgot-password-title { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .forgot-password-form { margin-top: 40px; width: 330px; @@ -27,7 +27,7 @@ div.forgot-password h1.forgot-password-title { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .forgot-password-form { margin-top: 40px; width: 450px; diff --git a/backend/src/assets/css/header.css b/backend/src/assets/css/header.css index 21dbd597..347946b9 100644 --- a/backend/src/assets/css/header.css +++ b/backend/src/assets/css/header.css @@ -21,7 +21,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .header { min-height: 56px; } @@ -33,7 +33,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .header { min-height: 64px; } diff --git a/backend/src/assets/css/image-editor.css b/backend/src/assets/css/image-editor.css index bab4ca87..f2cacd46 100644 --- a/backend/src/assets/css/image-editor.css +++ b/backend/src/assets/css/image-editor.css @@ -33,7 +33,6 @@ .image-editor .action { cursor: pointer; - width: -moz-fit-content; width: fit-content; text-decoration: none; color: #3498db; @@ -59,9 +58,8 @@ div.images { display: flex; - flex-direction: row; + flex-flow: row wrap; overflow-x: auto; - flex-wrap: wrap; } div.images div.container { @@ -83,11 +81,11 @@ div.images div.container div.image { cursor: pointer; } -div.images div.image:hover { +div.images div.container div.image:hover { border: 2px solid #FF8F00; } -div.images img.image { +div.images div.container img.image { max-width: 100%; max-height: 100%; } diff --git a/backend/src/assets/css/image-viewer.css b/backend/src/assets/css/image-viewer.css index b73462c7..6793304c 100644 --- a/backend/src/assets/css/image-viewer.css +++ b/backend/src/assets/css/image-viewer.css @@ -8,7 +8,7 @@ top: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, .5); + background-color: rgb(0 0 0 / 50%); box-sizing: border-box; } @@ -42,8 +42,6 @@ width: auto; height: auto; user-select: none; - -moz-user-select: none; - -webkit-user-select: none; } .close { @@ -82,8 +80,6 @@ opacity: .6; padding: 0 15px; user-select: none; - -moz-user-select: none; - -webkit-user-select: none; } .navigation:hover { @@ -104,13 +100,13 @@ right: 0; } -@media (max-width: 900px) { +@media (width <= 900px) { .wrapper { padding: 0; } } -div.thumbnailsContainer { +div.thumbnails-container { position: absolute; right: 0; bottom: 0; diff --git a/backend/src/assets/css/index.css b/backend/src/assets/css/index.css index 3159369c..9ea30172 100644 --- a/backend/src/assets/css/index.css +++ b/backend/src/assets/css/index.css @@ -1,4 +1,4 @@ -.App { +.app { display: flex; flex-direction: column; } diff --git a/backend/src/assets/css/info-box.css b/backend/src/assets/css/info-box.css index 8a3452ea..df7a3418 100644 --- a/backend/src/assets/css/info-box.css +++ b/backend/src/assets/css/info-box.css @@ -13,7 +13,7 @@ div.info-box .info-box-icon { } div.info-box span.info-box-text { - color: rgba(0, 0, 0, 0.63); + color: rgb(0 0 0 / 63%); position: relative; left: 90px; font-size: 17px; diff --git a/backend/src/assets/css/location-list.css b/backend/src/assets/css/location-list.css index 31956148..28f63deb 100644 --- a/backend/src/assets/css/location-list.css +++ b/backend/src/assets/css/location-list.css @@ -30,7 +30,7 @@ section.location-list .location-title { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { section.location-list .location-list-item { width: 500px; margin-left: calc(50% - 250px); diff --git a/backend/src/assets/css/locations.css b/backend/src/assets/css/locations.css index 7452062d..07e7f892 100644 --- a/backend/src/assets/css/locations.css +++ b/backend/src/assets/css/locations.css @@ -14,7 +14,7 @@ div.locations .info-box { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.locations { flex-direction: column; } @@ -54,7 +54,7 @@ div.locations .info-box { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.locations { flex-direction: row; } diff --git a/backend/src/assets/css/notifications.css b/backend/src/assets/css/notifications.css index 83db314e..f4a821b4 100644 --- a/backend/src/assets/css/notifications.css +++ b/backend/src/assets/css/notifications.css @@ -37,12 +37,40 @@ div.notifications div.header-container div.header { max-width: 680px; } -div.notifications div.notifications-list { +div.notifications div.footer { position: absolute; - top: 55px; right: 0; - bottom: 55px; + bottom: 0; left: 0; + height: 54px; + display: flex; + flex-direction: row; + justify-content: flex-end; + border-top: 1px solid #ddd; + padding: 5px 10px 5px 0; +} + +div.notifications div.footer div.row-count { + font-size: 14px; + display: flex; + flex-direction: row; + align-items: center; + margin-right: 7px; +} + +div.notifications div.footer div.actions { + display: flex; + flex-direction: row; +} + +div.notifications div.footer div.actions .icon { + font-size: 16px; + width: 24px; +} + +div.notifications div.notifications-list { + position: absolute; + inset: 55px 0; display: flex; flex-direction: column; align-items: center; @@ -99,44 +127,13 @@ div.notifications div.notifications-list div.notification-container div.notifica margin-left: 5px; } -div.notifications div.footer { - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 54px; - display: flex; - flex-direction: row; - justify-content: flex-end; - border-top: 1px solid #ddd; - padding: 5px 10px 5px 0; -} - -div.notifications div.footer div.row-count { - font-size: 14px; - display: flex; - flex-direction: row; - align-items: center; - margin-right: 7px; -} - -div.notifications div.footer div.actions { - display: flex; - flex-direction: row; -} - -div.notifications div.footer div.actions .icon { - font-size: 16px; - width: 24px; -} - -@media only screen and (max-width: 960px) { +@media only screen and (width <=960px) { div.notifications { top: 56px; } } -@media only screen and (min-width: 960px) { +@media only screen and (width >=960px) { div.notifications { top: 64px; } diff --git a/backend/src/assets/css/properties.css b/backend/src/assets/css/properties.css index 4b958952..29b7aa23 100644 --- a/backend/src/assets/css/properties.css +++ b/backend/src/assets/css/properties.css @@ -15,7 +15,7 @@ div.properties div.col-1 div.info-box { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.properties { flex-direction: column; } @@ -60,7 +60,7 @@ div.properties div.col-1 div.info-box { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.properties { flex-direction: row; } diff --git a/backend/src/assets/css/property-bookings.css b/backend/src/assets/css/property-bookings.css index ec332cfb..b6b41433 100644 --- a/backend/src/assets/css/property-bookings.css +++ b/backend/src/assets/css/property-bookings.css @@ -110,7 +110,7 @@ div.property div.action { justify-content: flex-end; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.property { top: 56px; } @@ -131,7 +131,7 @@ div.property div.action { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.property { top: 64px; } @@ -152,9 +152,6 @@ div.property div.action { div.property div.col-2 { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 400px; + inset: 0 0 0 400px; } } diff --git a/backend/src/assets/css/property-info.css b/backend/src/assets/css/property-info.css index 6dc872a7..75d8397a 100644 --- a/backend/src/assets/css/property-info.css +++ b/backend/src/assets/css/property-info.css @@ -53,7 +53,7 @@ div.property-info ul.extras-list div.property-info-list-item { } div.property-info ul.extras-list .extra-info { - color: rgba(0, 0, 0, 0.35); + color: rgb(0 0 0 / 35%); } div.property-info ul.extras-list span.property-info-list-text { diff --git a/backend/src/assets/css/property-list.css b/backend/src/assets/css/property-list.css index d699864f..f69b15ca 100644 --- a/backend/src/assets/css/property-list.css +++ b/backend/src/assets/css/property-list.css @@ -91,7 +91,7 @@ section.property-list article div.right-panel div.action { /* Device width is between 500px and 960px */ -@media only screen and (min-width: 500px) and (max-width: 960px) { +@media only screen and (width >= 500px) and (width <= 960px) { section.property-list { max-width: 480px; } @@ -99,7 +99,7 @@ section.property-list article div.right-panel div.action { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { section.property-list article { position: relative; background: #fff; diff --git a/backend/src/assets/css/property.css b/backend/src/assets/css/property.css index 6cce1e48..2d8d889e 100644 --- a/backend/src/assets/css/property.css +++ b/backend/src/assets/css/property.css @@ -1,11 +1,11 @@ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.main div.property { display: flex; flex-direction: column; } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.main { max-width: 872px; margin-right: auto; @@ -54,9 +54,8 @@ div.main div.property img.main-image { div.main div.property div.images { display: flex; - flex-direction: row; + flex-flow: row wrap; overflow-x: auto; - flex-wrap: wrap; } div.main div.property div.images div.image { diff --git a/backend/src/assets/css/reset-password.css b/backend/src/assets/css/reset-password.css index 934113f5..cb3ca764 100644 --- a/backend/src/assets/css/reset-password.css +++ b/backend/src/assets/css/reset-password.css @@ -25,7 +25,7 @@ div.resend { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .reset-password-form { margin-top: 40px; width: 330px; @@ -36,7 +36,7 @@ div.resend { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .reset-password-form { margin-top: 40px; width: 450px; diff --git a/backend/src/assets/css/settings.css b/backend/src/assets/css/settings.css index a4737f50..62f39543 100644 --- a/backend/src/assets/css/settings.css +++ b/backend/src/assets/css/settings.css @@ -16,7 +16,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .settings-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -40,7 +40,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .settings-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/signin.css b/backend/src/assets/css/signin.css index 1fc2e002..add86340 100644 --- a/backend/src/assets/css/signin.css +++ b/backend/src/assets/css/signin.css @@ -30,7 +30,7 @@ div.signin div.stay-connected input[type='checkbox'] { div.signin div.stay-connected label { cursor: pointer; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); user-select: none; } @@ -40,7 +40,7 @@ div.signin div.forgot-password { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .signin-form { align-items: center; justify-content: center; @@ -50,14 +50,14 @@ div.signin div.forgot-password { margin-top: 45px; margin-left: calc(50% - 175px); margin-bottom: 50px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgb(0 0 0 / 12%); padding: 15px; } } /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .signin-form { align-items: center; justify-content: center; @@ -67,7 +67,7 @@ div.signin div.forgot-password { margin-top: 45px; margin-left: calc(50% - 190px); margin-bottom: 50px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgb(0 0 0 / 12%); padding: 15px; } } diff --git a/backend/src/assets/css/signup.css b/backend/src/assets/css/signup.css index e00fdeb8..7aa8e5eb 100644 --- a/backend/src/assets/css/signup.css +++ b/backend/src/assets/css/signup.css @@ -18,7 +18,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .signup-form { margin: 45px 0 20px calc(50% - 175px); width: 350px; @@ -34,7 +34,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .signup-form { margin: 45px 0 20px calc(50% - 300px); width: 600px; diff --git a/backend/src/assets/css/tos.css b/backend/src/assets/css/tos.css index e69de29b..eaf26a82 100644 --- a/backend/src/assets/css/tos.css +++ b/backend/src/assets/css/tos.css @@ -0,0 +1,3 @@ +.tos { + padding: 15px; +} diff --git a/backend/src/assets/css/update-agency.css b/backend/src/assets/css/update-agency.css index 80ddb4bf..17cef435 100644 --- a/backend/src/assets/css/update-agency.css +++ b/backend/src/assets/css/update-agency.css @@ -5,7 +5,7 @@ div.update-agency .resend-activation-link { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .agency-form-update { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -17,7 +17,7 @@ div.update-agency .resend-activation-link { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .agency-form-update { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/update-location.css b/backend/src/assets/css/update-location.css index f80384c7..92420079 100644 --- a/backend/src/assets/css/update-location.css +++ b/backend/src/assets/css/update-location.css @@ -12,7 +12,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .location-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -24,7 +24,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .location-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/update-property.css b/backend/src/assets/css/update-property.css deleted file mode 100644 index e69de29b..00000000 diff --git a/backend/src/assets/css/update-user.css b/backend/src/assets/css/update-user.css index 0c7882a8..bb0fc404 100644 --- a/backend/src/assets/css/update-user.css +++ b/backend/src/assets/css/update-user.css @@ -17,7 +17,7 @@ div.update-user .resend-activation-link { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.update-user .user-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -28,7 +28,7 @@ div.update-user .resend-activation-link { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.update-user .user-form { margin-top: 45px !important; margin-left: calc(50% - 300px) !important; diff --git a/backend/src/assets/css/user.css b/backend/src/assets/css/user.css index d2612511..8991372f 100644 --- a/backend/src/assets/css/user.css +++ b/backend/src/assets/css/user.css @@ -24,7 +24,7 @@ div.user div.col-1 .user-actions { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.user { top: 56px; overflow: auto; @@ -51,7 +51,7 @@ div.user div.col-1 .user-actions { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.user { top: 64px; overflow: auto; @@ -76,10 +76,7 @@ div.user div.col-1 .user-actions { div.user div.col-2 { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 300px; + inset: 0 0 0 300px; overflow: auto; } } diff --git a/backend/src/assets/css/users.css b/backend/src/assets/css/users.css index 4e677f03..eb76981b 100644 --- a/backend/src/assets/css/users.css +++ b/backend/src/assets/css/users.css @@ -7,7 +7,7 @@ div.users { /* Device width is lower than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.users { top: 56px; } @@ -38,16 +38,13 @@ div.users { div.users div.col-2 { position: absolute; - top: 90px; - right: 0; - bottom: 0; - left: 0; + inset: 90px 0 0; } } /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.users { top: 64px; } @@ -75,9 +72,6 @@ div.users { div.users div.col-2 { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 300px; + inset: 0 0 0 300px; } } diff --git a/backend/src/components/ImageViewer.tsx b/backend/src/components/ImageViewer.tsx index ee6339b3..0a1a6fe2 100644 --- a/backend/src/components/ImageViewer.tsx +++ b/backend/src/components/ImageViewer.tsx @@ -194,7 +194,7 @@ const ImageViewer = ({ { src.length > 0 && ( -
+
{src.map((srcItem, index) => (
{ - const onLoad = () => {} + const onLoad = () => { } return ( - About! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) } diff --git a/backend/src/pages/Contact.tsx b/backend/src/pages/Contact.tsx index b0ba2ac6..0dce385f 100644 --- a/backend/src/pages/Contact.tsx +++ b/backend/src/pages/Contact.tsx @@ -4,11 +4,16 @@ import Master from '../components/Master' import '../assets/css/contact.css' const Contact = () => { - const onLoad = () => {} + const onLoad = () => { } return ( - Contact! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) } diff --git a/backend/src/pages/ToS.tsx b/backend/src/pages/ToS.tsx index b7478465..ec93d6b9 100644 --- a/backend/src/pages/ToS.tsx +++ b/backend/src/pages/ToS.tsx @@ -4,11 +4,16 @@ import Master from '../components/Master' import '../assets/css/tos.css' const ToS = () => { - const onLoad = () => {} + const onLoad = () => { } return ( - ToS! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) } diff --git a/backend/src/pages/UpdateProperty.tsx b/backend/src/pages/UpdateProperty.tsx index 27e18bf1..b8b410e6 100644 --- a/backend/src/pages/UpdateProperty.tsx +++ b/backend/src/pages/UpdateProperty.tsx @@ -33,7 +33,6 @@ import ImageEditor from '../components/ImageEditor' import RentalTermList from '../components/RentalTermList' import '../assets/css/create-property.css' -import '../assets/css/update-property.css' const UpdateProperty = () => { const navigate = useNavigate() diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json new file mode 100644 index 00000000..77ceb29f --- /dev/null +++ b/frontend/.stylelintrc.json @@ -0,0 +1 @@ +{ "extends": ["stylelint-config-standard"] } \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 30602493..44f1a106 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -37,7 +37,9 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint-config-airbnb": "^19.0.4", - "npm-check-updates": "^16.14.17" + "npm-check-updates": "^16.14.17", + "stylelint": "^16.2.1", + "stylelint-config-standard": "^36.0.0" } }, "../packages/disable-react-devtools": { @@ -2018,6 +2020,70 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", + "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^2.2.4" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz", + "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz", + "integrity": "sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.6.1", + "@csstools/css-tokenizer": "^2.2.4" + } + }, "node_modules/@csstools/normalize.css": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", @@ -5905,6 +5971,15 @@ "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==" }, + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/async": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", @@ -7348,6 +7423,15 @@ "postcss": "^8.0.9" } }, + "node_modules/css-functions-list": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", + "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", + "dev": true, + "engines": { + "node": ">=12 || >=16" + } + }, "node_modules/css-has-pseudo": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", @@ -9381,9 +9465,9 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", - "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -9411,6 +9495,15 @@ "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==", "dev": true }, + "node_modules/fastest-levenshtein": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", + "dev": true, + "engines": { + "node": ">= 4.9.1" + } + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -10318,6 +10411,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -10632,6 +10731,18 @@ "node": ">= 12" } }, + "node_modules/html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.3", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz", @@ -10834,9 +10945,9 @@ } }, "node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "engines": { "node": ">= 4" } @@ -11270,6 +11381,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -13909,9 +14029,9 @@ } }, "node_modules/keyv": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", - "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==", + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", "dependencies": { "json-buffer": "3.0.1" } @@ -13941,6 +14061,12 @@ "node": ">= 8" } }, + "node_modules/known-css-properties": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", + "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", + "dev": true + }, "node_modules/language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -14076,6 +14202,12 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "dev": true + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -14185,6 +14317,16 @@ "tmpl": "1.0.5" } }, + "node_modules/mathml-tag-names": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -14209,6 +14351,18 @@ "node": ">= 4.0.0" } }, + "node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -14653,9 +14807,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "funding": [ { "type": "github", @@ -15970,9 +16124,9 @@ } }, "node_modules/postcss": { - "version": "8.4.29", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", - "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "funding": [ { "type": "opencollective", @@ -15988,9 +16142,9 @@ } ], "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -17061,6 +17215,38 @@ "postcss": "^8.0.3" } }, + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", + "dev": true + }, + "node_modules/postcss-safe-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, "node_modules/postcss-selector-not": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz", @@ -17080,9 +17266,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -18940,6 +19126,56 @@ "node": ">=8" } }, + "node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/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==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/slice-ansi/node_modules/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==", + "dev": true + }, "node_modules/smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -19002,9 +19238,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -19565,6 +19801,243 @@ "postcss": "^8.2.15" } }, + "node_modules/stylelint": { + "version": "16.2.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", + "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", + "dev": true, + "dependencies": { + "@csstools/css-parser-algorithms": "^2.5.0", + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/media-query-list-parser": "^2.1.7", + "@csstools/selector-specificity": "^3.0.1", + "balanced-match": "^2.0.0", + "colord": "^2.9.3", + "cosmiconfig": "^9.0.0", + "css-functions-list": "^3.2.1", + "css-tree": "^2.3.1", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "fastest-levenshtein": "^1.0.16", + "file-entry-cache": "^8.0.0", + "global-modules": "^2.0.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "html-tags": "^3.3.1", + "ignore": "^5.3.0", + "imurmurhash": "^0.1.4", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.29.0", + "mathml-tag-names": "^2.1.3", + "meow": "^13.1.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.33", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.0.15", + "postcss-value-parser": "^4.2.0", + "resolve-from": "^5.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^7.1.0", + "supports-hyperlinks": "^3.0.0", + "svg-tags": "^1.0.0", + "table": "^6.8.1", + "write-file-atomic": "^5.0.1" + }, + "bin": { + "stylelint": "bin/stylelint.mjs" + }, + "engines": { + "node": ">=18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + } + }, + "node_modules/stylelint-config-recommended": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", + "dev": true, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.0" + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^14.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint/node_modules/@csstools/selector-specificity": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", + "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "node_modules/stylelint/node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/stylelint/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/stylelint/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/stylelint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, + "node_modules/stylelint/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/stylelint/node_modules/write-file-atomic": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -19696,6 +20169,12 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -19801,6 +20280,56 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/table": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", + "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.1", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/table/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 545e8c3a..4bcaa477 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -36,6 +36,8 @@ "eject": "react-scripts eject", "lint": "eslint --ext .ts,.tsx .", "fix": "eslint --fix .", + "stylelint": "stylelint \"**/*.css\"", + "stylelint:fix": "stylelint \"**/*.css\" --fix", "ncu": "ncu -u -x typescript,date-fns" }, "eslintConfig": { @@ -59,6 +61,8 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint-config-airbnb": "^19.0.4", - "npm-check-updates": "^16.14.17" + "npm-check-updates": "^16.14.17", + "stylelint": "^16.2.1", + "stylelint-config-standard": "^36.0.0" } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 682d5789..b8237672 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -22,7 +22,7 @@ const NoMatch = lazy(() => import('./pages/NoMatch')) const App = () => ( -
+
}> } /> diff --git a/frontend/src/assets/css/about.css b/frontend/src/assets/css/about.css index e69de29b..878cce6f 100644 --- a/frontend/src/assets/css/about.css +++ b/frontend/src/assets/css/about.css @@ -0,0 +1,3 @@ +.about { + padding: 15px; +} diff --git a/frontend/src/assets/css/accordion.css b/frontend/src/assets/css/accordion.css index 7cda0bdc..0e70c06a 100644 --- a/frontend/src/assets/css/accordion.css +++ b/frontend/src/assets/css/accordion.css @@ -14,7 +14,7 @@ div.accordion-container span.accordion { display: inline-block; width: 100%; text-align: center; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-weight: 400; font-size: 13px; line-height: 2em; @@ -24,10 +24,7 @@ div.accordion-container span.accordion { div.accordion-container span.accordion-active { border-bottom: 1px solid #dadada; - border-top-right-radius: 5px; - border-top-left-radius: 5px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-radius: 5px 5px 0 0; } div.accordion-container span.accordion-active, @@ -35,7 +32,7 @@ div.accordion-container span.accordion:hover { background: #fafafa; } -div.accordion-container span.accordion:after { +div.accordion-container span.accordion::after { content: ''; border-top: 5px solid transparent; border-left: 5px solid #000; @@ -45,7 +42,7 @@ div.accordion-container span.accordion:after { margin: 7px 7px 0; } -div.accordion-container span.accordion-active:after { +div.accordion-container span.accordion-active::after { transform: rotate(90deg); } diff --git a/frontend/src/assets/css/activate.css b/frontend/src/assets/css/activate.css index 8d0edb46..e5f02dc7 100644 --- a/frontend/src/assets/css/activate.css +++ b/frontend/src/assets/css/activate.css @@ -52,7 +52,7 @@ div.resend { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .activate-form { margin-top: 40px; width: 330px; @@ -70,7 +70,7 @@ div.resend { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .activate-form { margin-top: 40px; width: 450px; diff --git a/frontend/src/assets/css/agency-badge.css b/frontend/src/assets/css/agency-badge.css index 1e6a6898..11053f3b 100644 --- a/frontend/src/assets/css/agency-badge.css +++ b/frontend/src/assets/css/agency-badge.css @@ -2,7 +2,7 @@ div.agency-badge { display: flex; align-items: center; margin-top: 5px; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 1em; line-height: 1em; max-width: 300px; diff --git a/frontend/src/assets/css/agency-list.css b/frontend/src/assets/css/agency-list.css index ab54d5b7..6bf0a073 100644 --- a/frontend/src/assets/css/agency-list.css +++ b/frontend/src/assets/css/agency-list.css @@ -68,7 +68,7 @@ section.agency-list article .agency-actions button { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { section.agency-list article { margin-left: calc(50% - 300px); width: 600px; diff --git a/frontend/src/assets/css/booking-list.css b/frontend/src/assets/css/booking-list.css index 49f36cbd..fab0c5de 100644 --- a/frontend/src/assets/css/booking-list.css +++ b/frontend/src/assets/css/booking-list.css @@ -87,7 +87,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value { display: table-row; line-height: 25px; font-size: 13px; - color: rgba(0, 0, 0, 0.47); + color: rgb(0 0 0 / 47%); } div.bs-list div.booking-details div.booking-detail span.booking-detail-title { @@ -95,7 +95,7 @@ div.bs-list div.booking-details div.booking-detail span.booking-detail-title { font-weight: 700; width: 250px; font-size: 15px; - color: rgba(0, 0, 0, 0.87); + color: rgb(0 0 0 / 87%); } div.bs-list div.booking-details div.booking-detail div.booking-detail-value div.property-agency { @@ -112,7 +112,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value div. } div.bs-list div.booking-details div.booking-detail div.booking-detail-value span.property-agency-name { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 0.9em; line-height: 1em; white-space: nowrap; @@ -122,7 +122,7 @@ div.bs-list div.booking-details div.booking-detail div.booking-detail-value span div.bs-list div.booking-details div.booking-detail div.booking-price { font-size: 17px; font-weight: 700; - color: rgba(0, 0, 0, 0.87); + color: rgb(0 0 0 / 87%); } div.bs-list div.booking-details div.bs { @@ -191,9 +191,8 @@ div.bs-list div.extras div.extra span.extra-title { } div.bs-list div.extras div.extra span.extra-text { - font-size: 13px; font-size: 12px; - color: rgba(0, 0, 0, 0.47); + color: rgb(0 0 0 / 47%); } div.bs-list div.bs-buttons { @@ -207,7 +206,7 @@ div.bs-list div.bs-buttons button { margin-bottom: 5px; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.bs-list { max-width: 480px; } @@ -217,13 +216,10 @@ div.bs-list div.bs-buttons button { } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.bs-list { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; overflow-y: auto; } diff --git a/frontend/src/assets/css/booking.css b/frontend/src/assets/css/booking.css index 5ecf90b1..36f98048 100644 --- a/frontend/src/assets/css/booking.css +++ b/frontend/src/assets/css/booking.css @@ -36,7 +36,7 @@ div.booking div.col-2 div.col-2-header span.price-day { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.booking div.col-1 { padding: 20px; background: #fefefe; @@ -48,7 +48,7 @@ div.booking div.col-2 div.col-2-header span.price-day { } } -@media only screen and (max-width: 1270px) { +@media only screen and (width <= 1270px) { div.booking div.col-2 .property { display: none; } @@ -56,7 +56,7 @@ div.booking div.col-2 div.col-2-header span.price-day { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.booking div.col-1 { background: #fefefe; border-right: #eee solid 1px; diff --git a/frontend/src/assets/css/bookings.css b/frontend/src/assets/css/bookings.css index 41cacbc4..76a9de80 100644 --- a/frontend/src/assets/css/bookings.css +++ b/frontend/src/assets/css/bookings.css @@ -10,7 +10,7 @@ div.bookings { /* Device width is lower than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.bookings { top: 56px; overflow-y: auto; @@ -56,7 +56,7 @@ div.bookings { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.bookings { top: 64px; } @@ -98,9 +98,6 @@ div.bookings { div.bookings div.col-2 { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 300px; + inset: 0 0 0 300px; } } diff --git a/frontend/src/assets/css/change-password.css b/frontend/src/assets/css/change-password.css index cbd5d4fb..11b8f790 100644 --- a/frontend/src/assets/css/change-password.css +++ b/frontend/src/assets/css/change-password.css @@ -14,7 +14,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .password-reset-form { margin-top: 40px; width: 330px; @@ -25,7 +25,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .password-reset-form { margin-top: 40px; width: 450px; diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css index dbac035e..5e597134 100644 --- a/frontend/src/assets/css/checkout.css +++ b/frontend/src/assets/css/checkout.css @@ -39,11 +39,11 @@ div.booking div.payment-options { div.booking div.payment-options span.payment-info { margin-left: 10px; - color: rgba(0, 0, 0, 0.55); + color: rgb(0 0 0 / 55%); font-size: 13px; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.booking div.payment-options span.payment-button { display: flex; flex-direction: column; @@ -63,7 +63,7 @@ div.booking div.booking-options span.booking-option-label::after { } div.booking div.booking-options span.booking-option-value { - color: rgba(0, 0, 0, 0.55); + color: rgb(0 0 0 / 55%); } div.booking div.booking-details { @@ -82,7 +82,7 @@ div.booking div.booking-details div.booking-detail div.booking-detail-value { } div.booking div.booking-details div.booking-detail div.booking-detail-value { - color: rgba(0, 0, 0, 0.55); + color: rgb(0 0 0 / 55%); } div.booking div.booking-details div.booking-detail span.booking-detail-title { @@ -96,7 +96,7 @@ div.booking div.booking-details div.booking-detail div.booking-detail-value div. } div.booking div.booking-details div.booking-detail div.booking-detail-value span.property-agency-name { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); font-size: 0.9em; line-height: 1em; white-space: nowrap; @@ -128,6 +128,18 @@ div.booking div.payment { border: 1px solid #d9d8d9; } +div.booking div.payment div.secure-payment-info { + display: flex; + justify-content: center; + color: #1c8901; + font-size: 13px; + margin-top: 5px; +} + +div.booking div.payment div.secure-payment-info .secure-payment-lock { + height: 16px; +} + div.booking div.payment div.cost { color: #1c8901; font-size: 20px; @@ -179,18 +191,6 @@ div.booking div.payment div.secure-payment-logo { margin-bottom: 5px; } -div.booking div.payment div.secure-payment-info { - display: flex; - justify-content: center; - color: #1c8901; - font-size: 13px; - margin-top: 5px; -} - -div.booking div.payment div.secure-payment-info .secure-payment-lock { - height: 16px; -} - div.booking div.booking-buttons { display: inline-block; width: 100%; @@ -227,7 +227,7 @@ div.booking .btn-cancel { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.booking .booking-form { padding: 30px; margin: 10px; @@ -251,7 +251,7 @@ div.booking .btn-cancel { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.booking .booking-form { margin: 45px 0 20px calc(50% - 350px); width: 700px; diff --git a/frontend/src/assets/css/common.css b/frontend/src/assets/css/common.css index 6b7c6642..dcc739f7 100644 --- a/frontend/src/assets/css/common.css +++ b/frontend/src/assets/css/common.css @@ -5,12 +5,12 @@ .btn-primary { background-color: #0D63C9 !important; - color: #ffffff !important; + color: #fff !important; } .btn-secondary { - background-color: #999999 !important; - color: #ffffff !important; + background-color: #999 !important; + color: #fff !important; } .btn-primary:hover, @@ -42,7 +42,7 @@ margin: 0 10px !important; } -.required:after { +.required::after { content: ' *'; } @@ -192,12 +192,12 @@ } .d-adornment-icon { - color: rgba(0, 0, 0, 0.54); + color: rgb(0 0 0 / 54%); width: 20px !important; height: 20px !important; } -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.content { margin: 0; padding: 0; @@ -227,7 +227,7 @@ } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.content { margin: 0; padding: 0; diff --git a/frontend/src/assets/css/contact.css b/frontend/src/assets/css/contact.css index e69de29b..08a46e08 100644 --- a/frontend/src/assets/css/contact.css +++ b/frontend/src/assets/css/contact.css @@ -0,0 +1,3 @@ +.contact { + padding: 15px; +} diff --git a/frontend/src/assets/css/create-reservation.css b/frontend/src/assets/css/create-reservation.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/assets/css/forgot-password.css b/frontend/src/assets/css/forgot-password.css index 87d91b23..9de82f00 100644 --- a/frontend/src/assets/css/forgot-password.css +++ b/frontend/src/assets/css/forgot-password.css @@ -18,7 +18,7 @@ div.forgot-password h1.forgot-password-title { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .forgot-password-form { margin-top: 40px; width: 330px; @@ -28,7 +28,7 @@ div.forgot-password h1.forgot-password-title { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .forgot-password-form { margin-top: 40px; width: 450px; diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css index d3b76242..d0938b79 100644 --- a/frontend/src/assets/css/header.css +++ b/frontend/src/assets/css/header.css @@ -19,7 +19,7 @@ /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .header { min-height: 64px; } @@ -27,7 +27,7 @@ /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .header { min-height: 56px; } diff --git a/frontend/src/assets/css/home.css b/frontend/src/assets/css/home.css index 6562f3de..f07dd4f6 100644 --- a/frontend/src/assets/css/home.css +++ b/frontend/src/assets/css/home.css @@ -1,15 +1,11 @@ div.home { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } div.home footer { @@ -56,7 +52,7 @@ div.home div.home-content span.home-logo-main { line-height: 135px; } -div.home div.home-content span.home-logo-main:after { +div.home div.home-content span.home-logo-main::after { content: "Movin' In"; } @@ -66,7 +62,7 @@ div.home div.home-content span.home-logo-registered { font-weight: 600; } -div.home div.home-content span.home-logo-registered:after { +div.home div.home-content span.home-logo-registered::after { content: '®'; } @@ -102,7 +98,7 @@ div.home div.home-content div.home-search .btn-search:hover { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.home div.home-content { width: 100%; margin: 145px 0 35px; @@ -143,7 +139,7 @@ div.home div.home-content div.home-search .btn-search:hover { /* Device width is between 500px and 960px */ -@media only screen and (min-width: 500px) and (max-width: 960px) { +@media only screen and (width >= 500px) and (width <= 960px) { div.home footer div.secure-payment { bottom: 0; } @@ -151,7 +147,7 @@ div.home div.home-content div.home-search .btn-search:hover { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.home div.home-content { width: 980px; height: 100%; diff --git a/frontend/src/assets/css/image-viewer.css b/frontend/src/assets/css/image-viewer.css index b73462c7..6793304c 100644 --- a/frontend/src/assets/css/image-viewer.css +++ b/frontend/src/assets/css/image-viewer.css @@ -8,7 +8,7 @@ top: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, .5); + background-color: rgb(0 0 0 / 50%); box-sizing: border-box; } @@ -42,8 +42,6 @@ width: auto; height: auto; user-select: none; - -moz-user-select: none; - -webkit-user-select: none; } .close { @@ -82,8 +80,6 @@ opacity: .6; padding: 0 15px; user-select: none; - -moz-user-select: none; - -webkit-user-select: none; } .navigation:hover { @@ -104,13 +100,13 @@ right: 0; } -@media (max-width: 900px) { +@media (width <= 900px) { .wrapper { padding: 0; } } -div.thumbnailsContainer { +div.thumbnails-container { position: absolute; right: 0; bottom: 0; diff --git a/frontend/src/assets/css/index.css b/frontend/src/assets/css/index.css index 3159369c..9ea30172 100644 --- a/frontend/src/assets/css/index.css +++ b/frontend/src/assets/css/index.css @@ -1,4 +1,4 @@ -.App { +.app { display: flex; flex-direction: column; } diff --git a/frontend/src/assets/css/multiple-select.css b/frontend/src/assets/css/multiple-select.css index 39324c28..ce571d33 100644 --- a/frontend/src/assets/css/multiple-select.css +++ b/frontend/src/assets/css/multiple-select.css @@ -4,7 +4,7 @@ li.ms-option { width: 100%; } -.ms-option .Mui-focused, +/* .ms-option .Mui-focused, */ .ms-option:focus, .ms-option:focus-visible, .ms-option:focus-within { diff --git a/frontend/src/assets/css/notifications.css b/frontend/src/assets/css/notifications.css index e93e3714..e8f9d1c5 100644 --- a/frontend/src/assets/css/notifications.css +++ b/frontend/src/assets/css/notifications.css @@ -8,13 +8,13 @@ div.notifications { align-items: center; } -@media only screen and (max-width: 960px) { +@media only screen and (width <=960px) { div.notifications { top: 56px; } } -@media only screen and (min-width: 960px) { +@media only screen and (width >=960px) { div.notifications { top: 64px; } @@ -49,12 +49,40 @@ div.notifications div.header-container div.header { max-width: 680px; } -div.notifications div.notifications-list { +div.notifications div.footer { position: absolute; - top: 55px; right: 0; - bottom: 55px; + bottom: 0; left: 0; + height: 54px; + display: flex; + flex-direction: row; + justify-content: flex-end; + border-top: 1px solid #ddd; + padding: 5px 10px 5px 0; +} + +div.notifications div.footer div.row-count { + font-size: 14px; + display: flex; + flex-direction: row; + align-items: center; + margin-right: 7px; +} + +div.notifications div.footer div.actions { + display: flex; + flex-direction: row; +} + +div.notifications div.footer div.actions .icon { + font-size: 16px; + width: 24px; +} + +div.notifications div.notifications-list { + position: absolute; + inset: 55px 0; display: flex; flex-direction: column; align-items: center; @@ -110,34 +138,3 @@ div.notifications div.notifications-list div.notification-container div.notifica flex-direction: row; margin-left: 5px; } - -div.notifications div.footer { - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 54px; - display: flex; - flex-direction: row; - justify-content: flex-end; - border-top: 1px solid #ddd; - padding: 5px 10px 5px 0; -} - -div.notifications div.footer div.row-count { - font-size: 14px; - display: flex; - flex-direction: row; - align-items: center; - margin-right: 7px; -} - -div.notifications div.footer div.actions { - display: flex; - flex-direction: row; -} - -div.notifications div.footer div.actions .icon { - font-size: 16px; - width: 24px; -} diff --git a/frontend/src/assets/css/profile.css b/frontend/src/assets/css/profile.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/assets/css/properties.css b/frontend/src/assets/css/properties.css index 8f177509..c8d70aac 100644 --- a/frontend/src/assets/css/properties.css +++ b/frontend/src/assets/css/properties.css @@ -15,7 +15,7 @@ div.properties div.col-1 div.info-box { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.properties { flex-direction: column; } @@ -61,7 +61,7 @@ div.properties div.col-1 div.info-box { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.properties { flex-direction: row; } diff --git a/frontend/src/assets/css/property-filter.css b/frontend/src/assets/css/property-filter.css index 72a1f8e1..b5a1069c 100644 --- a/frontend/src/assets/css/property-filter.css +++ b/frontend/src/assets/css/property-filter.css @@ -22,7 +22,7 @@ div.property-filter .btn-search { } div.property-filter .chk-same-location { - color: rgba(0, 0, 0, 0.7); + color: rgb(0 0 0 / 70%); font-weight: 400; line-height: 1.4em; font-size: 0.9em; diff --git a/frontend/src/assets/css/property-info.css b/frontend/src/assets/css/property-info.css index 6dc872a7..75d8397a 100644 --- a/frontend/src/assets/css/property-info.css +++ b/frontend/src/assets/css/property-info.css @@ -53,7 +53,7 @@ div.property-info ul.extras-list div.property-info-list-item { } div.property-info ul.extras-list .extra-info { - color: rgba(0, 0, 0, 0.35); + color: rgb(0 0 0 / 35%); } div.property-info ul.extras-list span.property-info-list-text { diff --git a/frontend/src/assets/css/property-list.css b/frontend/src/assets/css/property-list.css index 7360604d..28cf6621 100644 --- a/frontend/src/assets/css/property-list.css +++ b/frontend/src/assets/css/property-list.css @@ -112,7 +112,7 @@ section.property-list article div.right-panel div.action { /* Device width is between 500px and 960px */ -@media only screen and (min-width: 500px) and (max-width: 960px) { +@media only screen and (width >= 500px) and (width <= 960px) { section.property-list { max-width: 480px; } @@ -120,7 +120,7 @@ section.property-list article div.right-panel div.action { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { section.property-list article { position: relative; background: #fff; diff --git a/frontend/src/assets/css/property.css b/frontend/src/assets/css/property.css index 694eca1a..5b49d00c 100644 --- a/frontend/src/assets/css/property.css +++ b/frontend/src/assets/css/property.css @@ -1,11 +1,11 @@ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.main div.property { display: flex; flex-direction: column; } } -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.main { max-width: 872px; margin-right: auto; @@ -54,9 +54,8 @@ div.main div.property img.main-image { div.main div.property div.images { display: flex; - flex-direction: row; + flex-flow: row wrap; overflow-x: auto; - flex-wrap: wrap; } div.main div.property div.images div.image { diff --git a/frontend/src/assets/css/reset-password.css b/frontend/src/assets/css/reset-password.css index 966f9ced..71c56501 100644 --- a/frontend/src/assets/css/reset-password.css +++ b/frontend/src/assets/css/reset-password.css @@ -26,7 +26,7 @@ div.resend { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { .reset-password-form { margin-top: 40px; width: 330px; @@ -37,7 +37,7 @@ div.resend { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { .reset-password-form { margin-top: 40px; width: 450px; diff --git a/frontend/src/assets/css/settings.css b/frontend/src/assets/css/settings.css index 4e96ec36..d4befaf7 100644 --- a/frontend/src/assets/css/settings.css +++ b/frontend/src/assets/css/settings.css @@ -15,7 +15,7 @@ div.settings .settings-net-wrapper { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.settings .settings-form { margin-top: 45px !important; margin-left: calc(50% - 180px) !important; @@ -39,7 +39,7 @@ div.settings .settings-net-wrapper { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.settings .settings-form { margin-top: 45px !important; margin-left: calc(50% - 275px) !important; diff --git a/frontend/src/assets/css/signin.css b/frontend/src/assets/css/signin.css index fc5afa96..d333a6fa 100644 --- a/frontend/src/assets/css/signin.css +++ b/frontend/src/assets/css/signin.css @@ -30,7 +30,7 @@ div.signin div.stay-connected input[type='checkbox'] { div.signin div.stay-connected label { cursor: pointer; - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); user-select: none; } @@ -40,7 +40,7 @@ div.signin div.forgot-password { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.signin .signin-form { align-items: center; justify-content: center; @@ -50,7 +50,7 @@ div.signin div.forgot-password { margin-top: 45px; margin-left: calc(50% - 175px); margin-bottom: 50px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgb(0 0 0 / 12%); padding: 15px; } @@ -68,7 +68,7 @@ div.signin div.forgot-password { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.signin .signin-form { align-items: center; justify-content: center; @@ -78,7 +78,7 @@ div.signin div.forgot-password { margin-top: 45px; margin-left: calc(50% - 190px); margin-bottom: 50px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgb(0 0 0 / 12%); padding: 15px; } } diff --git a/frontend/src/assets/css/signup.css b/frontend/src/assets/css/signup.css index ea1f2a30..aae3e467 100644 --- a/frontend/src/assets/css/signup.css +++ b/frontend/src/assets/css/signup.css @@ -11,7 +11,7 @@ div.signup div.signup-tos { /* Device width is less than or equal to 960px */ -@media only screen and (max-width: 960px) { +@media only screen and (width <= 960px) { div.signup .signup-form { margin: 45px 0 20px calc(50% - 175px); width: 350px; @@ -26,7 +26,7 @@ div.signup div.signup-tos { /* Device width is greater than or equal to 960px */ -@media only screen and (min-width: 960px) { +@media only screen and (width >= 960px) { div.signup .signup-form { margin: 45px 0 20px calc(50% - 275px); width: 550px; diff --git a/frontend/src/assets/css/tos.css b/frontend/src/assets/css/tos.css index e69de29b..eaf26a82 100644 --- a/frontend/src/assets/css/tos.css +++ b/frontend/src/assets/css/tos.css @@ -0,0 +1,3 @@ +.tos { + padding: 15px; +} diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx index ebc1246c..e50cbecf 100644 --- a/frontend/src/components/ImageViewer.tsx +++ b/frontend/src/components/ImageViewer.tsx @@ -195,7 +195,7 @@ const ImageViewer = ({ { src.length > 0 && ( -
+
{src.map((srcItem, index) => (
{ - const onLoad = () => {} + const onLoad = () => { } return ( - About! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) } diff --git a/frontend/src/pages/Contact.tsx b/frontend/src/pages/Contact.tsx index 17288a66..19bf3624 100644 --- a/frontend/src/pages/Contact.tsx +++ b/frontend/src/pages/Contact.tsx @@ -4,11 +4,16 @@ import Master from '../components/Master' import '../assets/css/contact.css' const Contact = () => { - const onLoad = () => {} + const onLoad = () => { } return ( - Contact! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) } diff --git a/frontend/src/pages/ToS.tsx b/frontend/src/pages/ToS.tsx index ceed0b2d..43c61215 100644 --- a/frontend/src/pages/ToS.tsx +++ b/frontend/src/pages/ToS.tsx @@ -4,11 +4,16 @@ import Master from '../components/Master' import '../assets/css/tos.css' const ToS = () => { - const onLoad = () => {} + const onLoad = () => { } return ( - ToS! +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
) }