Change background color, border color, and delete icon color of the component and nestable components on the canvas

Author: johnwage

app/src/components/main/DirectChildHTML.tsx

@@ -71,7 +71,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   return (
     <div
       onClick={onClickHandler}
-      style={combinedStyle}
+      style={{...combinedStyle, backgroundColor: '#1E2024', border: '1px solid #31343A'}}
       ref={drag}
       id={`canv${childId}`}
     >

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -213,12 +213,12 @@ function DirectChildHTMLNestable({
   return (
     <div
       onClick={onClickHandler}
-      style={combinedStyle}
+      style={{...combinedStyle, backgroundColor: isOver ? '#3c59ba' : '#1E2024', border: '1px solid #31343A'}}
       ref={ref}
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: '#f2fbf8' }}>
+        <strong style={{ color: 'white' }}>
           {HTMLType.placeHolderShort}
         </strong>
         <strong style={{ color: '#0671e3' }}>

app/src/public/styles/style.css

@@ -680,7 +680,7 @@ CANVAS WINDOW
 
 .deleteIcon {
   font-size: 18px;
-  color: #4a4a4a;
+  color: gray;
   cursor: pointer;
 }