Merge branch 'dev' into ian/feature/working-with-react17

Merge dependency updates to working dev branch

Author: iancdavis

app/src/components/main/DirectChildHTML.tsx

@@ -85,7 +85,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: isThemeLight ? 'black' : 'white' }}>
+        <strong style={{ color:'black'}}>
           {HTMLType.placeHolderShort}
         </strong>
         <DeleteButton

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -12,6 +12,7 @@ import validateNewParent from '../../helperFunctions/changePositionValidation';
 import componentNest from '../../helperFunctions/componentNestValidation';
 import AddRoute from './AddRoute';
 import AddLink from './AddLink';
+import { useSelector } from 'react-redux';
 
 import { styleContext } from '../../containers/AppContainer';
 
@@ -26,6 +27,7 @@ function DirectChildHTMLNestable({
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const { isThemeLight } = useContext(styleContext);
+  const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
   const ref = useRef(null);
   // const [linkDisplayed, setLinkDisplayed] = useState('');
 
@@ -175,7 +177,7 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}
+        <strong style={ {color: 'black' } }>{HTMLType.placeHolderShort}
         </strong>
         <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>