Feature/reorganize resize

package.json

@@ -13,16 +13,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.15",
-    "@mui/material": "^5.14.15",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@reduxjs/toolkit": "^1.9.7",
-    "blockly": "^10.2.1",
+    "blockly": "^10.2.2",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

src/components/AnchorMenu.jsx

@@ -21,7 +21,9 @@ const AnchorMenu = () => {
   };
 
   return (
+    <div className="anchor">
     <Box sx={{ position: 'absolute', top: 70, right: 16 }}>
+
       <Button variant="contained" color="primary" onClick={handleClick}>
         <AnchorIcon />
       </Button>
@@ -40,6 +42,7 @@ const AnchorMenu = () => {
         <ModeToggle mode={mode} setMode={setMode} />
       </Menu>
     </Box>
+    </div>
   );
 };
 

src/components/BlocklyComponent.jsx

@@ -26,9 +26,15 @@ const BlocklyComponent = () => {
   }, []);
 
   return (
-    <div style={{ width: '100%', height: '480px' }}>
-      <h1 style={{ display: 'inline-block', fontSize: '14px', marginRight: '500px' }}>Blockly Toolbox</h1>
-      <h1 style={{ display: 'inline-block', fontSize: '14px' }}>Blockly Workspace</h1>
+    // <div style={{ width: '100%', height: '480px' }}>
+      /* <h1 style={{ display: 'inline-block', fontSize: '14px', marginRight: '500px'}}>Blockly Toolbox</h1> */
+      /* <h1 style={{ display: 'inline-block', fontSize: '14px' }}>Blockly Workspace</h1> */
+
+    <div className="BlockyComp">
+      <div className="highlghted-text"><h1>Blockly Toolbox</h1>
+      <h1>Blockly Workspace</h1></div>
+
+
       <div className="highlighted" id="blocklyDiv" style={{ height: '100%', width: '100%' }}></div>
     </div>
   );

src/components/Canvas.jsx

@@ -14,7 +14,10 @@ import FullScreen from './Canvas/FullScreen';
 
 const Canvas = () => {
   return (
-    <Card class="highlighted" style={{ position: 'relative', width: '700px', margin: '28px auto', height: '600px', overflow: 'hidden' }}>
+    // <Card class="highlighted" style={{ position: 'relative', width: '700px', margin: '28px auto', height: '300px', overflow: 'hidden' }}>
+
+    <div className="Canvasbox">
+    <Card class="highlighted">
       <h1 style={{ textAlign: 'center' ,fontSize: '14px'}}>Canvas</h1>
       <Draggable bounds="parent" defaultPosition={{x: 150, y: 100}}>
         <Resizable
@@ -56,6 +59,7 @@ const Canvas = () => {
         </div>
       </div>
     </Card>
+  </div>
   );
 };
 

src/components/Header.jsx

@@ -36,12 +36,14 @@ export default function Header() {
           </Typography>
 
           {/* Navigation Buttons */}
-          <Button color="inherit">Files</Button>
-          <Button color="inherit">Edit</Button>
-          <Button color="inherit">Tutorials</Button>
-          <Button color="inherit">Boards</Button>
-          <Button color="inherit">Connect</Button>
-
+          <div className="nav-button">
+          <Button className="btn" color="inherit">Files</Button>
+          <Button className="btn" color="inherit">Edit</Button>
+          <Button className="btn" color="inherit">Tutorials</Button>
+          <Button className="btn" color="inherit">Boards</Button>
+          <Button className="btn" color="inherit">Connect</Button>
+          </div> 
+
           {/* Editable Project Name */}
           <ProjectNameInput
             value={projectName}

src/index.css

@@ -14,12 +14,257 @@ body {
 }
 
 .highlighted {
-  border: 1px solid #000000; /* Example with a red-orange color */
+  border: 8px solid #000000; /*Example with a red-orange color */
+  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cffffe' /%3E%3Cstop offset='25%25' stop-color='%23f9f7d9' /%3E%3Cstop offset='50%25' stop-color='%23fce2ce' /%3E%3Cstop offset='100%25' stop-color='%23ffc1f3' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3'/%3E %3C/svg%3E") 1;
+
 }
 
+
 .blocklyTreeRow {
-  border: 2px solid #333;  /* Add border */
-  margin: 5px 0;          /* Space between categories */
-  border-radius: 5px;     /* Optional rounded corners */
-  padding: 5px;           /* Some padding */
-}
+ border: 2px solid #333;    /* Add border */
+  margin: 5px 0;                /* Space between categories */
+  border-radius: 5px;           /* Optional rounded corners */
+  padding: 5px;                 /* Some padding */
+}
+
+
+
+/* Testing */
+
+.highlghted-text h1{
+  display: inline-block;
+  font-size: 14px;
+  margin-right: 270px;
+}
+
+
+
+/* .blocklyToolboxDiv{
+  background-color: rgb(40, 40, 40);
+  color: white;
+}
+
+.blocklyFlyoutBackground{
+  fill: rgb(57, 57, 57);
+  fill-opacity: .8;
+}
+
+.blocklyToolboxCategory:hover{
+  background-color: cadetblue;
+  transition: 0.3s;
+} */
+
+.BlockyComp{
+  width:100%;
+  height: 625px;
+}
+
+.highlighted{
+  position: relative;
+   width: 361px; 
+   /* margin: 28px auto;  */
+   height: 300px; 
+   overflow: hidden;
+  }
+
+.Canvasbox{
+  margin-top: 24px;
+  width: 505px;
+  height: 100px;
+  margin-left: 17px;
+}
+
+.react-draggable{
+    bottom: 60px;
+    right: 52px;
+}
+
+
+
+/* Responsive */
+
+@media only screen and (min-width:1000px) and (max-width:1237px){
+  .highlghted-text h1{
+    color: red;
+    margin-right: 119px;
+  }
+}
+
+
+
+@media only screen and (min-width:881px) and (max-width:1000px){
+  .highlghted-text h1{
+    color: blueviolet;
+    margin-right: 50px;
+  }
+
+  .css-1juivf6-MuiTypography-root h1{
+    font-size: 20px;
+  }
+
+  .highlighted {
+    position: relative;
+    width: 324px;
+    height: 300px;
+    overflow: hidden;
+}
+}
+
+.home-box{
+  display: flex;
+  justify-content: space-around; 
+  margin-top: 20px;
+}
+
+
+
+@media only screen and (min-width:666px) and (max-width:881px){
+
+  .highlghted-text h1{
+    color: rgb(64, 226, 43);
+    margin-right: 47px;
+  }
+
+  .css-1juivf6-MuiTypography-root h1{
+    font-size: 15px;
+    margin-right: 11px;
+  }
+
+  .nav-button .btn {
+    /* border: 2px solid red; */
+    font-size: 10px;
+  }
+
+  .css-rxj24x{
+    margin-top: 8px;
+  }
+
+  .highlighted {
+    position: relative;
+    width: 214px;
+    height: 300px;
+    overflow: hidden;
+  }
+
+  .Canvasbox {
+    margin-top: 24px;
+    width: 216px;
+    height: 100px;
+  }
+
+  .react-draggable {
+    bottom: 83px;
+    right: 94px;
+}
+   /* Anchor Button */
+  .css-sghohy-MuiButtonBase-root-MuiButton-root {
+    top: -10px;
+  }
+}
+
+@media only screen and (min-width:535px) and (max-width:666px){
+  .BlockyComp {
+    width: 100%;
+    height: 517px;
+}
+
+}
+
+
+@media only screen and (min-width:376px) and (max-width:666px){
+  .highlghted-text h1{
+    color: rgb(226, 43, 208);
+    margin-right: 47px;
+  }
+
+  .css-1juivf6-MuiTypography-root h1{
+    font-size: 20px;
+    margin-right: 11px;
+  }
+
+  .css-rxj24x {
+    position: absolute;
+    top: 122px;
+    right: 16px;
+  }
+
+  .nav-button{
+    display: flex;
+    margin-right: 75px;
+  }
+
+  .nav-button button{
+    display: flex;
+    font-size: 10px;
+    flex-direction: row;
+  }
+
+  .nav-button .btn {
+    /* border: 2px solid red; */
+    font-size: 10px;
+  }
+
+  .css-hyum1k-MuiToolbar-root{
+  flex-wrap: wrap
+  }
+
+  .highlighted {
+    position: relative;
+    width: 415px;
+    height: 199px;
+    overflow: hidden;
+}
+
+  .Canvasbox {
+    margin-top: 41px;
+    width: 242px;
+    height: 100px;
+  }
+
+  .home-box{
+    display: flex;
+    justify-content: space-around; 
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
+  /* Anchor Button */
+  .css-sghohy-MuiButtonBase-root-MuiButton-root {
+    top: 20px;
+  }
+
+}
+
+@media screen and (max-width:572px) {
+  /* Anchor Button */
+  .css-sghohy-MuiButtonBase-root-MuiButton-root {
+    top: 23px;
+  }
+
+  .css-1juivf6-MuiTypography-root h1{
+    font-size: 13px;
+    width: auto;
+    /* margin-right: 11px; */
+  }
+
+  .BlockyComp {
+    width: 100%;
+    height: 516px;
+}
+}
+
+@media screen and (max-width: 533px) {
+  /* Anchor Button */
+  .css-sghohy-MuiButtonBase-root-MuiButton-root {
+    top: 42px;
+  }
+
+.BlockyComp {
+    width: 100%;
+    height: 517px;
+}
+
+}
+
+
+

src/pages/Home.jsx

@@ -11,7 +11,8 @@ const Home = () => {
       <Header />
       <div style={{ textAlign: 'center' }}>
       </div>
-      <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
+      {/* <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}> */}
+      <div className="home-box">
         <BlocklyComponent />
         <Canvas />
       </div>