color box + some controls according to db

client/src/app.js

@@ -356,26 +356,32 @@ function App() {
   }
   const baseColors = {
     'WHITE': 'white',
-    'RED':'#FF9AA2',
-    'PINK':'#FFB7B2',
-    'ORANGE':'#FFDAC1',
-    'GREEN':'#E2F0CB',
-    'EMERALD':'#B5EAD7',
-    'PURPLE':'#C7CEEA'
+    'RED': '#FF9AA2',
+    'PINK': '#FFB7B2',
+    'ORANGE': '#FFDAC1',
+    'GREEN': '#E2F0CB',
+    'EMERALD': '#B5EAD7',
+    'PURPLE': '#C7CEEA'
   }
+  const colorData = Object.entries(baseColors).map((color) => {
+
+    const data = {
+      title: color[0],
+      defaultStyle: { backgroundColor: color[1] },
+      lightStyle: { backgroundColor: Color(color[1]).lighten(0.05).string() },
+      darkStyle: { backgroundColor: Color(color[1]).darken(0.1).string() }
+
+    }
+    return data;
+  });
+
   const colorSelector =
     <div className="color-selector-container">
-      {Object.entries(baseColors).map((color) => {
-
-        const colorData = {
-          title: color[0],
-          defaultStyle: { backgroundColor: color[1] },
-          hoverStyle: { backgroundColor: Color(color[1]).lighten(0.05).string() }
-        };
-        
-        return <ColorSelect colorData={colorData} handler={boxHandler.handleColor} boxColor={boxColor} />
-      })}
-  </div>
+      {colorData.map((data) => {
+        return <ColorSelect colorData={data} handler={boxHandler.handleColor} boxColor={boxColor} />
+      })
+      }
+    </div>
 
   const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
@@ -433,6 +439,7 @@ function App() {
           {filteredData.map((box, index) => {
             return (
               <Box
+                style={colorData.find(color => color.title === box.color)}
                 isMoving={box._id !== moveItemBoxID && isMoving}
                 key={index}
                 boxData={box}

client/src/box.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Item from './item';
 
-const Box = ({ boxData, boxHandler, itemHandler, isMoving }) => {
+const Box = ({ boxData, boxHandler, itemHandler, isMoving, style }) => {
     const menu = useRef(null);
     useEffect(() => {
         document.addEventListener('mousedown', handleClick);
@@ -40,7 +40,9 @@ const Box = ({ boxData, boxHandler, itemHandler, isMoving }) => {
         )
     }
     return (
-        <li className={`${isMoving ? "target" : null} box`} draggable='true'
+        <li className={`${isMoving ? "target " : ""}box`} 
+            style={style.defaultStyle}
+            draggable='true'
             onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
             onDragOver={boxHandler.handleDragOver}
             onDrop={(event) => boxHandler.handleDrop(boxData, event)}
@@ -54,7 +56,7 @@ const Box = ({ boxData, boxHandler, itemHandler, isMoving }) => {
                 </div>
                 <span className='menu-btn box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
             </div>
-            <div className='head-divider'></div>
+            <div style={style.darkStyle} className='head-divider'></div>
             <ul className='list-box-item scroll-container'>
                 {boxData.item.map(((item, index) => {
                     return <Item
@@ -65,7 +67,7 @@ const Box = ({ boxData, boxHandler, itemHandler, isMoving }) => {
                 }))}
             </ul>
             <div className='menu-bottom'>
-                <span className='material-icons add' onClick={() => itemHandler.handleAdd(boxData._id)}>add</span>
+                <span style={style.lightStyle} className='material-icons add' onClick={() => itemHandler.handleAdd(boxData._id)}>add</span>
             </div>
         </li>
     )

client/src/color.js

@@ -4,7 +4,7 @@ const Color = ({ colorData, handler, boxColor }) => {
     const [style, setStyle] = useState(colorData.defaultStyle);
 
     const handleHover = (isHover) => {
-        setStyle(isHover ? colorData.hoverStyle : colorData.defaultStyle);
+        setStyle(isHover ? colorData.lightStyle : colorData.defaultStyle);
     }
 
     return (

client/src/styles/app.css

@@ -220,7 +220,7 @@ li.item:hover {
     border-radius: 50%;
 }
 .menu-btn:hover {
-    background-color: var(--white_darker);
+    /*background-color: var(--white_darker);*/
 }
 .menu-btn.box {
     font-size: 1.25rem;