Replaced rect-color with react-colorful

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",
@@ -18664,11 +18656,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",
@@ -18997,11 +18984,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",
@@ -26503,21 +26485,13 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
-    "node_modules/react-color": {
+    "node_modules/react-colorful": {
-      "version": "2.19.3",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
-      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
-      "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"
-      },
       "peerDependencies": {
-        "react": "*"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
     "node_modules/react-copy-to-clipboard": {
@@ -26989,14 +26963,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",
@@ -31626,14 +31592,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",
@@ -36622,12 +36580,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",
@@ -49128,11 +49080,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",
@@ -49406,11 +49353,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",
@@ -55346,19 +55288,11 @@
         "lodash": "^4.17.19"
       }
     },
-    "react-color": {
+    "react-colorful": {
-      "version": "2.19.3",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
-      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
-      "requires": {
+      "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-copy-to-clipboard": {
       "version": "5.0.2",
@@ -55710,14 +55644,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",
@@ -59307,11 +59233,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",

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",

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;
+}

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) => (
                 <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
               </div>
             </div>
-            <Popover isOpen={showColorPicker} toggle={toggleColorPicker} target="colorPickerBtn" placement="right">
+            <Popover
-              <ChromePicker color={color} disableAlpha onChange={({ hex }) => setColor(hex)} />
+              isOpen={showColorPicker}
+              toggle={toggleColorPicker}
+              target="colorPickerBtn"
+              placement="right"
+              hideArrow
+              popperClassName="edit-tag-modal__popover"
+            >
+              <HexColorPicker color={color} onChange={setColor} />
             </Popover>
             <Input
               value={newTagName}

test/tags/helpers/EditTagModal.test.tsx

@@ -1,7 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Button, Input, Modal, ModalHeader, Popover } from 'reactstrap';
-import { ChromePicker } from 'react-color';
+import { HexColorPicker } from 'react-colorful';
 import { TagEdition } from '../../../src/tags/reducers/tagEdit';
 import createEditTagModal from '../../../src/tags/helpers/EditTagModal';
 import ColorGenerator from '../../../src/utils/services/ColorGenerator';
@@ -92,9 +92,9 @@ describe('<EditTagModal />', () => {
   it('changes color when changing on color picker', () => {
     const wrapper = createWrapper();
 
-    expect(wrapper.find(ChromePicker).prop('color')).toEqual('red');
+    expect(wrapper.find(HexColorPicker).prop('color')).toEqual('red');
-    wrapper.find(ChromePicker).simulate('change', { hex: 'blue' });
+    wrapper.find(HexColorPicker).simulate('change', 'blue');
-    expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue');
+    expect(wrapper.find(HexColorPicker).prop('color')).toEqual('blue');
   });
 
   it('allows toggling popover with different mechanisms', () => {