diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7da4f08a..ab0d574b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section.
* [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs.
* [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6.
+* [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful.
### Deprecated
* *Nothing*
diff --git a/package-lock.json b/package-lock.json
index 7add24e8..9e297dad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
"ramda": "^0.27.1",
"react": "^17.0.1",
"react-chartjs-2": "^3.0.4",
- "react-color": "^2.19.3",
+ "react-colorful": "^5.5.1",
"react-copy-to-clipboard": "^5.0.2",
"react-datepicker": "^3.6.0",
"react-dom": "^17.0.1",
@@ -2567,14 +2567,6 @@
"react": ">=0.14.0"
}
},
- "node_modules/@icons/material": {
- "version": "0.2.4",
- "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
- "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
- "peerDependencies": {
- "react": "*"
- }
- },
"node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -18642,11 +18634,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
- "node_modules/lodash-es": {
- "version": "4.17.15",
- "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
- "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
- },
"node_modules/lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -18975,11 +18962,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
- "node_modules/material-colors": {
- "version": "1.2.6",
- "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
- "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
- },
"node_modules/mathml-tag-names": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -26480,21 +26462,13 @@
"react": "^16.8.0 || ^17.0.0"
}
},
- "node_modules/react-color": {
- "version": "2.19.3",
- "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
- "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
- "dependencies": {
- "@icons/material": "^0.2.4",
- "lodash": "^4.17.15",
- "lodash-es": "^4.17.15",
- "material-colors": "^1.2.1",
- "prop-types": "^15.5.10",
- "reactcss": "^1.2.0",
- "tinycolor2": "^1.4.1"
- },
+ "node_modules/react-colorful": {
+ "version": "5.5.1",
+ "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
+ "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
"peerDependencies": {
- "react": "*"
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
}
},
"node_modules/react-copy-to-clipboard": {
@@ -26966,14 +26940,6 @@
"react-dom": ">=15.0.0"
}
},
- "node_modules/reactcss": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
- "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
- "dependencies": {
- "lodash": "^4.0.1"
- }
- },
"node_modules/reactstrap": {
"version": "8.9.0",
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
@@ -31603,14 +31569,6 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
- "node_modules/tinycolor2": {
- "version": "1.4.2",
- "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
- "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
- "engines": {
- "node": "*"
- }
- },
"node_modules/tmp": {
"version": "0.0.33",
"resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz",
@@ -36599,12 +36557,6 @@
"warning": "^4.0.3"
}
},
- "@icons/material": {
- "version": "0.2.4",
- "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
- "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
- "requires": {}
- },
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -49084,11 +49036,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
- "lodash-es": {
- "version": "4.17.15",
- "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
- "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
- },
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -49362,11 +49309,6 @@
"repeat-string": "^1.0.0"
}
},
- "material-colors": {
- "version": "1.2.6",
- "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
- "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
- },
"mathml-tag-names": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -55301,19 +55243,11 @@
"lodash": "^4.17.19"
}
},
- "react-color": {
- "version": "2.19.3",
- "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
- "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
- "requires": {
- "@icons/material": "^0.2.4",
- "lodash": "^4.17.15",
- "lodash-es": "^4.17.15",
- "material-colors": "^1.2.1",
- "prop-types": "^15.5.10",
- "reactcss": "^1.2.0",
- "tinycolor2": "^1.4.1"
- }
+ "react-colorful": {
+ "version": "5.5.1",
+ "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
+ "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
+ "requires": {}
},
"react-copy-to-clipboard": {
"version": "5.0.2",
@@ -55665,14 +55599,6 @@
"react-lifecycles-compat": "^3.0.4"
}
},
- "reactcss": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
- "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
- "requires": {
- "lodash": "^4.0.1"
- }
- },
"reactstrap": {
"version": "8.9.0",
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
@@ -59262,11 +59188,6 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
- "tinycolor2": {
- "version": "1.4.2",
- "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
- "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
- },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index 60b8c829..315670b5 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
"ramda": "^0.27.1",
"react": "^17.0.1",
"react-chartjs-2": "^3.0.4",
- "react-color": "^2.19.3",
+ "react-colorful": "^5.5.1",
"react-copy-to-clipboard": "^5.0.2",
"react-datepicker": "^3.6.0",
"react-dom": "^17.0.1",
diff --git a/src/tags/helpers/EditTagModal.scss b/src/tags/helpers/EditTagModal.scss
index 29bc4308..df8f2d19 100644
--- a/src/tags/helpers/EditTagModal.scss
+++ b/src/tags/helpers/EditTagModal.scss
@@ -5,3 +5,7 @@
.edit-tag-modal__color-icon {
color: #fff;
}
+
+.edit-tag-modal__popover.edit-tag-modal__popover {
+ border-radius: .6rem;
+}
diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx
index e70875f1..80a6d477 100644
--- a/src/tags/helpers/EditTagModal.tsx
+++ b/src/tags/helpers/EditTagModal.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
-import { ChromePicker } from 'react-color';
+import { HexColorPicker } from 'react-colorful';
import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '../../utils/helpers/hooks';
@@ -46,8 +46,15 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
-
- setColor(hex)} />
+
+
', () => {
it('changes color when changing on color picker', () => {
const wrapper = createWrapper();
- expect(wrapper.find(ChromePicker).prop('color')).toEqual('red');
- wrapper.find(ChromePicker).simulate('change', { hex: 'blue' });
- expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue');
+ expect(wrapper.find(HexColorPicker).prop('color')).toEqual('red');
+ wrapper.find(HexColorPicker).simulate('change', 'blue');
+ expect(wrapper.find(HexColorPicker).prop('color')).toEqual('blue');
});
it('allows toggling popover with different mechanisms', () => {