diff --git a/package-lock.json b/package-lock.json index bef2488..f1b00d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@fontsource/roboto": "^5.2.9", "@react-keycloak/core": "^3.2.0", "@react-keycloak/web": "^3.4.0", + "@reduxjs/toolkit": "^2.12.0", "@types/react-beforeunload": "^2.1.0", "@types/react-redux": "~7.1.16", "@types/redux-mock-store": "~1.0.2", @@ -34,7 +35,7 @@ "react-i18next": "^15.0.2", "react-intersection-observer": "^10.0.2", "react-leaflet": "^4.2.1", - "react-leaflet-cluster": "^2.1.0", + "react-leaflet-cluster": "^3.1.1", "react-markdown": "^9.0.1", "react-redux": "~7.2.3", "react-router-dom": "^7.1.3", @@ -43,7 +44,6 @@ "redux-devtools-extension": "~2.13.9", "redux-mock-store": "~1.5.4", "redux-persist": "^6.0.0", - "redux-thunk": "^2.3.0", "ua-parser-js": "^0.7.33", "underscore": "^1.13.8" }, @@ -65,7 +65,7 @@ "eslint-plugin-import": "^2.31.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-react-hooks": "5.1.0", + "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.4.4", "less": "^4.9.0", "prettier": "^3.0.3", @@ -762,6 +762,47 @@ "react-dom": "^18.0.0" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz", + "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==", + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.0.0", + "@standard-schema/utils": "^0.3.0", + "immer": "^11.0.0", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/@rolldown/binding-android-arm-eabi": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.5.tgz", @@ -1076,7 +1117,12 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", - "dev": true, + "license": "MIT" + }, + "node_modules/@standard-schema/utils": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", + "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==", "license": "MIT" }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { @@ -3750,16 +3796,23 @@ } }, "node_modules/eslint-plugin-react-hooks": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz", - "integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz", + "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==", "dev": true, "license": "MIT", + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "hermes-parser": "^0.25.1", + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" + }, "engines": { - "node": ">=10" + "node": ">=18" }, "peerDependencies": { - "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0" } }, "node_modules/eslint-plugin-react-refresh": { @@ -4346,6 +4399,23 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hermes-estree": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", + "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==", + "dev": true, + "license": "MIT" + }, + "node_modules/hermes-parser": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz", + "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hermes-estree": "0.25.1" + } + }, "node_modules/history": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", @@ -4439,6 +4509,16 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "11.1.18", + "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.18.tgz", + "integrity": "sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -7627,17 +7707,17 @@ } }, "node_modules/react-leaflet-cluster": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.1.0.tgz", - "integrity": "sha512-16X7XQpRThQFC4PH4OpXHimGg19ouWmjxjtpxOeBKpvERSvIRqTx7fvhTwkEPNMFTQ8zTfddz6fRTUmUEQul7g==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-3.1.1.tgz", + "integrity": "sha512-g39QohKNrmIwHNlL0KTv+a9PYYWDtcRAsnHHytJyRhIgjxGxs4/SXe/Zr4kP8IZoEzxbqCMkJqUsFBEZJqKp2g==", "license": "SEE LICENSE IN ", "dependencies": { "leaflet.markercluster": "^1.5.3" }, "peerDependencies": { "leaflet": "^1.8.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0", "react-leaflet": "^4.0.0" } }, @@ -7802,15 +7882,6 @@ "redux": ">4.0.0" } }, - "node_modules/redux-thunk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", - "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", - "license": "MIT", - "peerDependencies": { - "redux": "^4" - } - }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -7898,6 +7969,12 @@ "node": ">=0.10.5" } }, + "node_modules/reselect": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz", + "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==", + "license": "MIT" + }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -9352,6 +9429,29 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zod": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz", + "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-validation-error": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz", + "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.25.0 || ^4.0.0" + } + }, "node_modules/zwitch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", diff --git a/package.json b/package.json index c0d72d7..e179513 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@fontsource/roboto": "^5.2.9", "@react-keycloak/core": "^3.2.0", "@react-keycloak/web": "^3.4.0", + "@reduxjs/toolkit": "^2.12.0", "@types/react-beforeunload": "^2.1.0", "@types/react-redux": "~7.1.16", "@types/redux-mock-store": "~1.0.2", @@ -30,7 +31,7 @@ "react-i18next": "^15.0.2", "react-intersection-observer": "^10.0.2", "react-leaflet": "^4.2.1", - "react-leaflet-cluster": "^2.1.0", + "react-leaflet-cluster": "^3.1.1", "react-markdown": "^9.0.1", "react-redux": "~7.2.3", "react-router-dom": "^7.1.3", @@ -39,7 +40,6 @@ "redux-devtools-extension": "~2.13.9", "redux-mock-store": "~1.5.4", "redux-persist": "^6.0.0", - "redux-thunk": "^2.3.0", "ua-parser-js": "^0.7.33", "underscore": "^1.13.8" }, @@ -69,7 +69,7 @@ "eslint-plugin-import": "^2.31.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-react-hooks": "5.1.0", + "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.4.4", "less": "^4.9.0", "prettier": "^3.0.3", diff --git a/src/assets/style/variables.less b/src/assets/style/variables.less index f483205..45232ca 100644 --- a/src/assets/style/variables.less +++ b/src/assets/style/variables.less @@ -5,6 +5,14 @@ --color-light-black: #1b1b1b; --color-gray: #888888; --color-light-gray: #d3d3d3; + --color-input-background: #b9b9b9; + --color-input-focus-background: #6a6a6a; + --color-input-placeholder: #555555; + --color-search-input-placeholder: #aaaaaa; + --color-medium-gray: #808080; + --color-disabled-text: #6f6f6f; + --color-secondary-text: #dddddd; + --color-switch-track: #1f1f1f; --color-dark-gray: #2e2e2e; --color-todo: #ffe381; diff --git a/src/components/Issues-list/issues.less b/src/components/Issues-list/issues.less index 1dd569d..cea1965 100644 --- a/src/components/Issues-list/issues.less +++ b/src/components/Issues-list/issues.less @@ -5,14 +5,14 @@ } .issue-card { - background: rgba(var(--color-dark-gray), 0.9); + background: color-mix(in srgb, var(--color-dark-gray) 90%, transparent); border-radius: 4px; padding: 10px 20px; font-size: 14px; line-height: 2.5; &.issue-error { - color: var(--color-error); + color: var(--color-missing); } &.issue-warning { diff --git a/src/components/banner-card/BannerPicture.tsx b/src/components/banner-card/BannerPicture.tsx index 0d8c4c2..9d6410e 100644 --- a/src/components/banner-card/BannerPicture.tsx +++ b/src/components/banner-card/BannerPicture.tsx @@ -1,7 +1,7 @@ import React, { FC, useEffect, useRef, useState } from 'react' import { Button, Modal } from 'antd' import { useInView } from 'react-intersection-observer' -import Scrollbars from 'react-custom-scrollbars-2' +import { Scrollbars } from 'react-custom-scrollbars-2' import { Trans } from 'react-i18next' import { useLoaded } from '../../hooks/Loaded' diff --git a/src/components/banner-card/banner-card.less b/src/components/banner-card/banner-card.less index 47743c5..9ae9943 100644 --- a/src/components/banner-card/banner-card.less +++ b/src/components/banner-card/banner-card.less @@ -27,7 +27,7 @@ width: 60px; height: 60px; border-radius: 50%; - background-color: var(--color-gray); + background-color: var(--color-medium-gray); margin-right: 8px; margin-top: 8px; } @@ -48,7 +48,7 @@ &-todo { &:after { .list-style-background(); - background: rgba(var(--color-todo), 0.05); + background: color-mix(in srgb, var(--color-todo) 5%, transparent); border: 1px solid var(--color-todo); } } @@ -56,7 +56,7 @@ &-done { &:after { .list-style-background(); - background: rgba(var(--color-done), 0.05); + background: color-mix(in srgb, var(--color-done) 5%, transparent); border: 1px solid var(--color-done); } } @@ -64,7 +64,7 @@ &-blacklist { &:after { .list-style-background(); - background: rgba(var(--color-blacklist), 0.05); + background: color-mix(in srgb, var(--color-blacklist) 5%, transparent); border: 1px solid var(--color-blacklist); } } @@ -154,7 +154,7 @@ .offline-overlay { font-size: 24px; line-height: 18px; - color: var(--color-light-gray); + color: var(--color-secondary-text); position: absolute; left: -20px; @@ -195,7 +195,7 @@ .banner-info-item { font-size: 14px; line-height: 18px; - color: var(--color-light-gray); + color: var(--color-secondary-text); margin-top: 4px; display: flex; diff --git a/src/components/banner-list-type-navigation/banner-list-type-navigation.less b/src/components/banner-list-type-navigation/banner-list-type-navigation.less index 83eb400..41d6253 100644 --- a/src/components/banner-list-type-navigation/banner-list-type-navigation.less +++ b/src/components/banner-list-type-navigation/banner-list-type-navigation.less @@ -26,6 +26,6 @@ .inactive { font-size: 28px; - color: var(--color-light-gray); + color: var(--color-secondary-text); } } diff --git a/src/components/banners-map/BannersMap.tsx b/src/components/banners-map/BannersMap.tsx index 344bd33..fdef6c1 100644 --- a/src/components/banners-map/BannersMap.tsx +++ b/src/components/banners-map/BannersMap.tsx @@ -23,6 +23,22 @@ import './banners-map.less' import 'leaflet/dist/leaflet.css' import i18n from '../../i18n' +const RefSetup: React.FC<{ + onMapReady: (map: LeafletMap) => void + onMapDraggedOrZoomed: () => void + onMapClicked: () => void +}> = ({ onMapReady, onMapDraggedOrZoomed, onMapClicked }) => { + const map = useMap() + onMapReady(map) + map.addEventListener('dragend', onMapDraggedOrZoomed) + map.addEventListener('zoomend', onMapDraggedOrZoomed) + map.addEventListener('click', onMapClicked) + useEffect(() => { + onMapDraggedOrZoomed() + }) + return null +} + class BannersMap extends React.Component { private map: LeafletMap | undefined = undefined @@ -145,18 +161,6 @@ class BannersMap extends React.Component { } } - RefSetup: React.FC = () => { - const map = useMap() - this.map = map - map.addEventListener('dragend', this.onMapDraggedOrZoomed) - map.addEventListener('zoomend', this.onMapDraggedOrZoomed) - map.addEventListener('click', this.onMapClicked) - useEffect(() => { - this.onMapDraggedOrZoomed() - }) - return null - } - onSelectBanner = (banner: Banner) => { const { onSelectBanner } = this.props onSelectBanner(banner) @@ -248,7 +252,13 @@ class BannersMap extends React.Component { return ( - + { + this.map = map + }} + onMapDraggedOrZoomed={this.onMapDraggedOrZoomed} + onMapClicked={this.onMapClicked} + /> diff --git a/src/components/loading-overlay/LoadingOverlay.tsx b/src/components/loading-overlay/LoadingOverlay.tsx index 95f463f..d3138cc 100644 --- a/src/components/loading-overlay/LoadingOverlay.tsx +++ b/src/components/loading-overlay/LoadingOverlay.tsx @@ -6,6 +6,7 @@ import './loading-overlay.less' export const LoadingOverlay: FC = ({ active, text }) => { const ref = useRef(null) + const overlayRef = useRef(null) useEffect(() => { if (active && ref.current) ref.current.scrollTop = 0 }, [active, ref]) @@ -20,8 +21,9 @@ export const LoadingOverlay: FC = ({ active, text }) => { classNames="_loading-overlay-transition" timeout={500} unmountOnExit + nodeRef={overlayRef} > -
+
<> diff --git a/src/components/loading-overlay/loading-overlay.less b/src/components/loading-overlay/loading-overlay.less index 203f2c8..e07f5a1 100644 --- a/src/components/loading-overlay/loading-overlay.less +++ b/src/components/loading-overlay/loading-overlay.less @@ -10,7 +10,7 @@ text-align: center; font-size: 1.2em; color: var(--color-white); - background: rgba(var(--color-black), 0.7); + background: color-mix(in srgb, var(--color-black) 70%, transparent); z-index: 2000; transition: 1 500ms ease-in; } diff --git a/src/components/map-detail/MapDetail.tsx b/src/components/map-detail/MapDetail.tsx index 19e4d67..2308faf 100644 --- a/src/components/map-detail/MapDetail.tsx +++ b/src/components/map-detail/MapDetail.tsx @@ -13,6 +13,15 @@ import { MapLoadingControl } from '../map-loading-control' import { MapZoomControl } from '../map-zoom-control' import i18n from '../../i18n' +const RefSetup: React.FC<{ onMapReady: (map: Map) => void }> = ({ + onMapReady, +}) => { + const map = useMap() + onMapReady(map) + map.zoomControl.options.zoomInText = i18n!.t('map.zoomIn') + return null +} + export class MapDetail extends React.Component { mapRef: Map | undefined @@ -50,13 +59,6 @@ export class MapDetail extends React.Component { } } - RefSetup: React.FC = () => { - const map = useMap() - this.mapRef = map - map.zoomControl.options.zoomInText = i18n!.t('map.zoomIn') - return null - } - /** * Tell the map to recalculate its size. * Use if the map was resized while it was invisible @@ -90,7 +92,11 @@ export class MapDetail extends React.Component { return ( - + { + this.mapRef = map + }} + /> diff --git a/src/components/map-detail/map.less b/src/components/map-detail/map.less index 8742843..1637341 100644 --- a/src/components/map-detail/map.less +++ b/src/components/map-detail/map.less @@ -18,7 +18,7 @@ margin-left: -13px; margin-top: -13px; border-radius: 80px; - border: 2px solid rgba(var(--color-black), 0.4); + border: 2px solid color-mix(in srgb, var(--color-black) 40%, transparent); background-clip: padding-box; display: flex; align-items: center; @@ -115,7 +115,7 @@ align-items: center; background-clip: padding-box; background-color: var(--color-positive-green-light); - border: 2px solid rgba(var(--color-black), 0.4); + border: 2px solid color-mix(in srgb, var(--color-black) 40%, transparent); display: flex; font-size: 12px; font-weight: bold; diff --git a/src/components/search-input/search-input.less b/src/components/search-input/search-input.less index 27d9d0f..e0453b3 100644 --- a/src/components/search-input/search-input.less +++ b/src/components/search-input/search-input.less @@ -17,7 +17,7 @@ width: 100%; &:focus { - background: var(--color-gray); + background: var(--color-input-focus-background); outline: none; color: var(--color-white); } @@ -27,7 +27,7 @@ } &::placeholder { - color: var(--color-light-gray); + color: var(--color-search-input-placeholder); font-size: 12px; } } diff --git a/src/components/search-mission-card/search-mission-card.less b/src/components/search-mission-card/search-mission-card.less index d23d7b4..56ac2de 100644 --- a/src/components/search-mission-card/search-mission-card.less +++ b/src/components/search-mission-card/search-mission-card.less @@ -23,7 +23,7 @@ word-break: break-word; &.placeholder { - color: var(--color-gray); + color: var(--color-medium-gray); } } diff --git a/src/components/step-card/step-card.less b/src/components/step-card/step-card.less index be3e960..e2aefc5 100644 --- a/src/components/step-card/step-card.less +++ b/src/components/step-card/step-card.less @@ -24,7 +24,7 @@ .step-card-unavailable { text-decoration: line-through; - color: var(--color-gray); + color: var(--color-disabled-text); } .step-card-hidden { diff --git a/src/components/switch/switch.less b/src/components/switch/switch.less index 54813be..61bf37e 100644 --- a/src/components/switch/switch.less +++ b/src/components/switch/switch.less @@ -6,10 +6,10 @@ height: 28px; .ant-switch { - background-color: var(--color-dark-gray); + background-color: var(--color-switch-track); border-radius: 3px; border: 1px solid; - border-color: var(--color-dark-gray); + border-color: var(--color-switch-track); width: 46px; height: 26px; } @@ -18,7 +18,7 @@ border-radius: 1px; width: 16px; height: 20px; - background-color: var(--color-gray); + background-color: var(--color-medium-gray); } &.bg-switch-selected { diff --git a/src/pages/create-banner/CreateBanner.tsx b/src/pages/create-banner/CreateBanner.tsx index 99c6e9b..31496cb 100644 --- a/src/pages/create-banner/CreateBanner.tsx +++ b/src/pages/create-banner/CreateBanner.tsx @@ -5,7 +5,7 @@ import { Beforeunload } from 'react-beforeunload' import { Input, InputNumber, Button, Tooltip } from 'antd' import { Helmet } from 'react-helmet' import _ from 'underscore' -import Scrollbars from 'react-custom-scrollbars-2' +import { Scrollbars } from 'react-custom-scrollbars-2' import { Trans, withTranslation, WithTranslationProps } from 'react-i18next' import { RootState } from '../../storeTypes' diff --git a/src/pages/create-banner/create-banner.less b/src/pages/create-banner/create-banner.less index 2532197..60e8afd 100644 --- a/src/pages/create-banner/create-banner.less +++ b/src/pages/create-banner/create-banner.less @@ -110,7 +110,7 @@ input, textarea { - background-color: var(--color-gray); + background-color: var(--color-input-background); border-radius: 4px; border: none; color: var(--color-black); @@ -118,7 +118,7 @@ padding: 8px 10px; &::placeholder { - color: var(--color-light-black); + color: var(--color-input-placeholder); } } diff --git a/src/pages/map-overview/MapOverview.tsx b/src/pages/map-overview/MapOverview.tsx index 5dc8181..90aec41 100644 --- a/src/pages/map-overview/MapOverview.tsx +++ b/src/pages/map-overview/MapOverview.tsx @@ -4,7 +4,7 @@ import { RouteComponentProps, withRouter } from '../../hocs/withRouter' import { Helmet } from 'react-helmet' import { Col, Row } from 'antd' import { LatLngBounds } from 'leaflet' -import Scrollbars from 'react-custom-scrollbars-2' +import { Scrollbars } from 'react-custom-scrollbars-2' import { Trans, withTranslation, WithTranslationProps } from 'react-i18next' import { RootState } from '../../storeTypes' diff --git a/src/store.ts b/src/store.ts index 0ac8c88..623a1a9 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,7 +1,15 @@ -import { applyMiddleware, combineReducers, compose, createStore } from 'redux' -import { persistStore, persistReducer } from 'redux-persist' -import storageSession from 'redux-persist/lib/storage/session' -import thunk from 'redux-thunk' +import { combineReducers, configureStore } from '@reduxjs/toolkit' +import { + FLUSH, + PAUSE, + PERSIST, + PURGE, + REGISTER, + REHYDRATE, + persistStore, + persistReducer, +} from 'redux-persist' +import storageSession from 'redux-persist/es/storage/session' import { BannerReducer } from './features/banner' import { PlaceReducer } from './features/place' @@ -24,6 +32,13 @@ const rootReducer = combineReducers({ const persistedReducer = persistReducer(persistConfig, rootReducer) -// export default store -export const store = createStore(persistedReducer, {}, applyMiddleware(thunk)) +export const store = configureStore({ + reducer: persistedReducer, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + serializableCheck: { + ignoredActions: [FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE], + }, + }), +}) export const persistor = persistStore(store)