build(deps): update package-lock.json, package.json, src/components/ThemeColor/index.js and yarn.lock

package-lock.json

@@ -33,6 +33,7 @@
         "react-apexcharts": "^1.3.9",
         "react-beautiful-dnd": "^13.1.0",
         "react-circular-progressbar": "^2.0.4",
+        "react-color": "^2.19.3",
         "react-dom": "17",
         "react-hook-form": "^7.30.0",
         "react-icons": "^4.3.1",
@@ -45,6 +46,7 @@
         "react-redux": "^7.2.6",
         "react-router-dom": "6",
         "react-scripts": "5.0.0",
+        "react-star-rating-component": "^1.4.1",
         "react-table": "^7.7.0",
         "react-tooltip": "^4.2.21",
         "recharts": "^2.1.8",
@@ -2374,6 +2376,14 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "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",
@@ -12251,6 +12261,11 @@
         "tmpl": "1.0.5"
       }
     },
+    "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/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -14813,6 +14828,23 @@
         "react": "^0.14.0 || ^15.0.0 || ^16.0.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"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-date-object": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz",
@@ -15229,6 +15261,22 @@
         }
       }
     },
+    "node_modules/react-star-rating-component": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-star-rating-component/-/react-star-rating-component-1.4.1.tgz",
+      "integrity": "sha512-i0YEvQzToS0s0GDkxn01Jy4EeLpVEyh023NXJTJ+/1+xkvhpACyD4d1YeBhYWZab53ppUnUxs5gmp75gJr3khA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.2.0"
+      }
+    },
     "node_modules/react-table": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
@@ -15280,6 +15328,14 @@
         "react-dom": ">=16.6.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/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -17085,6 +17141,14 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
     },
+    "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.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -20069,6 +20133,12 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "@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",
@@ -27271,6 +27341,11 @@
         "tmpl": "1.0.5"
       }
     },
+    "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=="
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -28960,6 +29035,20 @@
       "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==",
       "requires": {}
     },
+    "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-date-object": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz",
@@ -29253,6 +29342,15 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-star-rating-component": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-star-rating-component/-/react-star-rating-component-1.4.1.tgz",
+      "integrity": "sha512-i0YEvQzToS0s0GDkxn01Jy4EeLpVEyh023NXJTJ+/1+xkvhpACyD4d1YeBhYWZab53ppUnUxs5gmp75gJr3khA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-table": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
@@ -29286,6 +29384,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "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"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -30638,6 +30744,11 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-apexcharts": "^1.3.9",
     "react-beautiful-dnd": "^13.1.0",
     "react-circular-progressbar": "^2.0.4",
+    "react-color": "^2.19.3",
     "react-dom": "17",
     "react-hook-form": "^7.30.0",
     "react-icons": "^4.3.1",

src/components/ThemeColor/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import SwitchDesign from "../SwitchDesign/Switch";
+import { SketchPicker } from "react-color";
 
 const ThemeColor = () => {
   const colors = ["#9253a1", "#f063a4", "#2dc5f4"];
@@ -7,6 +8,9 @@ const ThemeColor = () => {
   const [background, setBackground] = useState("#071415");
   const [current, setCurrent] = useState(null);
 
+  const [color, setColor] = useState("lightblue");
+  const [hidden, setHidden] = useState(false);
+
   return (
     <div className="ltr w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
       <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
@@ -23,7 +27,7 @@ const ThemeColor = () => {
         {/* right */}
         <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">fsd</div>
         {/* left */}
-        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">
+        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4 bg-red-200">
           <div className="w-full flex flex-row-reverse items-center justify-between">
             <div className="flex flex-row-reverse items-center justify-between">
               <span className="text-xs ml-2">Dark</span> <SwitchDesign />
@@ -34,6 +38,24 @@ const ThemeColor = () => {
           <p className="text-[#64b6df] text-lg font-sansbold">
             Original Colors
           </p>
+          <div className="bg-red-400 flex flex-row justify-between gap-x-10 mt-2">
+            <div
+              className="flex-1 rounded-sm relative"
+              style={{ background: color }}
+            >
+              {hidden && (
+                <SketchPicker
+                  className="absolute bottom-10 left-0"
+                  color={color}
+                  onChange={(updatedColor) => setColor(updatedColor.hex)}
+                />
+              )}
+              <button onClick={() => setHidden(!hidden)}>
+                {hidden ? "close" : "open"}
+              </button>
+            </div>
+            <div className="flex-1 bg-yellow-600 rounded-sm">Card</div>
+          </div>
         </div>
       </div>
     </div>