Merge branch 'master' into eleanor-gptdraw

1 files changed, 59 insertions, 207 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 4bfd4f7cb..323638bff 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,230 +1,82 @@
-.DiagramBox {
-    overflow:hidden;
+$searchbarHeight: 50px;
+
+.DIYNodeBox {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    .buttonCollections{
+    align-items: center;
+    justify-content: center;
+
+    .DIYNodeBox {
+        /* existing code */
+
+        .DIYNodeBox-iframe {
+            height: 100%;
+            width: 100%;
+            border: none;
+        }
+    }
+
+    .DIYNodeBox-searchbar {
         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;
+        align-items: center;
+        width: 100%;
+        height: $searchbarHeight;
+        padding: 10px;
+
+        input[type='text'] {
+            flex: 1;
+            margin-right: 10px;
         }
-        button:hover {
-            background-color: #0056b3;
+
+        button {
+            padding: 5px 10px;
         }
-        
     }
-    .DiagramBox-wrapper {
-        overflow:hidden;
-        width: 100%;
-        height: 100%;
+
+    .DIYNodeBox-content {
+        flex: 1;
         display: flex;
-        flex-direction: column;
-        align-items: center;
         justify-content: center;
-        .contentCode{
-            overflow: hidden;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - $searchbarHeight);
+        .diagramBox {
+            flex: 1;
             display: flex;
             justify-content: center;
             align-items: center;
-            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;
-
-                }
-                .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{
+            width: 100%;
+            height: 100%;
+            svg {
                 flex: 1;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                svg{
-                    position: relative;
-                    top:25;
-                    max-width: none !important;
-                    height: calc(100% - 50px);
-                }
+                width: 100%;
+                height: 100%;
             }
         }
-        .content {
-            overflow: hidden;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            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;
+    }
 
-                }
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-                align-items: center;
-                width: 100%;
-                textarea {
-                    flex: 1;
-                    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: 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;
-            }
-            @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);
-                }
-            }
+    .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);
+        }
+        100% {
+            transform: rotate(360deg);
         }
     }
-}
\ No newline at end of file
+}