add as child hover

Author: ChristianEdwardPadilla

src/components/KonvaStage.tsx

@@ -207,7 +207,7 @@ class KonvaStage extends Component {
                   handleTransform={handleTransform}
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
-                  imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
+                  imageSource={child.htmlElement === 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
                 />
               ))
               .sort((rectA, rectB) => {

src/components/LeftColExpansionPanel.jsx

@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const LeftColExpansionPanel = props => {
   const {
@@ -118,14 +119,16 @@ const LeftColExpansionPanel = props => {
         {id === 1 || isFocused() || !selectableChildren.includes(id) ? (
           <div />
         ) : (
-          <IconButton
-            aria-label="Add"
-            onClick={() => {
-              addChild({ title, childType: "COMP" });
-            }}
-          >
-            <AddIcon style={{ color, float: "right" }} />
-          </IconButton>
+          <Tooltip title="add as child" aria-label="add as child" placement="left">
+            <IconButton
+              aria-label="Add"
+              onClick={() => {
+                addChild({ title, childType: 'COMP' });
+              }}
+            >
+              <AddIcon style={{ color, float: 'right' }} />
+            </IconButton>
+          </Tooltip>
         )}
       </Grid>
     </div>

src/components/MainContainerHeader.jsx

@@ -46,7 +46,7 @@ const styles = () => ({
   },
 });
 
-const MainContainerHeader = (props) => {
+const MainContainerHeader = props => {
   const {
     classes,
     image,
@@ -63,12 +63,7 @@ const MainContainerHeader = (props) => {
       <div className="main-header-buttons">
         <Tooltip title="remove image">
           <div>
-            <Button
-              disabled={!image}
-              color="default"
-              className={classes.button}
-              onClick={showImageDeleteModal}
-            >
+            <Button disabled={!image} color="default" className={classes.button} onClick={showImageDeleteModal}>
               <DeleteOutlineIcon className={classes.light} />
             </Button>
           </div>
@@ -79,25 +74,21 @@ const MainContainerHeader = (props) => {
               <ImageSearchIcon className={classes.light} />
             </Button>
           </div>
-        </Tooltip>
-        <Tooltip title={'export'}>
-          <div>
-            <Button
-              color="primary"
-              variant="text"
-              // variant="outlined"
-              className={classes.clearButton}
-              disabled={totalComponents < 1}
-              onClick={showGenerateAppModal}
-            >
-              <GetAppIcon
-                className={classes.light}
-                style={{ paddingLeft: '5px', paddingRight: '5px' }}
-              />
-              Export Project
-            </Button>
-          </div>
-        </Tooltip>
+        </Tooltip>{' '}
+        */}
+        <div>
+          <Button
+            color="primary"
+            variant="text"
+            // variant="outlined"
+            className={classes.clearButton}
+            disabled={totalComponents < 1}
+            onClick={showGenerateAppModal}
+          >
+            <GetAppIcon className={classes.light} style={{ paddingLeft: '5px', paddingRight: '5px' }} />
+            Export Project
+          </Button>
+        </div>
       </div>
     </div>
   );