dark mode only missing dropdown menu on Link component

Author: kchender

app/src/components/left/DragDropPanel.tsx

@@ -35,7 +35,7 @@ const DragDropPanel = (props): JSX.Element => {
         <Grid
           id="HTMLItemsGrid"
         >
-          <h3>HTML ELEMENTS</h3>
+          <h3 style={ {color: isThemeLight ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
           {htmlTypesToRender.map(option => {
             if (!['Switch', 'LinkTo', 'LinkHref', 'Image'].includes(option.name)) {
               return (
@@ -51,7 +51,7 @@ const DragDropPanel = (props): JSX.Element => {
             }
 
           })}
-          {state.projectType === "Classic React" ? <h3>REACT ROUTER</h3> : null}
+          {state.projectType === "Classic React" ? <h3 style={ {color: isThemeLight ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
           {htmlTypesToRender.map(option => {
             if ((option.name === 'Switch' || option.name === 'LinkTo') && state.projectType === "Classic React") {
               return (
@@ -67,7 +67,7 @@ const DragDropPanel = (props): JSX.Element => {
             }
           })}
 
-            {state.projectType === "Next.js" ? <h3>Next.js</h3> : null}
+            {state.projectType === "Next.js" ? <h3 style={ {color: isThemeLight? '#000': "#fff"} }>Next.js</h3> : null}
             {htmlTypesToRender.map(option => {
               if ((option.framework === 'nextjs') && state.projectType === "Next.js") {
                 return (

app/src/components/left/HTMLItem.tsx

@@ -120,13 +120,13 @@ const HTMLItem : React.FC<{
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
       { id <= 20 &&
-        <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
+        <div ref={drag} style={ { borderColor: isThemeLight? '#000' : '#fff' } } className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
           <h3>{name}</h3>
         </div>
       }
       { id > 20 &&
         <span id="customHTMLElement">
-          <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
+          <div ref={drag} style={ { borderColor: isThemeLight? '#000' : '#fff' } } className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
             <h3>{name}</h3>
           </div>
           <button id="newElement" style={{color: isThemeLight ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>

app/src/components/main/AddLink.tsx

@@ -6,8 +6,10 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { InputLabel } from '@material-ui/core';
 
+import { styleContext } from '../../containers/AppContainer';
 
 function AddLink({ id }: AddRoutes) {
+  const { isThemeLight } = useContext(styleContext);
   const [state, dispatch] = useContext(StateContext);
   console.log('AddLink\'s state', state);
   const handleClick = (id) => {
@@ -33,10 +35,11 @@ function AddLink({ id }: AddRoutes) {
   return (
     <div style={{ padding: '1px', float: 'right' }}>
       <FormControl size='small'>
-        <InputLabel>Pages</InputLabel>
+        <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
         <Select variant="outlined"
           onChange={handlePageSelect}
           id="page-select"
+          style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white'}}
         >
           {dropDown}
         </Select>

app/src/context/HTMLTypes.tsx

@@ -224,7 +224,7 @@ const HTMLTypes: HTMLType[] = [
     tag: 'Link',
     name: 'LinkHref',
     style: {},
-    placeHolderShort: 'Link',
+    placeHolderShort: 'LinkHref',
     placeHolderLong: '',
     icon: ListIcon,
     framework: 'nextjs',