left panel refinements

Author: fredosauce

src/components/left/ComponentPanelNew.tsx

@@ -20,7 +20,8 @@ const useStyles = makeStyles({
     height: '110px',
     textAlign: 'center',
     display: 'flex',
-    justifyContent: 'flex-end'
+    justifyContent: 'center',
+    paddingLeft: '35px'
   },
   panelWrapper: {
     marginTop: '35px',
@@ -30,7 +31,8 @@ const useStyles = makeStyles({
     maxHeight: '675px',
     minHeight: '120px',
     overflowY: 'auto',
-    marginLeft: '-15px'
+    marginLeft: '-15px',
+    marginRight: '-15px'
   },
   input: {
     color: '#fff',

src/containers/LeftContainerNew.tsx

@@ -14,31 +14,42 @@ import GetAppIcon from '@material-ui/icons/GetApp';
 const useStyles = makeStyles({
   btnGroup: {
     display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     position: 'absolute',
-    bottom: '65px',
+    bottom: '40px',
     left: '0px'
   },
   exportBtn: {
     width: '55%',
     backgroundColor: 'rgba(1,212,109,0.1)',
     fontSize: '1em'
+  },
+  clearBtn: {
+    width: '55%',
+    fontSize: '1em',
+    marginTop: '15px',
+    color: 'red'
   }
 })
 
 // Left-hand portion of the app, where component options are displayed
 const LeftContainer = (): JSX.Element => {
   const classes = useStyles();
   return (
-    <div className="column left" style={{ minWidth: '375px' }}>
+    <div className="column left">
       <Grid container direction="row" alignItems="center">
         <ComponentPanel />
         <HTMLPanel />
         <div className={classes.btnGroup}>
           <Button className={classes.exportBtn} variant="outlined" color="primary" endIcon={<GetAppIcon />}>
             EXPORT PROJECT
           </Button>
+          <Button className={classes.clearBtn}>
+            CLEAR WORKSPACE
+          </Button>
         </div>
       </Grid>
     </div>

src/public/styles/style.css

@@ -90,9 +90,9 @@ LEFT COLUMN
 
 .left {
   padding: 10px;
-  width: 20%;
-  min-width: 310px;
   display: flex;
+  width: 380px;
+  min-width: 380px;
   flex-direction: column;
   position: relative;
   overflow-x: hidden;

src/public/styles/styleNew.css

@@ -51,5 +51,6 @@ h3 {
 
 .right {
   padding-top: 35px;
+  width: 420px;
 }