Add small top border to some Bottom Tabs so they stand out against the canvas color. Also, change canvas scrollbar colors and width

Author: johnwage

app/src/components/bottom/BottomTabs.tsx

@@ -80,24 +80,28 @@ const BottomTabs = (props): JSX.Element => {
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Creation Panel"
               onClick={showBottomPanel}
+              sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
               disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Customization"
               onClick={showBottomPanel}
+              sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
               disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="CSS Editor"
               onClick={showBottomPanel}
+              sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
               disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Component Tree"
               onClick={showBottomPanel}
+              sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
               disableRipple

app/src/public/styles/style.css

@@ -663,6 +663,19 @@ NAVBAR
   width: 16%;
 }
 
+#canvasContainer::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.7rem;
+}
+
+#canvasContainer::-webkit-scrollbar-thumb {
+  transition: 0.3s ease all;
+  border-color: transparent;
+  background-color: gray;
+  border-radius: 8px;
+  z-index: 40;
+}
+
 /*
 /////////////////////////////////////////////////
 CANVAS WINDOW