Merge pull request #23 from oslabs-beta/laura

Laura

Author: Skilzsz

app/src/components/left/HTMLItem.tsx

@@ -138,23 +138,23 @@ const HTMLItem: React.FC<{
 
       {/* Custom Elements */}
       {id > 20 && (
-        <span id="customHTMLElement">
-          <div
-            ref={drag}
-            style={{ borderColor: '#C6C6C6' }}
-            className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
-            id="HTMLItem"
-          >
-            <div>{name}</div>
-          </div>
-          <button
+        <div
+          ref={drag}
+          style={{ borderColor: '#C6C6C6' }}
+          className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
+          id="HTMLItem"
+        >
+          {typeof CodeIcon !== 'undefined' && (
+          <CodeIcon fontSize="small" align-items="center" />)}
+          {name}
+            <button
             id="newElement"
             style={{ color: '#C6C6C6' }}
             onClick={() => deleteAllInstances(id)}
-          >
-            X
-          </button>
-        </span>
+            >
+              X
+            </button>
+        </div>
       )}
       {modal}
     </Grid>

app/src/components/left/HTMLPanel.tsx

@@ -317,7 +317,6 @@ const useStyles = makeStyles({
   },
   addComponentWrapper: {
     width: '100%',
-    margin: '5px 0px 0px 0px'
   },
   input: {
     borderRadius: '5px',

app/src/containers/CustomizationPanel.tsx

@@ -532,26 +532,24 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
         <ProjectManager />
         <div className="rightPanelWrapper">
           <div>
-            <div className={classes.rootConfigHeader}>
               <h4
-                className={
-                  isThemeLight
-                    ? classes.lightThemeFontColor
-                    : classes.darkThemeFontColor
-                }
-              >
-                Parent Component:
-                <br />
-                <br />
-                <span className={classes.rootCompName}>
-                  {configTarget.name}
-                </span>
-                <p style={{ fontSize: '16px' }}>
-                  Drag and drop an html element (or focus one) to see what
-                  happens!
-                </p>
-              </h4>
-            </div>
+              className={
+                isThemeLight
+                  ? classes.lightThemeFontColor
+                  : classes.darkThemeFontColor
+              }
+            >
+              Parent Component:
+              <br />
+              <br />
+              <span className={classes.rootCompName}>
+                {configTarget.name}
+              </span>
+              <p style={{ fontSize: '16px' }}>
+                Drag and drop an html element (or focus one) to see what
+                happens!
+              </p>
+            </h4>
           </div>
         </div>
         <ProjectManager />
@@ -581,17 +579,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
               {configTarget.child.type === 'component'
                 ? ' component'
                 : ' element'}{' '}
+                : {configTarget.child.name}
               <br />
-              <br />
-              <span
-                className={
-                  isThemeLight
-                    ? `${classes.compName} ${classes.lightThemeFontColor}`
-                    : `${classes.compName} ${classes.darkThemeFontColor}`
-                }
-              >
                 {configTarget.child.name}
-              </span>
             </h4>
           </div>
           <section className={'customization-section'}>
@@ -877,18 +867,18 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                 <Button
                   variant="contained"
                   color="primary"
+                  onClick={handleSave}
                   className={
                     isThemeLight
                       ? `${classes.button} ${classes.saveButtonLight}`
                       : `${classes.button} ${classes.saveButtonDark}`
                   }
-                  onClick={handleSave}
                   id="saveButton"
                 >
                   SAVE
                 </Button>
               </div>
-              <div className={classes.buttonRow}>
+              {/* <div className={classes.buttonRow}>
                 <Button
                   variant="contained"
                   color="primary"
@@ -902,9 +892,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                 >
                   CSS
                 </Button>
-              </div>
+              </div> */}
 
-              <div>
+              {/* <div>
                 <Button
                   variant="contained"
                   color="primary"
@@ -923,7 +913,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                 >
                   Tailwind
                 </Button>
-              </div>
+              </div> */}
               {configTarget.child ? (
                 <div className={classes.buttonRow}>
                   <Button
@@ -1035,7 +1025,7 @@ const useStyles = makeStyles({
     marginTop: '20px'
   },
   configType: {
-    minWidth: '185px',
+    minWidth: '100px',
     fontSize: '85%'
   },
   configValue: {

app/src/public/styles/style.css

@@ -152,6 +152,7 @@ span.material-symbols-outlined {
   transition: 0.3s ease all;
   border-color: transparent;
   background-color: #1e83714b;
+  border-radius: 8px;
   z-index: 40;
 }
 
@@ -303,10 +304,10 @@ span.material-symbols-outlined {
   border: none;
   background: none;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: flex-start;
-  justify-self: flex-end;
-  align-self: flex-start;
+  /* justify-self: flex-end; */
+  /* align-self: flex-start; */
   width: 0.5em;
 }
 
@@ -429,8 +430,6 @@ RIGHT COLUMN
 // RIGHT NOW, I'M NOT SURE WHAT RIGHT COL IS REFERING TO
 */
 #rightContainer {
-  overflow-y: auto;
-  overflow-x: hidden;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -532,6 +531,32 @@ BOTTOM PANEL
   background-color: #191919;
 }
 
+.tab-content::-webkit-scrollbar {
+  width: .8rem;
+  height: .5rem;
+  }
+  
+.tab-content::-webkit-scrollbar-thumb {
+  transition: .3s ease all;
+  border-color: transparent;
+  background-color: #1e83714b;
+  border-radius: 8px;
+  z-index: 40;
+}
+
+.tab-content::-webkit-scrollbar {
+  width: .8rem;
+  height: .5rem;
+  }
+  
+.tab-content::-webkit-scrollbar-thumb {
+  transition: .3s ease all;
+  border-color: transparent;
+  background-color: #1e83714b;
+  border-radius: 8px;
+  z-index: 40;
+}
+
 .MuiDataGrid-menuList,
 .MuiDataGrid-columnsPanel,
 .MuiDataGrid-filterForm {