Merge remote-tracking branch 'origin/zach-starter' into eleanor-gptdraw

1 files changed, 196 insertions, 54 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index d2749f1ad..4bfd4f7cb 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,87 +1,229 @@
-.DIYNodeBox {
+.DiagramBox {
+    overflow:hidden;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .DIYNodeBox-wrapper {
+    .buttonCollections{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        height:100%;
+        padding:20px;
+        padding-right:40px;
+        button{
+            font-size:15px;
+            height:100%;
+            width:100%;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            background-color: #007bff;
+            color: #fff;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        
+    }
+    .DiagramBox-wrapper {
+        overflow:hidden;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        .DIYNodeBox {
-            /* existing code */
-
-            .DIYNodeBox-iframe {
-                height: 100%;
-                width: 100%;
-                border: none;
-
-            }
-        }
-
-        .search-bar {
+        .contentCode{
+            overflow: hidden;
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 100%;
-            padding: 10px;
-
-            input[type="text"] {
-                flex: 1;
-                margin-right: 10px;
+            flex-direction:row;
+            padding:10px;
+            width:100%;
+            height:100%;
+            .topbar{
+                .backButtonDrawing{
+                    padding: 5px 10px;
+                    height:23px;
+                    border-radius: 10px;
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+                    position:absolute;
+                    top:10px;
+                    left:10px;
+                }
+                p{
+                    margin-left:60px
+                }
             }
+            .search-bar {
+                overflow:hidden;
+                position:absolute;
+                top:0;
+                .backButton{
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
 
-            button {
-                padding: 5px 10px;
+                }
+                .exampleButton{
+                    width:100px;
+                    height:30px;
+                }
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                button {
+                    padding: 5px 10px;
+                    width:80px;
+                    height:23px;
+                    border-radius: 3px;
+                }
+            }
+            .exampleButtonContainer{
+                display:flex;
+                flex-direction: column;
+                position: absolute;
+                top:37px;
+                right:30px;
+                width:50px;
+                z-index: 200;
+                button{
+                    width:70px;
+                    margin:2px;
+                    padding:0px;
+                    height:15px;
+                    border-radius: 3px;
+                }
+            }
+            textarea {
+                position:relative;
+                width:40%;
+                height: 100%;
+                height: calc(100% - 25px);
+                top:15px;
+                resize:none;
+                overflow: hidden;
+            }
+            .diagramBox{
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg{
+                    position: relative;
+                    top:25;
+                    max-width: none !important;
+                    height: calc(100% - 50px);
+                }
             }
         }
-
         .content {
-            flex: 1;
+            overflow: hidden;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-direction: column;
+            padding:10px;
             width:100%;
             height:100%;
-            .diagramBox{
-                flex: 1;
+            .topbar{
+                .backButtonDrawing{
+                    padding: 5px 10px;
+                    height:23px;
+                    border-radius: 10px;
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+                    position:absolute;
+                    top:10px;
+                    left:10px;
+                }
+                p{
+                    margin-left:60px
+                }
+            }
+            .search-bar {
+                overflow:hidden;
+                position:absolute;
+                top:0;
+                .backButton{
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+
+                }
                 display: flex;
+                flex-wrap: wrap;
                 justify-content: center;
                 align-items: center;
-                width:100%;
-                height:100%; 
-                svg{
+                width: 100%;
+                textarea {
                     flex: 1;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    width:100%;
-                    height:100%; 
+                    height: 5px;
+                    min-height: 20px;
+                    resize:none;
+                    overflow: hidden;
+                }
+                button {
+                    padding: 5px 10px;
+                    width:80px;
+                    height:23px;
+                    border-radius: 10px;
+                }
+                .rightButtons{
+                    display:flex;
+                    flex-direction: column;
+                    button {
+                        padding: 5px 10px;
+                        width:80px;
+                        height:23px;
+                        margin:2;
+                        border-radius: 10px;
+                    }
                 }
             }
-        }
-
-        .loading-circle {
-            position: relative;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
+            .loading-circle {
+                position: absolute;
+                display:flex;
+                align-items: center;
+                justify-content: center;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                border: 3px solid #ccc;
+                border-top-color: #333;
+                animation: spin 1s infinite linear;
             }
-            100% {
-                transform: rotate(360deg);
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+            .diagramBox{
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg{
+                    position: relative;
+                    top:25;
+                    max-width: none !important;
+                    height: calc(100% - 50px);
+                }
             }
         }
     }