link

Author: dentonwong

app/src/components/App.tsx

@@ -93,15 +93,15 @@ export const App = (): JSX.Element => {
 
   return (
     <div className="app">
-      <DndProvider backend={HTML5Backend}>
+      
         <header
           style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
         >
           ReacType
         </header>
 
         <AppContainer />
-      </DndProvider>
+     
     </div>
   );
 };

app/src/components/bottom/BottomPanel.tsx

@@ -36,12 +36,13 @@ const BottomPanel = (props): JSX.Element => {
   }, []);
 
   return (
+    <>
     <div className="bottom-panel" id="resize" ref={node}>
       <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
         ......
       </div>
       <BottomTabs isThemeLight={props.isThemeLight} />
-    </div>
+    </div></>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -49,7 +49,7 @@ const BottomTabs = (props): JSX.Element => {
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
-      style={{ backgroundColor: '#191919' , zIndex: 1}}
+      style={{ backgroundColor: '#191919' , zIndex: 1, borderTop: '2px solid grey'}}
     >
       <Box
         display="flex"

app/src/components/left/Sidebar.tsx

@@ -12,6 +12,7 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ value, setValue }) => {
+  console.log('sidebar value', value);
   return (
     <Tabs
       orientation="vertical"

app/src/components/main/CanvasContainer.tsx

@@ -25,31 +25,38 @@ function CanvasContainer(props): JSX.Element {
   const canvasContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
-    border: '2px Solid grey',
-    overflow: 'auto',
+    border: '2px solid grey',
+    borderBottom: 'none',
+    overflow: 'auto',    
   };
 
   const codePreviewStyle = {
-    position: 'absolute',
+    position: 'fixed',
     width: 'max-content',
     height: 'max-content',
     bottom: '100px', 
     right: '51vw', 
     textAlign: 'center',
     color: '#ffffff', 
-    backgroundColor: '#151515'
+    backgroundColor: '#151515',
+    zIndex: 0
+ 
+    
+    
   } as const;
 
   return (
     <div style={canvasContainerStyle}>
       {state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
       {!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
+     
       <Button
         style={codePreviewStyle}
         onClick={onClickCodePreview}
       >
         Code Preview
       </Button>
+     
     </div>
   );
 }

app/src/components/main/DemoRender.tsx

@@ -23,6 +23,7 @@ const DemoRender = (): JSX.Element => {
     width: '100%',
     backgroundColor: '#FBFBFB',
     border: '2px Solid grey',
+    borderBottom: 'none',
     overflow: 'auto'
   };
 

app/src/containers/MainContainer.tsx

@@ -12,11 +12,11 @@ const MainContainer = (props): JSX.Element => {
 
   return (
     <div className="main-container" style={style}>
-      <div className="main">
+      <div className="main" >
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div className="bottom-hide">
+      <div className="bottom-hide" >
         <BottomPanel isThemeLight={props.isThemeLight} />
       </div>
     </div>

app/src/public/styles/style.css

@@ -545,6 +545,7 @@ BOTTOM PANEL
   height: 100%;
   display:flex;
   flex-direction: column;
+
 }
 
 .htmlattr {